使用javascript获取ckeditor textarea的textarea值

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

我想做的是，当有人在文本区域中键入内容时，无论他们键入什么内容，都会显示在页面不同部分的div中

我有一个简单的文本输入可以很好地完成这项工作，但是由于文本区域是一个ckEditor，类似的代码无法工作

我知道答案就在这里：但我知道的还不足以让我明白我该做什么。我想没有人愿意帮我吗

我的代码是：

$('#CampaignTitle').bind("propertychange input", function() {
  $('#titleBar').text(this.value);
});

及

标题

及

---

很好。您询问了如何从textarea获取值，但在您的示例中，您使用的是输入。不管怎样，我们走吧：

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

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

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

---

希望有帮助。

好吧。您询问了如何从textarea获取值，但在您的示例中，您使用的是输入。不管怎样，我们走吧：

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

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

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

希望能有帮助

我仍然很难弄清楚我到底是如何找到一个 用户正在键入ckeditor文本区域

好的，这相当容易。假设您的编辑器名为“editor1”，这将给您一个包含其内容的警报：

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

更困难的部分是检测用户何时键入。据我所知，实际上并没有支持这样做（顺便说一句，我对文档也不太感兴趣）。见本文：

相反，我建议设置一个计时器，用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>

这是示例文本
CKEDITOR.replace（'editor1'）；
定时器=设置间隔（updateDiv，100）；
函数updateDiv（）{
var editorText=CKEDITOR.instances.editor1.getData（）；
$（'#trackingDiv'）.html（editorText）；
}

我仍然很难弄清楚我到底是如何找到一个 用户正在键入ckeditor文本区域

好的，这相当容易。假设您的编辑器名为“editor1”，这将给您一个包含其内容的警报：

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

更困难的部分是检测用户何时键入。据我所知，实际上并没有支持这样做（顺便说一句，我对文档也不太感兴趣）。见本文：

相反，我建议设置一个计时器，用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>

这是示例文本
CKEDITOR.replace（'editor1'）；
定时器=设置间隔（updateDiv，100）；
函数updateDiv（）{
var editorText=CKEDITOR.instances.editor1.getData（）；
$（'#trackingDiv'）.html（editorText）；
}

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

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

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

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

---

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

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

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

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

简单执行

CKEDITOR.instances[elementId].getData();

使用编辑器分配的元素的元素

id=id

。

只需执行

CKEDITOR.instances[elementId].getData();

---

使用编辑器分配的元素的元素

id=id

。

您可以添加以下代码： 通过每次单击，ckeditor字段数据将存储在$（'#ELEMENT_ID'）.val（）中。我用过这个方法，效果很好。ckeditor字段数据将实时保存并准备发送

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

---

您可以添加以下代码： 通过每次单击，ckeditor字段数据将存储在$（'#ELEMENT_ID'）.val（）中。我用过这个方法，效果很好。ckeditor字段数据将实时保存并准备发送

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

---

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

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

---

我意识到这对于OP来说可能太晚了，而且还没有显示正确答案或投票，但我想我应该为未来的读者更新这篇文章。

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

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

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

---

我意识到这对于OP来说可能太晚了，并且没有显示正确的答案，也没有任何投票权，但我想我应该为未来的读者更新这篇文章。

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

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

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

---

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

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

---

非常感谢。工作完美。大象汁：）不过有一件事。在我的ckeditor上，我有用于粗体下划线、斜体和大小的工具栏。如果应用这些样式，它们不会应用到相应的trackingDiv中-除了下划线，下划线工作起来很奇怪。但是大小、粗体、下划线和斜体都不起作用。有什么想法吗？Ckeditor使用strong表示粗体，em表示斜体。我猜您使用的浏览器或框架不会对这些标记应用粗体和斜体样式。你得自己做。伟大的我一直在绕圈子。噩梦。它是在我为两个不同的textarea放置了两个编辑器实例之后开始的。更奇怪的是，在我将内容发布到另一个HTML页面后，信息发布正常。但是在执行普通的document.getElementById（“sss”）.value操作时，dd不会显示文本区域的内容。所以var editorText=CKEDITOR.instances.sss.getData（）；非常好用。CKEDITOR.instances['editor1'].getData（）为我工作了这么多。工作完美。大象汁：）不过有一件事。在我的ckeditor上，我有用于粗体下划线、斜体和大小的工具栏。如果应用这些样式，它们不会应用到相应的trackingDiv中-除了下划线，下划线工作起来很奇怪。但是大小、粗体、下划线和斜体都不起作用。任何我