1

我正在使用以下函数在光标所在的位置插入文本：

现场JSFIDDLE

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ((node = el.firstChild)) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

然后我有：

$("span").click(function() {
    pasteHtmlAtCaret("Some <b>random</b> text");
});

但是，当我单击跨度时，文本不会附加在 contenteditable 中（因为它失去了焦点），而是附加在自身中。

我怎样才能解决这个问题？我需要在光标所在的 contenteditable 内插入文本，如果光标不存在，则文本应附加在 contenteditable 内文本的末尾。

4

2 回答 2

1

老实说，最快的解决方案是在输入按钮上使用 CSS 使其看起来像跨度应该是什么。又快又脏，但它的工作...

于 2013-05-16T08:27:45.767 回答
0

在 div 内的整个过程中跟踪光标位置。因此，当用户离开它时，您仍然保存了光标位置，因此它将文本放在光标最后的位置。如果需要代码，请询问。

于 2014-06-21T17:49:54.943 回答