setting the cursor after an image in contenteditable div

Question

I am trying to implement something like the input box of chat window of facebook where with the click of space bar text can be converted into emoji. With my code, whenever the conversion happens, the caret goes back to the beginning of div. And also, I want the function convert() to be called as long as there is text present in div.But after one conversion the code stops working and I have to click outside and then inside the text box for the conversion to take place.How can I implement these things correctly?

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>

Please find this answer here- [click here](https://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-element/52269923#52269923) — Mahfuzur Rahman, Sep 11 '18 at 06:35

score 2 · Accepted Answer · answered May 12 '17 at 08:14

Only Script Changes. See Comments.

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

  }
    }
  }
    });

thanks! But the cursor is still not getting set. It goes to the beginning of contenteditable div after every conversion @Tanvi — Aayushi, May 12 '17 at 08:30
its working. Let me work out a fiddle for you. I am checking in Chrome btw. — Tanvi Chaturvedi, May 12 '17 at 08:38
Check this fiddle, https://jsfiddle.net/yws3s6r9/ Though it is a cross browser problem. Chrome - ok | Firefox - not. — Tanvi Chaturvedi, May 12 '17 at 08:48
try this, after you have converted your text into emoji, hit backspace and do not refresh the page and start typing again. It won't work then — Aayushi, May 12 '17 at 08:54
https://jsfiddle.net/yws3s6r9/2/ Try this. The value "i" should be correctly calculated - this is the key. But we need to think a cross browser compatible solution. — Tanvi Chaturvedi, May 12 '17 at 10:36
it works! thank you so much! about that browser compatibility thing, I think that making the appearance of div compatible with other browsers should solve the problem. @Tanvi — Aayushi, May 12 '17 at 18:49

setting the cursor after an image in contenteditable div

1 Answers1