使用 javascript 获取 ckeditor textarea 的 textarea 值

Question

就 JS 而言，我是一名学习者，虽然我花了好几个小时阅读教程，这对我有很大帮助，但我仍然无法弄清楚我如何找出用户正在输入的内容ckeditor 文本区域。

我想要做的是让当有人在 textarea 中键入时，他们键入的任何内容都会出现在页面不同部分的 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 分配了编辑器。

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

嗯。您询问了从 textarea 获取价值，但在您的示例中，您使用的是输入。无论如何，我们开始吧：

$("#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();