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

【问题标题】：setting the cursor after an image in contenteditable div在 contenteditable div 中的图像后设置光标
【发布时间】：2017-05-12 07:14:48
【问题描述】：

我正在尝试实现类似 facebook 聊天窗口的输入框，通过点击空格键文本可以转换为表情符号。使用我的代码，无论何时发生转换，插入符号都会回到 div 的开头。而且，只要 div 中存在文本，我希望调用函数 convert()。但是在一次转换后，代码停止工作，我必须在文本框的外部和内部单击才能进行转换。我怎样才能正确地实现这些东西？

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>

【问题讨论】：

请在这里找到这个答案-click here

标签： javascript jquery contenteditable onkeyup

【解决方案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 的开头@Tanvi
它的工作。让我为你编一个小提琴。我正在检查 Chrome 顺便说一句。
检查这个小提琴，jsfiddle.net/yws3s6r9 虽然这是一个跨浏览器的问题。铬 - 好的 | Firefox - 不是。
试试这个，在你把你的文字转换成表情符号后，按退格键，不要刷新页面，然后重新开始输入。那就不行了
jsfiddle.net/yws3s6r9/2 试试这个。应该正确计算值“i” - 这是关键。但是我们需要考虑一个跨浏览器兼容的解决方案。