使用JavaScript获取ckeditor文本域的值

Question

使用JavaScript获取ckeditor文本域的值

javascriptckeditor

50

就 JavaScript 而言，我是个初学者。虽然我花了很多时间阅读教程，收获颇丰，但我仍然遇到了一个问题：如何获取用户在 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>

- Didju Juzphart

8个回答

17

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

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

我意识到这可能对楼主来说太晚了，而且不会显示为正确答案或获得任何投票（尚未），但我想为将来的读者更新帖子。

- Lindsay

11

只需执行

CKEDITOR.instances[elementId].getData();

使用元素id = id，将其分配给编辑器。

- itzmukeshy7

这是最好的解决方案。 - Ahsan

被接受的答案在我的情况下没有起作用。它似乎非常酷，因为它使用主字段ID作为实例ID。太棒了！它也可以像CKEDITOR.instances.elementId.getData()这样使用。 - naf4me

4

你可以在JQuery上集成一个功能。

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

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

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

- p1nox

2

我发现以下代码适用于CKEditor 5。

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

- harshit mishra

0

好的，你问如何从文本区域中获取值，但是在你的示例中使用了输入框。无论如何，我们来看看：

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

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

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

希望能有所帮助。

- Rodrigo Manguinho

-1

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

- Isuru

1

这段代码可能能够回答问题，但你能否多解释一下吗？ - Roman

这个问题5年前已经有了一个被接受的答案。此外，您没有解释您的代码。 - Novocaine

-1

你可以添加以下代码：每次单击时，ckeditor字段数据将存储在$('#ELEMENT_ID').val()中。我已经使用了这种方法，它非常有效。 ckeditor字段数据将实时保存，并准备好发送。

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

- Saeed Zam

2

为什么要在 document 上绑定点击事件？ - Marcel Gwerder

请解释为什么这是问题的答案，否则预计此答案将被删除。 - david.pfx

@Marcel Gwerder：文档可以删除，它不会产生任何更改。 - Saeed Zam

@david.pfx：因为 ckeditor 字段内容将在每次单击时保存在值 ID 中，并准备通过 POST 或 GET 方法发送。您可以确信这是最好的方法。我已经测试过了。 - Saeed Zam

@Marcel Gwerder：因为 ckeditor 字段内容将在每次单击时保存在值 ID 中，并准备通过 POST 或 GET 方法发送。您可以确信这是最好的方法。我已经测试过了。 - Saeed Zam

SO 的目标是为了社区的利益提供高质量的问题和答案。您应该编辑您的答案，以包括更多的解释，以便所有读者受益。即使正确，过于简短的答案也可能会受到审查，并有被投票否决或删除的风险。 - david.pfx

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jere · Accepted Answer

我还在研究如何找出用户在 ckeditor 文本区域中输入的内容。

好的，这很简单。假设您的编辑器命名为“editor1”，以下代码将显示一个弹窗，其中包含文本区域的内容：

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

较难的部分是检测用户的输入。就我所知，实际上并没有支持这样做的方法（顺便说一下，我对文档也不是很满意）。请参阅这篇文章：http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html

相反，我建议设置一个计时器来连续更新第二个区域的值为文本域的值：

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>