使用javascript获取ckeditor textarea的textarea值

Question

就JS而言，我是一个学习者，虽然我花了几个小时通读教程，这对我有很大的帮助，但我仍然存在问题，无法准确地找出用户在ckeditor文本区域中输入的内容。

我正在尝试做的是，当有人在文本区域中输入时，无论他们输入什么，都会出现在页面不同部分的div中。

我有一个简单的文本输入来做这件事，但是因为文本区域是一个ckEditor，所以类似的代码不能工作。

我知道答案就在这里：ckEditor API textarea value，但我还不够清楚我应该做什么。我想没人愿意帮我吧？

我运行的代码是：

$('#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文本区域中输入的内容时遇到问题。

好的，这很简单。假设您的编辑器名为"editor1"，这将为您提供一个包含其内容的警告：

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

更难的部分是检测用户何时输入。据我所知，实际上并没有这样做的支持(顺便说一句，我对文档也不太感兴趣)。请参阅本文：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分配给编辑器。