使用javascript获取ckeditor textarea的textarea值

Question

就JS来说,我是一个学习者,虽然我已经花了几个小时阅读有很多帮助的教程,但我仍然无法确定如何找出用户在ckeditor textarea中输入的内容.

我正在尝试做的是,当有人键入textarea时,无论他们键入什么,都会出现在页面不同部分的div中.

我有一个简单的文本输入做得很好,但因为文本区域是一个ckEditor类似的代码不起作用.

我知道答案就在这里:ckEditor API textarea值,但我不知道要弄清楚我的意图.我不认为有人会帮助我吗？

我工作的代码是:

$('#CampaignTitle').bind("propertychange input", function() {
  $('#titleBar').text(this.value);
});

和

<label for="CampaignTitle">Title</label>
<input name="data[Campaign][title]" type="text" id="CampaignTitle" />

和

<div id="titleBar" style="max-width:960px; max-height:76px;"></div>

Answer 1

我仍然无法确定如何找出用户在ckeditor textarea中输入的内容.

好的,这很容易.假设您的编辑器名为"editor1",这将为您提供其内容的警报:

alert(CKEDITOR.instances.editor1.getData());

更难的部分是检测用户输入的时间.据我所知,实际上没有支持这样做(我对btw的文档印象不是很深).请参阅此文章:http: //alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html

相反,我建议设置一个计时器,它将使用textarea的值不断更新你的第二个div:

timer = setInterval(updateDiv,100);
function updateDiv(){
    var editorText = CKEDITOR.instances.editor1.getData();
    $('#trackingDiv').html(editorText);
}

这似乎工作得很好.为清晰起见,这是完整的事情:

<textarea id="editor1" name="editor1">This is sample text</textarea>

<div id="trackingDiv" ></div>

<script type="text/javascript">
    CKEDITOR.replace( 'editor1' );

    timer = setInterval(updateDiv,100);
    function updateDiv(){
        var editorText = CKEDITOR.instances.editor1.getData();
        $('#trackingDiv').html(editorText);
    }
</script>

Answer 2

至少从CKEDITOR 4.4.5开始,您可以为编辑器内容的每次更改设置一个监听器,而不是运行计时器:

CKEDITOR.on("instanceCreated", function(event) {
    event.editor.on("change", function () {
        $("#trackingDiv").html(event.editor.getData());
    });
});

我意识到OP可能为时已晚,并且没有显示正确的答案或有任何投票(但),但我想我会更新未来读者的帖子.

Answer 3

简单地执行

CKEDITOR.instances[elementId].getData();

元素id = id元素分配编辑器.