Live preview using multiple instances of the EE RTE

Question

We need to grab the html/content from multiple instances of the RTE and perform a live preview of the content. It's easy to do with just one instance of the RTE using something like

{exp:channel:form channel="channel_name" rte_selector=".ee-rte"}
    <textarea class="ee-rte">{field_tag}</textarea>
{/exp:channel:form}

<div id="preview"></div>

...

var out = $('#preview');
var content = $('.WysiHat-editor');
content.on('keyup', function(){ out.html(content.html()); }); 

However, because you can't assign each auto-inserted RTE an ID, you can't match the input to the output because we're using the $('.WysiHat-editor') selector which grabs any and all RTEs.

I've tried using .each() but haven't been able to make it work. Our client specifically asked for a live preview, lest we'd be using livelook.

Any tips?

---

Also, as an aside, does anybody know why exp:channel:form trucates <p> tags when it populates fields (divs, textareas, etc.)?

---

I've been trying it and I've made some progress but it's still buggy and not working they way it should.

var count = 0;
$('.WysiHat-editor').each(function(i){
    $(this).attr('id', 'wysi-' + i);
    count += i;
});

$('.out').each(function(i){
    $(this).attr('id', 'out-' + i);
});

for (var k = 0; k < count; k++) {
    $('#wysi-' + k).on('keypress keyup keydown paste change focus blur', function(){ 
            $('#out-' + k).html($(this).html()); 
    });
}

Answer 1

For posterity:

$('.output-div1').html($('#textarea-1').data('wysihat').$editor[0].innerHTML);
$('.output-div2').html($('#textarea-2').data('wysihat').$editor[0].innerHTML);

etc. It's tedious with lots of WysiHats, but it works. We moved away from the keyup function, but if you were to implement it, it would be something like:

$('#textarea-n').data('wysihat').$editor.on('keyup', function(){ console.log('k'); });