2

I'm using tinymce library and I want to provide code completion feature inside tinymce textarea for my users.

now suppose in our tinymce < textarea> we have an html tag which has style attribute with empty value on it like this :

<div style="">
      <!-- Other codes-->
</div>

I have made a javascript event handler that when user press CTRL+Space that function calls. now suppose the user put his/her cursor between the style="" double quotes and press CTRL+SPACE

how can I fetch the html attribute name "style" in my javascript code ?

5
  • You mean document.getElementsByTagName("div")[0].getAttribute("style") ? - jQuery equivalent: $("div").prop("style") Commented May 23, 2014 at 5:16
  • 2
    How are you expecting the user to "put the cursor between the double quotes in style=""? The <div> will be rendered as a visual element, there is no way for the user to put the cursor there. The user could view your web pages source but at that point none of your code is being run and there is nothing you can do to detect that. Commented May 23, 2014 at 5:17
  • no the element can be vary case to case, It may be span, article or anything else Commented May 23, 2014 at 5:18
  • @Mehdi: Please specify that clearly in your question, without which the question doesn't convey anything. Commented May 23, 2014 at 5:22
  • @Daniel I fixed the question and explained it further, now is more clear and concise ... Commented May 23, 2014 at 5:40

1 Answer 1

1

You can use word splitting and some regex to do that. This could give you a starting point:

  1. Get the cursor position.
  2. Get the text at that cursor position
  3. Match only alphabets out of that text (attributes would be alphabets).

Demo: http://jsfiddle.net/abhitalks/stepB/1/

However, this will work only if the value of the attribute value is empty (as per your question). If not, you may look for another way to match, but the concept remains same.

Code:

// handle an event
$("textarea").bind("click", function() {
    var $input = $(this),             // your textarea
        text = $input.val(),          // the entire text of the textarea
        sel = this.selectionStart,    // cursor position
        word = findWord(text, sel),   // get the specific word at cursor position
        tag = word.match(/[A-z]+/);   // match only alphabets from that word
    $("#result").text(tag);
});

// function to find the word at specific position
function findWord(text, position){
    var words = text.split(' '),      // split at spaces into array of words
        offset = 0,                   // track characters traversed
        i;                            // index counter

    for(i=0; i < words.length; i++){
        offset += words[i].length + 1; // keep character count
        if (offset > position) break;  // if next count exceeds position,
    }                                  // we found the word at current index
    return words[i]; 
}

Hope that helps.

Note: selectionStart works from IE9 onwards. It is not supported in IE < 9. If you are looking to support IE.Legacy, then please have a look at the link proposed by @Esko in the comments below.

Sign up to request clarification or add additional context in comments.

4 Comments

I had no idea selectionStart existed! But then after a quick search it seems (surprisingly) that IE doesn't support it. There seem to be workarounds: stackoverflow.com/questions/263743/…
Yes. Thanks @EskoPiirainen. It is not supported in IE <= 8. Added that to the answer.
@abhitalks thank you, your solution is fine but I'm thinking for better algorithm.
Sure, @Mehdi. Please do ping me, if you find a better algo. I would be interested.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.