Javascript: Pasting text at caret in WYSIWYG editor

Question

I'm still learning the ropes when it comes to JavaScript and one of the issues which is causing me the most problems is understanding the caret position. Currently I'm writing a reference form for a wiki ( http://t3chbox.wikia.com/wiki/MediaWiki:Wikia.js/referenceForm.js ) and have it working for the source code editor for the wiki, but not the WYSIWYG editor (Visual Editor). I was wondering if anyone here knew how to get the caret position and then paste text for the iframe in which the edit content sits?

The WYSIWYG editor can be seen here: http://t3chbox.wikia.com/wiki/Test?action=edit (edit whilst not logged in for those with Wikia accounts and have Visual set to off). The method I've been using the get the content and attempt to paste at the caret is this:

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

Thanks :)

Answer 1

The jquery insertAtCaret function that you are using only works with textareas and input fields. It does not work with contentEditable elements. You can take a look at this jsfiddle for inserting at caret for contentEditable elements.

    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/