使用javascript获取ckeditor文本区域的文本区域值

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

相反，我建议设置一个计时器，该计时器将使用文本区域的值不断更新第二个 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

Answer 4

您可以在 JQuery 上集成一个函数

jQuery.fn.CKEditorValFor = function( element_id ){
  return CKEDITOR.instances[element_id].getData();
}

并将 ckeditor 元素 id 作为参数传递

var campaign_title_value = $().CKEditorValFor('CampaignTitle');

Answer 5

我发现以下代码适用于 ckeditor 5

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        editor.model.document.on( 'change:data', () => {
            editorData = editor.getData();
        } );
    } )
    .catch( error => {
        console.error( error );
    } );

Answer 6

出色地。您询问了如何从文本区域获取值，但在您的示例中您正在使用输入。无论如何，我们开始吧：

$("#CampaignTitle").bind("keyup", function()
{
    $("#titleBar").text($(this).val());
});

如果您确实想要一个文本区域，请将您的输入类型文本更改为此

<textarea id="CampaignTitle"></textarea>

希望它有所帮助。

Answer 7

您可以添加以下代码：
每次点击，ckeditor 字段数据将存储在 $('#ELEMENT_ID').val() 中。我已经使用过该方法并且效果非常好。 ckeditor 字段数据将实时保存并准备发送。

$().click(function(){
    $('#ELEMENT_ID').val(CKEDITOR.instances['ELEMENT_ID'].getData());
});

Answer 8

var campaignTitle= CKEDITOR.instances['CampaignTitle'].getData();