在contentEditable div中显示上下文菜单

Question

我有一个contentEditable div,其中包含以下文字:

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

现在,例如,如果用户点击word文档中的"m",我想显示包含少量文本选项的上下文菜单.该上下文菜单将包含在div元素中.我想用用户从上下文菜单中选择的选项(文本)替换单词"document".在我看来,我必须找到单击的绝对位置以显示上下文菜单,然后我必须在插入符号位置之前和之后找到空格元素,然后用从上下文菜单中选择的选项替换选择.知道如何使用JavaScript和jQuery做到这一点？ 编辑: 我的问题的一部分是关于上下文菜单和其他更重要的是我如何检测用户在contentEditable div或另一方面在文本区域中单击的单词.我的目标如下图所示 实际上我想制作一个类似的音译应用程序.从罗马到乌尔都语的脚本转换过程已经完成但是我在网络上的用户界面开发中遇到了很多问题.谷歌音译应用程序可以在这里找到.我希望有人可以帮助我在用户的鼠标下获取单词并显示包含少量选项的上下文菜单.

Answer 1

您可能想要查看一些现有的上下文菜单插件

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

要获取文本区域中当前选定的单词,请查看fieldSelection插件.

所以使用第二个插件和fieldSelection(免责声明:我认为关于字符串替换的索引略有关闭 - 尚未完全测试)

使用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>