Javascript:在所见即所得编辑器中的插入符号处粘贴文本

Question

当涉及到 JavaScript 时，我仍在学习中，而给我带来最多问题的问题之一是理解插入符号的位置。目前我正在为 wiki ( http://t3chbox.wikia.com/wiki/MediaWiki:Wikia.js/referenceForm.js ) 编写引用表格，并让它为 wiki 的源代码编辑器工作，而不是 WYSIWYG 编辑器(可视化编辑器)。我想知道这里是否有人知道如何获取插入符位置，然后为编辑内容所在的 iframe 粘贴文本？

所见即所得的编辑器可以在这里看到:http://t3chbox.wikia.com/wiki/Test?action=edit (对于那些拥有 Wikia 帐户并已将 Visual 设置为关闭的用户，在未登录的情况下进行编辑)。我一直在使用获取内容并尝试粘贴到插入符处的方法是这样的:

$(document.getElementById('cke_contents_wpTextbox1').getElementsByTagName('iframe')[0].contentDocument.body).insertAtCaret('hello');

谢谢:)

Answer 1

您使用的 jquery insertAtCaret 函数仅适用于文本区域和输入字段。它不适用于 contentEditable 元素。您可以查看此 jsfiddle，用于在插入符处插入 contentEditable 元素。

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

                // Range.createContextualFragment() would be useful here but is
                // non-standard and not supported in all browsers (IE9, for one)
                var el = windo.document.createElement("div");
                el.innerHTML = html;
                var frag = windo.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 (windo.document.selection && windo.document.selection.type != "Control") {
            // IE < 9
            windo.document.selection.createRange().pasteHTML(html);
        }
    }

//usage
    var iframeWindow = document.getElementById('cke_contents_wpTextbox1').getElementsByTagName('iframe')[0].contentWindow;
    pasteHtmlAtCaret("Hello World!",iframeWindow);

http://jsfiddle.net/jwvha/534/