montrant menu contextuel dans contentEditable div

Question

j'ai un contentEditable div avec le texte suivant par exemple:

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

Maintenant, par exemple, si l'utilisateur clique sur « m » dans le document de mot, je veux montrer un menu contextuel contenant peu de texte les choix. Ce menu contextuel sera contenu dans un élément div. Je souhaite remplacer le mot "document" par l'option (texte) sélectionnée par l'utilisateur dans le menu contextuel. À mon avis, je dois trouver la position absolue de cliquer pour afficher le menu contextuel, puis je dois trouver des éléments spatiaux avant et après la position du caret, puis remplacer la sélection par l'option sélectionnée dans le menu contextuel. Une idée de comment je peux le faire en utilisant JavaScript et jQuery? Une partie de ma question concerne le menu contextuel et d'autres, plus important est la façon dont je peux détecter le mot sur lequel l'utilisateur a cliqué dans contentEditable div ou dans la zone de texte d'un autre côté. mon but est quelque chose comme dans l'image ci-dessous en fait je veux faire une application de translittération similaire. Le processus de conversion de script de roman en ourdou a été fait mais je suis confronté à beaucoup de problèmes dans le développement de l'interface utilisateur sur le web. application de translittération google peut être trouvé here. J'espère que quelqu'un peut m'aider à obtenir un mot sous la souris de l'utilisateur et afficher un menu contextuel contenant peu de choix.

Answer 1

Vous pouvez jeter un oeil à certains des plug-ins de menu contextuel existant

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

Pour obtenir le mot sélectionné dans un zone de texte, jetez un oeil à l'fieldSelection plugin.

Donc, en utilisant le second plug-in et fieldSelection (Disclaimer: Je pense que l'indexation en ce qui concerne le remplacement de chaîne est légèrement - ne sont pas entièrement testés)

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. Pour détecter un mot sous le curseur de la souris rock solide fiable: Il suffit d'envelopper chaque mot que vous souhaitez détecter dans un conteneur séparé, span par exemple. Ce n'est pas difficile à faire avec javascript. Analysez simplement les mots dans une boucle et créez un élément span pour chacun d'entre eux, puis définissez son mot innerHTML =. Ensuite, vous pouvez lire la cible de l'événement click et il vous donnera la durée avec le mot. Pour afficher un menu contextuel sur place est une tâche triviale: Créer un div avec votre menu de contenu et le rendre positiion: absolu et affichage: aucun. Lorsque vous voulez l'afficher, définissez ses styles supérieur et gauche (par exemple) égaux au décalage de l'élément span cible du conteneur parent et affichez son style display = "box". Vous êtes tous ensemble;)