How to switch to raw HTML in contenteditable for in place editing?

问题

I'm writing a user script to edit the whole html page: one of the features I will include would allow to edit the selected text as raw HTML. This look easy, just insert<xmp>at the beginning of the selection, and </xmp> at the end.

// from https://stackoverflow.com/a/8288313/2284570
var insertHtmlBeforeSelection, insertHtmlAfterSelection;
(function() {
    function createInserter(isBefore) {
        return function(html) {
            var sel, range, node;
            if (window.getSelection) {
                // IE9 and non-IE
                sel = window.getSelection();
                if (sel.getRangeAt && sel.rangeCount) {
                    range = window.getSelection().getRangeAt(0);
                    range.collapse(isBefore);

                    // Range.createContextualFragment() would be useful here but is
                    // non-standard and not supported in all browsers (IE9, for one)
                    var el = document.createElement("div");
                    el.innerHTML = html;
                    var frag = document.createDocumentFragment(), node, lastNode;
                    while ( (node = el.firstChild) ) {
                        lastNode = frag.appendChild(node);
                    }
                range.insertNode(frag);
                }
           } else if (document.selection && document.selection.createRange) {
                // IE < 9
                range = document.selection.createRange();
                range.collapse(isBefore);
                range.pasteHTML(html);
            }
        }
    }

    insertHtmlBeforeSelection = createInserter(true);
    insertHtmlAfterSelection = createInserter(false);
})();

function ConvertToRaw() {
    insertHtmlBeforeSelection('<xmp>');
    insertHtmlAfterSelection('<xmp>');
}

This would be invoked by alt+c when text is selected. invoking alt+c again would remove the<xmp>tags which would have resulted to rendered version back.

Since the<xmp>tag is deprecated, how I can do this by scripting? If I encode the characters, it would be hard to decode them back without affecting previous ones...

回答1:

I use a textarea for the raw html and a contenteditable div for the rendered html. To shuttle between them I use jQuery

//rendered -> raw
$("#raw").text($("#rendered").html());

//raw -> rendered
$("#rendered").html($("#raw").text());

The escaping and un-escaping is done by jQuery.

I have a global flag editmode the value of which is switched between "raw" and "rendered" by the onfocus events of the div and the textarea.

For edits to rendered html there are quite a few events going on because there's a toolbar for formatting but essentially at any point where I change the rendered html I check the flag and if necessary push to the textarea.

For edits to the textarea I hook onkeyup, onkeydown and onmouseup (for paste) to detect change, then check the flag and if necessary push to rendered.

来源：https://stackoverflow.com/questions/25705136/how-to-switch-to-raw-html-in-contenteditable-for-in-place-editing