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

Question

在JavaScript方面我还在学习绳索，其中一个导致我最大问题的问题是理解插入位置。 目前我正在为wiki编写一个参考表单（ http://t3chbox.wikia.com/wiki/MediaWiki:Wikia.js/referenceForm.js ）并让它为wiki的源代码编辑器工作，但不是WYSIWYG编辑器（Visual Editor）。 我想知道这里是否有人知道如何获得插入位置，然后粘贴编辑内容所在的iframe的文本？

WYSIWYG编辑器可以在这里看到： http ： //t3chbox.wikia.com/wiki/Test？action =编辑（编辑虽然没有登录那些有Wikia帐户并且Visual设置为关闭）。 我一直在使用获取内容并尝试粘贴在插入符号的方法是这样的：

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

谢谢 ：）

Answer 1

您使用的jquery insertAtCaret函数仅适用于textareas和输入字段。 它不适用于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/