Question

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

我正在使用CKEditor 4并且正在按类名替换textareas，我面临的唯一问题是我无法使用JavaScript获取textarea的值，这是我到目前为止所尝试的：

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

和CKEditor textarea：

<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元素的DOM中没有<div>属性。

您需要向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();
            }
        );
    });
});

Answer 2

对于任何需要它的人来说，这是获取HTML字段的TEXT值的一种方法（在本例中用于动态字符计数器）：

JS ......

CKEDITOR.replace( 'myDoc', {
    width: 605,
    height: 500
});

setInterval("updateCount()", 500);

function updateCount() {
    var str = CKEDITOR.instances.myDoc.getData();
    if (str) {
        var element = CKEDITOR.dom.element.createFromHtml( str );
        var no_html = element.getText();
        $('#myDoc_length').html( no_html.length );
    }
}

...使用HTML ...

<textarea id="myDoc"></textarea>
<span id="myDoc_length">0</span> characters

CKEditor 4（由类名替换）获取文本区域值

2 个答案: