Javascript：在 WYSIWYG 编辑器中将文本粘贴到插入符号处

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 帐户并且视觉设置为关闭的用户，在未登录的情况下进行编辑）。我一直在使用获取内容并尝试在插入符号处粘贴的方法是这样的：

$(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/