ckeditor onKeyUp 事件如何？

Question

此代码段必须将文本从 textarea text 复制到 textarea text_hidden，此代码无需 ckeditor 即可工作

onKeyUp="document.getElementById('text_hidden').value = this.value;

但是当 ckeditor 启用时

onKeyUp="document.getElementById('text_hidden').value = this.value; 不起作用。

如何解决这个问题？

<textarea name="text" id="text" rows="6" cols="80"  onKeyUp="document.getElementById('text_hidden').value = this.value;" ></textarea></p>

<textarea name="text_hidden" id="text_hidden" rows="6" cols="80" ></textarea>

<script>
        CKEDITOR.replace( 'text' ,
        {   
    allowedContent: true,
    enterMode: CKEDITOR.ENTER_BR,

    });
        CKFinder.SetupCKEditor( editor, '/ckfinder/' );
        config.startupPath = "/files/";
</script>

Answer 1

这是我的 CKEditor-to-textarea 同步演示，反之亦然：https://jsfiddle.net/ty5ks393/1/。输入三个白框之一，查看内容在所有四个容器中的复制。

它使用 Bootstrap 来保持整洁，并显示经典和内联 CKEditor。相关部分（没有外部资源，cmets 和 console.logs）提取在这里：

    <div class="row">
        <div class="col-sm-3">
            <h2>TEXTAREA</h2>
            <textarea id="textarea" class="box"></textarea>
        </div>
        <div class="col-sm-3">
            <h2>CK EDITOR INLINE</h2>
            <div contenteditable="true" id="contentedit" class="box"></div>
        </div>
        <div class="col-sm-3">
            <h2>CK EDITOR</h2>
            <textarea id="ckeditor" class="box"></textarea>
        </div>
        <div class="col-sm-3">
            <h2>RESULT DIV</h2>
            <div id="result" class="box"></div>
        </div>  
    </div>

还有 jQuery：

    $(function() {
        CKEDITOR.disableAutoInline = true;
        var ce = CKEDITOR.inline("contentedit", {
            removePlugins: 'toolbar'
        });
        var ck = CKEDITOR.replace('ckeditor').on('change', function(e) {
            if (document.activeElement.nodeName == "IFRAME") {
                var thisHTML = e.editor.getData();
                var tempDiv = $('<div>').html(thisHTML);
                thisText = tempDiv.text();
                $('#textarea').val(thisText);
                $('#contentedit, #result').html(thisHTML);  
            }
        });

        var timer;

        $('#textarea').keyup(function() {
            var _this = this;
            clearTimeout(timer);
            timer = setTimeout(function() {
                var thisText =$(_this).val().replace(/\n/g, "<br/>");
                $('#result, #contentedit').html(thisText);
                CKEDITOR.instances.ckeditor.setData(thisText);
            }, 200);
        });

        $('#contentedit').keyup(function(e) {
            var _this = this;
            clearTimeout(timer);
            timer = setTimeout(function() {
                var thisHTML = $(_this).html();
                var tempDiv = $('<div>').html(thisHTML.replace(/\<\/p\>/g,"</p>\n\n"));
                thisText = tempDiv.text();
                $('#textarea').val(thisText);
                $('#result').html(thisHTML);
                CKEDITOR.instances.ckeditor.setData(thisHTML);
            }, 200);
        });
    });

所以我使用超时来避免使用 setData() 时 keyup 带来的瓶颈。并且我检测我是否在 IFRAME 中，以确保当我使用 setData() 从其他容器之一更改内容时，我不会将内容更改弹回 CKEditor。

希望对大家有所帮助。

Answer 2

如果您想将 WYSIWYG 内容与 textarea 同步，只需告诉 on change 事件作为更新底层元素的选项。

CKEDITOR.replace('editor', {
    on: {
          change: function() {
              this.updateElement();    
          }
    }
});

Answer 3

搜索了一下，发现一篇文章 (ckeditor-keyup-event) 说 CKEditor api 不支持 "keyup" 事件。 仅支持监听按键事件的“key”方法。

文章作者在editor.setData()上的回调中使用了editor.document.on('keyup')，只有在初始化之后才可用。 p>

我更喜欢在初始化期间附加所需的 keyup 事件，因为他的解决方法不适用于我的用例。我更改了您的代码，如下所示，尽管它实际上并未附加到 keyup 事件，但它对我来说效果很好。

CKEDITOR.replace( 'text' ,
{   
    allowedContent: true,
    enterMode: CKEDITOR.ENTER_BR,
}).on('key',
    function(e){
        setTimeout(function(){
            document.getElementById('text_hidden').value = e.editor.getData();
        },10);
    }
);

如果没有 setTimeout() 函数，getData() 将不会抓取最后一次击键。