CKEditor 4(替换类名)获取文本区域值

CKEditor 4 (replace by class name) get text area value

本文关键字：获取 取文本 区域 替换 CKEditor      更新时间：2023-09-26

我试图在CKEditor实例中创建一个预览函数。

我正在使用CKEditor 4，并通过类名替换文本区域，我面临的唯一问题是我无法使用JavaScript获得文本区域的值，这就是我迄今为止所尝试的:

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，我可以对这段代码做些什么来修复它，请忽略第一组代码

这是因为CKEDITOR将您的<textarea>替换为contenteditable="true"属性的<div>，并且在DOM中没有<div>元素的value属性。

您需要将事件侦听器添加到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();
            }
        );
    });
});

对于任何需要它的人来说，这里有一种方法可以获得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 );
    }
}

…

<textarea id="myDoc"></textarea>
<span id="myDoc_length">0</span> characters
相关文章：