0

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()); 
    });
}
0

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'); });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.