Javascript 如何在contentEditable div中的字母之间添加表情符号？
我想在div中添加微笑，但问题是它不是在两个字母之间添加，或者当我将光标指向两者之间时，它终于添加了。请帮助。我想在两者之间添加表情符号Javascript 如何在contentEditable div中的字母之间添加表情符号？,javascript,html,css,Javascript,Html,Css,我想在div中添加微笑，但问题是它不是在两个字母之间添加，或者当我将光标指向两者之间时，它终于添加了。请帮助。我想在两者之间添加表情符号 <!DOCTYPE html> <head> <style type="text/css"> #text { body { font-family: Helvetica, sans-serif; color: #333; } #text_wrap
<!DOCTYPE html>
<head>
<style type="text/css">
#text { body {
font-family: Helvetica, sans-serif;
color: #333;
}
#text_wrapper {
margin: 40px;
}
outline: none;
margin: 10px;
min-height:200px;
}
</style>
</head>
<html>
<body>
<script>
function myFunction() {
var x = document.createElement("IMG");
x.setAttribute("src", "1f602.png");
x.setAttribute("width", "20");
document.body.appendChild(x);
var c=document.getElementById("text");
c.appendChild(x);
}
</script>
<div id="text" contentEditable="true" >
</div>
<button onclick="myFunction()" >Emoji </button>
</body>
</html>
#正文{正文{
字体系列：Helvetica，无衬线；
颜色：#333；
}
#文本包装器{
利润率：40像素；
}
大纲：无；
利润率：10px；
最小高度：200px；
}
函数myFunction（）{
var x=document.createElement（“IMG”）；
x、 setAttribute（“src”、“1f602.png”）；
x、 setAttribute（“宽度”、“20”）；
文件.正文.附件（x）；
var c=document.getElementById（“文本”）；
c、 儿童（x）；
}
表情符号
function getCaretCharacterOffsetWithin(element) {
var caretOffset = 0;
var doc = element.ownerDocument || element.document;
var win = doc.defaultView || doc.parentWindow;
var sel;
if (typeof win.getSelection != "undefined") {
sel = win.getSelection();
if (sel.rangeCount > 0) {
var range = win.getSelection().getRangeAt(0);
var preCaretRange = range.cloneRange();
preCaretRange.selectNodeContents(element);
preCaretRange.setEnd(range.endContainer, range.endOffset);
caretOffset = preCaretRange.toString().length;
}
} else if ( (sel = doc.selection) && sel.type != "Control") {
var textRange = sel.createRange();
var preCaretTextRange = doc.body.createTextRange();
preCaretTextRange.moveToElementText(element);
preCaretTextRange.setEndPoint("EndToEnd", textRange);
caretOffset = preCaretTextRange.text.length;
}
return caretOffset;
}
function myFunction() {
var c=document.getElementById("text");
var position = getCaretCharacterOffsetWithin(c);
var text = c.innerHTML;
var imgStr = '<img src="1f602.png" width="20" />'
c.innerHTML = text.slice(0,position) + imgStr + text.slice(position,text.length);
}
在这里查看它的工作情况：我根据的完美答案制作了一个工作示例，它工作得非常好：
函数粘贴HtmlatCaret（html）{
让我们选择，范围；
if（window.getSelection）{
//IE9和非IE
sel=window.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
范围=选择范围（0）；
range.deleteContents（）；
//Range.CreateContexturalFragment（）在这里会很有用，但是
//非标准且并非所有浏览器都支持（例如IE9）
const el=document.createElement（“div”）；
el.innerHTML=html；
设frag=document.createDocumentFragment（），
节点，
最后一个节点；
while（（node=el.firstChild））{
lastNode=frag.appendChild（节点）；
}
range.insertNode（frag）；
//保留所选内容
如果（最后一个节点）{
range=range.cloneRange（）；
range.setStartAfter（lastNode）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
}
}
}else if（document.selection&&document.selection.type！=“控制”）{
//IE<9
document.selection.createRange（）.pasteHTML（html）；
}
}
函数addToDiv（事件）{
const emoji=event.target.value；
const chatBox=document.getElementById（“chatBox”）；
chatBox.focus（）；
pasteHtmlAtCaret（`${emoji}`）；
}
函数generateEmojiIcon（表情符号）{
常量输入=document.createElement（“输入”）；
input.type=“按钮”；
input.value=emoji；
input.innerText=emoji；
input.addEventListener（“单击”，addToDiv）；
返回输入；
}
常量emojis=[
{
表情符号：“appendChild（）
将把表情符号图像放在div的末尾。用光标选择文本没有任何效果，您需要在要插入表情符号的位置有一个HTML元素。@SaurabhJoshi您必须更具体一点，到底是什么问题？