1

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

我正在使用 CKEditor 4 并用类名替换 textarea，我面临的唯一问题是我无法使用 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我可以对这段代码做些什么来修复它，请忽略第一组代码。

4

2 回答 2

4

这是因为 CKEDITOR 将您的<textarea>into<div>替换为contenteditable="true"属性，并且valueDOM 中没有<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();
            }
        );
    });
});
于 2012-12-24T18:20:54.797 回答
1

对于任何需要它的人，这是获取 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
于 2013-01-09T06:39:27.923 回答