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 ?

Mehdi
  • 3,795
  • 3
  • 36
  • 65
  • You mean document.getElementsByTagName("div")[0].getAttribute("style") ? - jQuery equivalent: $("div").prop("style") – mplungjan May 23 '14 at 05:16
  • 2
    How are you expecting the user to "put the cursor between the double quotes in `style=""`? The `
    ` 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.
     – Daniel May 23 '14 at 05:17
  • no the element can be vary case to case, It may be span, article or anything else – Mehdi May 23 '14 at 05:18
  • @Mehdi: Please specify that clearly in your question, without which the question doesn't convey anything. – Abhitalks May 23 '14 at 05:22
  • @Daniel I fixed the question and explained it further, now is more clear and concise ... – Mehdi May 23 '14 at 05:40

1 Answers1

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.

Abhitalks
  • 27,721
  • 5
  • 58
  • 81
  • 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: http://stackoverflow.com/questions/263743/caret-position-in-textarea-in-characters-from-the-start – Esko Piirainen May 23 '14 at 06:56
  • Yes. Thanks @EskoPiirainen. It is not supported in IE <= 8. Added that to the answer. – Abhitalks May 23 '14 at 07:09
  • @abhitalks thank you, your solution is fine but I'm thinking for better algorithm. – Mehdi May 23 '14 at 12:49
  • Sure, @Mehdi. Please do ping me, if you find a better algo. I would be interested. – Abhitalks May 23 '14 at 12:53