How To Add Emoji In Between The Letters In Contenteditable Div?

I want to add smiles to the div but problem is it is not adding in between two letters or when I point my cursor in between it is adding at last please help.I want to add the emoji

Solution 1:

I've made a working example based on @tim-down's perfect answer, and it's working very well:

functionpasteHtmlAtCaret(html) {
        let sel, range;
        if (window.getSelection) {
          // IE9 and non-IE
          sel = window.getSelection();
          if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is// non-standard and not supported in all browsers (IE9, for one)const el = document.createElement("div");
            el.innerHTML = html;
            let frag = document.createDocumentFragment(),
              node,
              lastNode;
            while ((node = el.firstChild)) {
              lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selectionif (lastNode) {
              range = range.cloneRange();
              range.setStartAfter(lastNode);
              range.collapse(true);
              sel.removeAllRanges();
              sel.addRange(range);
            }
          }
        } elseif (document.selection && document.selection.type != "Control") {
          // IE < 9document.selection.createRange().pasteHTML(html);
        }
      }

      functionaddToDiv(event) {
        const emoji = event.target.value;
        const chatBox = document.getElementById("chatbox");
        chatBox.focus();
        pasteHtmlAtCaret(`<b>${emoji}</b>`);
      }
      functiongenerateEmojiIcon(emoji) {
        const input = document.createElement("input");
        input.type = "button";
        input.value = emoji;
        input.innerText = emoji;
        input.addEventListener("click", addToDiv);
        return input;
      }
      const emojis = [
        {
          emoji: "😂",
        },
        {
          emoji: "❤️",
        },
      ];
      emojis.forEach((emoji) => {
        document
          .getElementById("emojis")
          .appendChild(generateEmojiIcon(emoji.emoji));
      });

#emojisspan {
        cursor: pointer;
      }
      #chatbox {
        border: 1px solid;
      }

<buttontype="button"onclick="document.getElementById('chatbox').focus(); 
  pasteHtmlAtCaret('<b>INSERTED</b>'); "
>
  Paste HTML
</button><divid="emojis"></div><divid="chatbox"contenteditable></div>

Solution 2:

You need to get the position of the cursor, after that, you need to insert the image at that point. Something like this would work:

function getCaretCharacterOffsetWithin(element) {
    varcaretOffset=0;
    vardoc= element.ownerDocument || element.document;
    varwin= doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            varrange= win.getSelection().getRangeAt(0);
            varpreCaretRange= range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            caretOffset = preCaretRange.toString().length;
        }
    } elseif ( (sel = doc.selection) && sel.type != "Control") {
        vartextRange= sel.createRange();
        varpreCaretTextRange= doc.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

function myFunction() {
        var c=document.getElementById("text"); 
        varposition= getCaretCharacterOffsetWithin(c);
        vartext= c.innerHTML;
        varimgStr='<img src="1f602.png" width="20" />'
        c.innerHTML = text.slice(0,position) + imgStr + text.slice(position,text.length);
    }

See it working here: https://jsfiddle.net/br9yg1bk/