javascript - CKEditor 4(通过类名替换)获取文本区域值

Question

我正在尝试在 CKEditor 实例中创建预览功能。

我正在使用 CKEditor 4 并通过类名替换 textareas，我面临的唯一问题是我无法使用 JavaScript 获取 textarea 的值，这是我迄今为止尝试过的方法:

function prev()
    {
        html=document.forms["1_form"]["editor1"].value;
        document.getElementById("prev").innerHTML = html;
    }

和 CKEditor 文本区域:

<textarea class="ckeditor" onkeydown="prev()"></textarea>

为什么这行不通？如果我禁用 CKEditor，脚本会按预期运行，但不会启用 ckeditor。我该怎么办？

谢谢!

编辑:

我现在正尝试用替换来完成它，这是我正在使用的代码: CKEDITOR.replace('editor1');//新的ckeditor实例 var editor = CKEDITOR.instances.editor1;//对实例的引用

//on `key` event
editor.on('key', function(){

var data = editor.getData(); //reference to ckeditor data
$('#prev').html(data); //update `div` html

});

它有效，但唯一的问题是，它仅在按下下一个键后更新所以假设编辑器的值为 hello world 它会将预览显示为 hello worl 我该如何处理这段代码来修复它，请忽略第一组代码。

Answer 1

这是因为 CKEDITOR 替换了你的 <textarea>进入<div>与 contenteditable="true"属性并且没有 value <div> 的 DOM 属性元素。

您需要将事件监听器添加到 CKEDITOR 实例，而不是 DOM 元素，例如:

// check if editor is ready
CKEDITOR.on( 'instanceCreated', function( e ) {

        // check if DOM is ready
        e.editor.on( 'contentDom', function() {

            // bind "keydown" event to CKEDITOR
            e.editor.document.on('keydown', function( event ) {

                // write editor content into "prev" element
                document.getElementById( "prev" ).innerHTML = e.editor.getData();
            }
        );
    });
});