How to allow two-way editing of textarea and live preview

Question

I am trying to set up a simple "table of contents" previewer that consists of a textarea where you paste the HTML of an article, and a 'live preview' container showing just the headers.

In addition to editing via the textarea, I'd also like to be able to edit the header text or change header's attributes (CSS class and h level (h1/h2/h3/etc)) and have those changes reflected in the textarea.

What approach would you recommend? I know there are a few jQuery edit in place plugins, but I'm wondering if that's overkill or if there's a more direct way to do it.

The code I have now is below. Do you have suggestions? The 'working' version is on http://jsfiddle.net/supertrue/6zeWQ/

// selector for the source textarea
var source = $('textarea#source');
// selector for the destination
var destination = $('#toc');
// interface for changing header level and css class
var gui = '<select><option value="h2">h2</option><option value="h3">h3</option><option value="h4">h4</option></select><input type="checkbox" name="hidden" value="Hide?" /> ';

source.keyup(function() {

   var html = '<div>' + source.val() + '</div>';
   var hs = $(html).find('h1,h2,h3,h4,h5,h6');

   destination.empty().append(hs);
   $('#toc h2,#toc h3,#toc h4,#toc h5').prepend(gui);

});

Answer 1

For what it sounds like you want to do, you'll need to build your editor using at least one iframe, which will contain the styled text that you want to edit. Just set document.designmode = "on" inside the iframe.