TinyMCE: Live copy text from TinyMCE to regular text field

Question

something I've been struggling with here for hours now. We use tinyMCE on the back end for one of our consumer systems and the powers that be have dictated that they want the ability for whatever text the user types in to the TinyMCE editor to be mirrored over to a regular text field (with no html mark up inside).

The idea here is to have one field for HTML mail content (TinyMCE) and one for simple plaintext mail (regular textarea). So when the user types in their email content inside TinyMCE the text will be copied over, letter by letter, to the plain text area.

However I cannot get this seemingly basic functionality to work whatsoever, even using tinyMCE specific JS.

Here's my latest attempt (of several, not saying this is "more right" than my prior iterations, just the latest):

    <div class="row not-on-phone">
                    <label for="wysiwyg">
                        <strong>HTML</strong>
                    </label>
                <div>
                    <br style="line-height:1px">
                    <TEXTAREA name="HTML" id="HTML" WRAP="Physical" onkeyup="copyText()" class="rtfeditor"><cfoutput>#HTML#</cfoutput></TEXTAREA>
                    <br style="line-height:1px">
                </div>
            </div>
            <div class="row not-on-phone">
                    <label for="wysiwyg">
                        <strong>Plain Text</strong>
                    </label>
                <div>
                    <br style="line-height:1px">
                    <TEXTAREA name="Text" id="Text" WRAP="Physical" rows="20"><cfoutput>#Text#</cfoutput></TEXTAREA>
                    <br style="line-height:1px">
                </div>
            </div>

Pertinent JS:

    <script language="javascript">

function copyText (){
    var content = tinymce.get('HTML').getContent({format : 'raw', no_events : 1});
    document.getElementsById('Text').innerHTML = content;
}
</script>

So how do I get the text to be duplicated over to this regular text area in real-time keystroke by keystroke from TinyMCE?

Thariama Thariama · Accepted Answer · 2013-04-12T08:47:00

For this you will need to use a tinymce onKeydown or onkeyup handler. This one can be set in the tinymce init like this

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onKeyUp.add(function(ed, evt) {
          copyText();
      });
   }
});

TinyMCE: Live copy text from TinyMCE to regular text field

1 Answers