ansaurus

Question

Answer 1

A:

Several thoughts:

Replacing the innerHTML of the iframe's body each time you execute one of your custom commands is a mistake, for several reasons. One is that it will be slow, particularly for a large amount of content. Another is that you'll lose the selection. Another is that you'll lose any event handlers you may have added to elements within the editable content.
Most of the functions you want to apply have built-in commands in the browser, accessible via the execCommand method of the iframe's document. Why not use them? They'll be faster than your equivalents, preserve the selection and will be added to the undo stack.
window.prompt is generally unusable since IE7, which disabled it by default, giving the user an option to enable it (if you're lucky).

UPDATE

Instead of using innerHTML, you should operate on the DOM nodes contained within the selection. You could use my own library called Rangy ( http://code.google.com/p.rangy ), which abstracts the differences between IE and other browsers' selection and range objects and also adds some convenient methods for dealing within the nodes of a selection. Here's a very simplistic example of how you could implement a bold command (in practice, you'd want to check each whether the range is already completely bold and check each text node for boldness before surrounding it):

var iframe = document.getElementById("your_iframe");
var iframeDoc = iframe.contentDocument, iframeWin;
if (iframeDoc) {
    iframeWin = iframeDoc.defaultView;
} else {
    iframeWin = iframe.contentWindow;
    iframeDoc = iframeWin.document;
}

var sel = rangy.getSelection(iframeWin);
if (sel.rangeCount) {
    var range = sel.getRangeAt(0);

    // If the range has either boundary within a text node, split that text node
    // so that we can work with the part that is selected
    range.splitBoundaries();

    // Get an array of all text nodes within the 
    var textNodes = range.getNodes([3]); // [3] specifies the types of node required

    // Surround each text node
    for (var i = 0, len = textNodes.length, el, n; i < len; ++i) {
        n = textNodes[i];
        el = iframeDoc.createElement("b");
        n.parentNode.insertBefore(el, n);
        el.appendChild(n);
    }
}

Tim Down 2010-08-21 23:32:35

Thanks for reply Tim. I was using the execCommand initially, but the commands are limited, you have very limited control on the HTML output, and it makes it more difficult to switch between rich-text and bbcode.I know the innerHTML isn't the correct thing to do, which is why the question is asking, what do I do INSTEAD of innerHTML to replace the selection only.I found some solutions via Google but none seemed to work as they said they should.

Cory 2010-08-22 00:26:15

ansaurus

tags:

views:

answers:

Javascript getSelection

related questions