TinyMCE: Live copy text from TinyMCE to regular text field

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/15958140/tinymce-live-copy-text-from-tinymce-to-regular-text-field

标签

javascript

jquery

html

tinymce