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 inserta
Solution 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.
Post a Comment for "How To Switch To Raw Html In Contenteditable For In Place Editing?"