Question

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

我正在尝试做的是，当有人输入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 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分配了编辑器。

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

好。您询问了从textarea获取值，但在您的示例中，您正在使用输入。无论如何，我们走了：

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

如果您真的想要textarea将输入类型文本更改为此

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

希望它有所帮助。

Answer 6

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

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

Answer 7

您可以添加以下代码： ckeditor字段数据将通过每次点击存储在$（＆＃39;＃ELEMENT_ID＆＃39;）。val（）中。我使用过该方法，效果很好。 ckeditor现场数据将实时保存并准备发送。

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

Answer 8

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

使用javascript获取ckeditor textarea的textarea值

8 个答案: