在 contenteditable div 中的图像后设置光标

Question

我正在尝试实现类似于 facebook 聊天 window 的输入框，其中单击 space 栏文本可以转换为表情符号。使用我的代码，无论何时发生转换，插入符号都会回到 div 的开头。而且，只要 div.But 中存在文本，我就希望在一次转换后调用函数 convert() place.How我能正确实现这些东西吗？

var data={
  "value":":)",
  "image":"https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSaW1KOeceO85Y7KfUXGyLZm1LfTwjhQspKKXUl3D3a5Mo1uz-AhA"
};
$(document).ready(function(){
  convert();
  
  
  
    function getWord(text){
      var word=text.split(" ").pop();
      return word;
    }
  
  
  function setCursor(i){
    i++;
    console.log(i);
     var el = document.getElementById("image");
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStartAfter(el);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
  }
  
  function convert(){
    document.body.onkeyup=function(e){
       var contenteditable = document.querySelector('[contenteditable]');
  text = contenteditable.textContent;
    if(e.keyCode==32){
      var word=getWord(text);
      if(word.includes(data.value)){
        var i=0;
        var img = "<img id='image'"+i+" src='" + data.image +"' class='image' /> ";
        
        console.log(img);
        $("#text-box").html(function (_, html) {
          return html.replace(data.value , img );
        });
          setCursor(i);     
        //$("#text-box").html(text.(replace(data.value,img));
        //document.getElementById('textbox').replaceChild(data.value,img);
       }

  }
    }
  }
    });

<html>
<head>
 <style type="text/css">
  .image{
   position: relative;
   max-height: 1.4em;
   max-width: 1.4em;
  }

  [contenteditable]{
   -webkit-appearance:textfield;
   appearance:textfield;
   border: 1px solid black;
   line-height:1.4em;
   min-height: 20px;
  }
 </style>
</head>
<body>
<div contenteditable="true" id='text-box'> 
</div>


 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 <script type="text/javascript" src="emoji.js"></script>
 <script type="text/javascript" src="data.json"></script>

</body>
</html>

Answer 1

仅脚本更改。查看评论。

var data={
  "value":":)",
  "image":"https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSaW1KOeceO85Y7KfUXGyLZm1LfTwjhQspKKXUl3D3a5Mo1uz-AhA"
};
$(document).ready(function(){

  convert();



    function getWord(text){
      var word=text.split(" ").pop();
      return word;
    }


  function setCursor(i){

     var el = document.getElementsByClassName("image")[i]; // Use cannot use more than one Id in HTML. Modify your HTML. Now the selector will be classnames
        var range = document.createRange();
        var sel = window.getSelection();
        range.setStartAfter(el);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);

  }

  function convert(){
    var i = 0; // Set the scope of i correctly. It wasnt incrementing in the code.
    document.body.onkeyup=function(e){
       var contenteditable = document.querySelector('[contenteditable]');
  text = contenteditable.textContent;
    if(e.keyCode==32){
      var word=getWord(text);
      if(word.includes(data.value)){

        var img = "<img id='image'"+i+" src='" + data.image +"' class='image' />";

        console.log(img);

        $("#text-box").html(function (_, html) {
          html = html.replace( /&nbsp;/g,'' ); // Trim extra &nbsp;
          return html.replace(data.value, img );
        });
        setCursor(i); 
        i++;    
        //$("#text-box").html(text.(replace(data.value,img));
        //document.getElementById('textbox').replaceChild(data.value,img);
       }

  }
    }
  }
    });

在 contenteditable div 中的图像后设置光标

setting the cursor after an image in contenteditable div

javascript

jquery

contenteditable

onkeyup