在显示上下文菜单CONTENTEDITABLE格

Question

我有一个CONTENTEDITABLE格与下面的文字，例如：

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

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

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> 

Answer 2

1. 检测鼠标光标下的单词rock solid reliable：只需在单独的容器中包装要检测的每个单词，例如跨度。用javascript做并不困难。只需解析循环中的单词并为每个单词创建span元素，然后设置其innerHTML =单词。然后你可以阅读点击事件的目标，它会给你的跨度与单词。

2. 要当场显示上下文菜单是一项简单的任务： 使用内容菜单创建div，并将其设置为position：absolute和display：none。如果要显示它，请将其顶部和左侧样式（例如）设置为等于来自父容器的目标跨度元素偏移量，并使其样式为display =“box”。你全部设置;）