Question

I have a contentEditable div with following text for example:

<div contentEditable='true'> This document is classified</div>

Now for example if user clicks on ‘m’ in word document I want to show a context menu containing few text choices. That context menu will be contained in a div element. I want to replace the word “document” with the option(text) selected by user from context menu. In my view I have to find absolute position of click to show context menu and then I have to find space elements before and after the caret position and then replace the selection with option selected from context menu. Any idea how I can do it using JavaScript and jQuery?
Edit:
one part of my question is about context menu and other the more important is how i can detect the word on wchich user has clicked on in contentEditable div or in text area on the other hand. my goal is something like in below picture

actually i want to make a similar transliteration application. the process of script conversion from roman to Urdu has been done however i m facing lot of problems in user interface development on the web. google transliteration application can be found here. i hope someone can help me in getting word under user’s mouse and display a context menu containing few choices.

Answer 1

You may want to have a look at some of the existing context menu plugins

1. http://www.trendskitchens.co.nz/jquery/contextmenu/
2. http://labs.abeautifulsite.net/projects/js/jquery/contextMenu/demo/
3. http://plugins.jquery.com/plugin-tags/context-menu

To get the currently selected word in a text area, have a look at the fieldSelection plugin.

So using the second plugin and fieldSelection (Disclaimer: I think the indexing regarding string replacement is slightly off – have not fully tested)

Javascript

 $(document).ready(function () {
    //replace
    $("#tx").contextMenu({
       menu: 'replace'
    }, function (action, el, pos) {
        update(action, el)
    });

    function update(action, el) {
        var range = $("#tx").getSelection();
        var textLength = $("#tx").val().length;

        var firstPart = $("#tx").val().substring(0, range.start);
        var secondPart = $("#tx").val().substring(range.start, textLength);

        var lastIndexofSpaceInfirstPart = firstPart.lastIndexOf(" ");
        var firstIndexofSpaceInSecondPart = secondPart.indexOf(" ");

        var startOfWord = 0
        var endOfWord = 0


        if (lastIndexofSpaceInfirstPart < 0) {
            // start of string
            startOfWord = 0;
        } else {
            startOfWord = lastIndexofSpaceInfirstPart;
        }

        if (firstIndexofSpaceInSecondPart < 0) {
            // end of textArea
            endOfWord = textLength
        } else {
            endOfWord = firstIndexofSpaceInSecondPart + range.start;
        }

        var word = $.trim($("#tx").val().substring(startOfWord, endOfWord));

        var replaceMent = $("#tx").val().substr(0, startOfWord)
                            + action.toString()
                            + $("#tx").val().substr(endOfWord, textLength);

                alert(
                      "rangeStart: " + range.start +
                      "\n\nrangeEnd: " + range.end +
                      "\n\nrangeLength: " + range.length +
                    +"\n\nfirstPart: " + firstPart
                    + "\n\n secondPart: " + secondPart
                    + "\n\n lastIndexofSpaceInfirstPart: " + lastIndexofSpaceInfirstPart
                    + "\n\n firstIndexofSpaceInSecondPart:" + firstIndexofSpaceInSecondPart
                     + "\n\nWordStart: " + startOfWord
                     + "\n\nEndofWord: " + endOfWord
                     + "\n\nWord: '" + word + "'"
                     + "\n\nNew Text: '" + replaceMent + "'"
                    );
            }
        });

Html

<textarea id="tx">
    Some text
    </textarea>


    <ul id="replace" class="contextMenu">
      <li class="edit"><a href="#youwordhere1">youwordhere1</a></li>
      <li class="cut separator"><a href="#youwordhere2">youwordhere2</a></li>
      <li class="copy"><a href="#youwordhere3">youwordhere3</a></li>
      <li class="paste"><a href="#youwordhere4">youwordhere4</a></li>
      <li class="delete"><a href="#youwordhere5">youwordhere5</a></li>
      <li class="quit separator"><a href="#youwordhere6">youwordhere6</a></li>
    </ul>