JavaScript range - after inserting a node how to set the caret after the that node
Question
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?
1 answers
solution1
0 2022-06-21 16:58:29
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.