I'm trying to set some emoji into a contenteditable div by using the javascript range. But after I insert the new emoji node, the caret is set before the new emoji and not after. I tried the follow solution:
Inserting caret after an inserted node
but no luck, here below is the code I'm using:
var sel, rng;
if (window.getSelection) {
rng = document.createRange();
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
console.log(sel);
rng = sel.getRangeAt(0);
rng.deleteContents();
rng.insertNode( curemji );
rng.setStartAfter(curemji);
rng.collapse(false);
sel.removeAllRanges();
sel.addRange(rng);
}
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().text = emoji;
}
can someone please help to understand what I'm doing wrong?
Looks like you were pretty close, I made a change to use a text node and got it working:
rng.insertNode( curemji );
rng.setStartAfter(curemji);
To:
var textNode = document.createTextNode(curemji);
rng.insertNode(textNode);
rng.setStartAfter(textNode);
I also included a full example using some jQuery, side note to anyone using Quill, it will manipulate any entered html so this will not work, I ended up using the Quill Emoji extension to get the behavior I wanted.
$('.insert-character:first-of-type').click( function(e) {
insertTextAtCursor($(".editor p")[0], "😀");
});
$('.insert-character:nth-of-type(2').click( function(e) {
insertTextAtCursor($(".editor p")[0], "😎");
});
$('.insert-character:nth-of-type(3').click( function(e) {
insertTextAtCursor($(".editor p")[0], "👍");
});
function insertTextAtCursor(el, text) {
var sel = window.getSelection();
var range = sel.getRangeAt(0);
if (el.contains(range.startContainer) && el.contains(range.endContainer)) { //Check if cursor is in desired element
range.deleteContents();
textNode = document.createTextNode(text);
range.insertNode(textNode);
sel.removeAllRanges();
range.collapse();
sel.addRange(range);
sel.collapseToStart();
}
else {
el.append(text);
}
}.editor {
height: 1rem;
margin-bottom: 5px;
padding: 8px 15px;
font-size: 1rem;
border: 1px solid black;
width:300px;
}
.editor p {
margin: 0;
}<body>
<div class="container">
<div class="editor" contenteditable="true" data-placeholder="Send Message">
<p><br></p>
</div>
</div>
<button class='insert-character'>😀</button>
<button class='insert-character'>😎</button>
<button class='insert-character'>👍</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>