我试图通过使用javascript范围将一些表情符号设置为可满足的div。但是在我插入新的表情符号节点之后，插入符号被设置在新的表情符号之前，而不是之后。我尝试了以下解决方案:
在插入的节点后插入插入符号
但是没有运气，下面是我使用的代码:
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;
}
有人能帮我理解我做错了什么吗?
看起来你很接近了，我做了一个改变，使用一个文本节点，并使它工作:
rng.insertNode( curemji );
rng.setStartAfter(curemji);
:
var textNode = document.createTextNode(curemji);
rng.insertNode(textNode);
rng.setStartAfter(textNode);
我还包含了一个使用jQuery的完整示例，对任何使用Quill的人来说，它会操纵任何输入的html，所以这不会起作用，我最终使用Quill Emoji扩展来获得我想要的行为。
$('.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>