TinyMCE:将文本从TinyMCE实时复制到常规文本字段 [英] TinyMCE: Live copy text from TinyMCE to regular text field

问题描述

我已经在这里苦苦挣扎了几个小时.我们在一个消费系统的后端使用tinyMCE，它的功能决定了他们希望将用户在TinyMCE编辑器中键入的任何文本的功能都镜像到常规文本字段(不带html标记)里面).

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).

这里的想法是为HTML邮件内容(TinyMCE)提供一个字段，为简单的纯文本邮件(常规文本区域)提供一个字段.因此，当用户在TinyMCE中输入其电子邮件内容时，该文本将逐字母复制到纯文本区域.

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.

但是，即使使用tinyMCE特定的JS，我也无法使这个看似基本的功能正常工作.

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> 

相关JS:

    <script language="javascript">

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

那么，如何通过TinyMCE的实时击键，将要复制的文本复制到此常规文本区域中?

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

推荐答案

为此，您将需要使用tinymce onKeydown或onkeyup处理程序.可以这样在tinymce init中设置

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:将文本从TinyMCE实时复制到常规文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！