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

我正在尝试实现类似facebook聊天窗口输入框的东西，点击空格键可以将文本转换为表情符号。在我的代码中，每当转换发生时，插入符号都会返回到div的开头只要div中存在文本，就可以调用。但是在一次转换后，代码停止工作，我必须单击文本框外部，然后单击文本框内部才能进行转换。如何正确实现这些功能

var数据={
“值”：“，
“图像”：https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSaW1KOeceO85Y7KfUXGyLZm1LfTwjhQspKKXUl3D3a5Mo1uz-啊哈“
};
$（文档）.ready（函数（）{
convert（）；
函数getWord（文本）{
var word=text.split（“”.pop（）；
返回词；
}
函数setCursor（i）{
i++；
控制台日志（i）；
var el=document.getElementById（“图像”）；
var range=document.createRange（）；
var sel=window.getSelection（）；
范围。设置开始后（el）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
}
函数转换（）{
document.body.onkeyup=函数（e）{
var contenteditable=document.querySelector（“[contenteditable]”）；
text=contenteditable.textContent；
如果（e.keyCode==32）{
var-word=getWord（文本）；
if（字包括（数据值））{
var i=0；
var img=“”；
控制台日志（img）；
$（“#文本框”）.html（函数（#，html）{
返回html.replace（data.value，img）；
});
设置光标（i）；
//$（“#文本框”）.html（文本。（替换（data.value，img））；
//document.getElementById（'textbox'）.replaceChild（data.value，img）；
}
}
}
}
})；

.形象{
位置：相对位置；
最大高度：1.4em；
最大宽度：1.4em；
}
[内容可编辑]{
-webkit外观：textfield；
外观：textfield；
边框：1px纯黑；
线高：1.4em；
最小高度：20px；
}

仅脚本更改。请参阅注释

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);
       }

  }
    }
  }
    });

var数据={
“值”：“，
“图像”：https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSaW1KOeceO85Y7KfUXGyLZm1LfTwjhQspKKXUl3D3a5Mo1uz-啊哈“
};
$（文档）.ready（函数（）{
convert（）；
函数getWord（文本）{
var word=text.split（“”.pop（）；
返回词；
}
函数setCursor（i）{
var el=document.getElementsByClassName（“image”）[i]；//Use不能在HTML中使用多个Id。请修改您的HTML。现在选择器将是类名
var range=document.createRange（）；
var sel=window.getSelection（）；
范围。设置开始后（el）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
}
函数转换（）{
var i=0；//正确设置i的作用域。它在代码中没有递增。
document.body.onkeyup=函数（e）{
var contenteditable=document.querySelector（“[contenteditable]”）；
text=contenteditable.textContent；
如果（e.keyCode==32）{
var-word=getWord（文本）；
if（字包括（数据值））{
var img=“”；
控制台日志（img）；
$（“#文本框”）.html（函数（#，html）{
html=html.replace（//g'，）；//额外修剪
返回html.replace（data.value，img）；
});
设置光标（i）；
i++；
//$（“#文本框”）.html（文本。（替换（data.value，img））；
//document.getElementById（'textbox'）.replaceChild（data.value，img）；
}
}
}
}
});

仅脚本更改。请参阅注释

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);
       }

  }
    }
  }
    });

var数据={
“值”：“，
“图像”：https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSaW1KOeceO85Y7KfUXGyLZm1LfTwjhQspKKXUl3D3a5Mo1uz-啊哈“
};
$（文档）.ready（函数（）{
convert（）；
函数getWord（文本）{
var word=text.split（“”.pop（）；
返回词；
}
函数setCursor（i）{
var el=document.getElementsByClassName（“image”）[i]；//Use不能在HTML中使用多个Id。请修改您的HTML。现在选择器将是类名
var range=document.createRange（）；
var sel=window.getSelection（）；
范围。设置开始后（el）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
}
函数转换（）{
var i=0；//正确设置i的作用域。它在代码中没有递增。
document.body.onkeyup=函数（e）{
var contenteditable=document.querySelector（“[contenteditable]”）；
text=contenteditable.textContent；
如果（e.keyCode==32）{
var-word=getWord（文本）；
if（字包括（数据值））{
var img=“”；
控制台日志（img）；
$（“#文本框”）.html（函数（#，html）{
html=html.replace（//g'，）；//额外修剪
返回html.replace（data.value，img）；
});
设置光标（i）；
i++；
//$（“#文本框”）.html（文本。（替换（data.value，img））；
//document.getElementById（'textbox'）.replaceChild（data.value，img）；
}
}
}
}
});

谢谢！但光标仍未设置。每次转换@Tanviits工作后，光标都会转到contenteditable div的开头。让我为您制作一个提琴。我正在签入Chrome。检查这个提琴，尽管这是一个跨浏览器问题。Chrome-ok | Firefox-not。在您将文本转换为emo后，试试这个ji，点击backspace，不要刷新页面并再次开始键入。它将不起作用，然后尝试此操作。值为“i”应该正确计算-这是关键。但我们需要考虑一个跨浏览器兼容的解决方案。谢谢！但光标仍然没有设置。每次转换@Tanviits工作后，它都会转到contenteditable div的开头。让我为您制作一个小提琴。我正在检查Chrome btw。检查这个小提琴，尽管它是cross浏览器问题。Chrome-ok | Firefox-not。请在完成后尝试此操作