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=edit（在没有登录的情况下进行编辑，对于那些使用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/

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

1 个答案: