我怎么能(使用
jquery或其他)在我的contenteditable div的光标/插入位置插入html：
<div contenteditable="true">Hello world</div>
例如,如果光标/插入符号位于“hello”和“world”之间,则用户单击按钮,例如“插入图像”,然后使用javascript,类似于< img src = etc etc>等.将插入“你好”和“世界”之间.我希望我已经明确表示= S.
非常感谢示例代码,非常感谢！
解决方法
以下函数将在所有主流桌面浏览器的光标位置插入DOM节点(元素或文本节点)：
function insertNodeAtCursor(node) {
var sel,range,html;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
sel.getRangeAt(0).insertNode(node);
}
} else if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
html = (node.nodeType == 3) ? node.data : node.outerHTML;
range.pasteHTML(html);
}
}
如果您想要插入HTML字符串：
function insertHtmlAtCursor(html) {
var sel,node;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = window.getSelection().getRangeAt(0);
node = range.createContextualFragment(html);
range.insertNode(node);
}
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().pasteHTML(html);
}
}
我从我对类似问题的回答中对此进行了调整：How to find cursor position in a contenteditable DIV?
