使用 javascript 获取 ckeditor textarea 的 textarea 值

Posted 2023-02-16

【中文标题】使用 javascript 获取 ckeditor textarea 的 textarea 值

【英文标题】：Getting the textarea value of a ckeditor textarea with javascript

【发布时间】：2011-12-15 21:44:01

【问题描述】：

就 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>

【参考方案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>

【讨论】：

非常感谢。完美运行。大象汁:)

有一点。在我的 ckeditor 上，我有粗体下划线斜体和大小的工具栏。如果您应用这些样式，它们不会被应用到相应的 trackingDiv 中——除了下划线，这很奇怪。但是大小、粗体、下划线和斜体不起作用。有什么想法吗？

Ckeditor 使用 strong 表示粗体，em 表示斜体。我的猜测是您使用的浏览器或框架不会对这些标签应用粗体和斜体样式。你必须自己做。 ***.com/questions/271743/…

太棒了。我一直在绕圈子。恶梦。它是在我为两个不同的文本区域放置两个编辑器实例之后开始的。更奇怪的是，在我将内容发布到另一个 HTML 页面后，信息发布正常。但是做正常的 document.getElementById("sss").value 的事情，dd 不会显示文本区域的内容。所以 var editorText = CKEDITOR.instances.sss.getData();效果很好。

CKEDITOR.instances['editor1'].getData() 为我工作

【参考方案2】：

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

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

我意识到这对于 OP 来说可能为时已晚，并且没有显示为正确答案或没有任何投票（尚未），但我想我会为未来的读者更新帖子。

【参考方案3】：

直接执行

CKEDITOR.instances[elementId].getData();

元素id = id 分配了编辑器。

【讨论】：

这是最好的解决方案。

接受的答案在我的情况下不起作用。看起来很酷，因为它使用主字段 id 作为实例 id。太棒了！它也可以像 CKEDITOR.instances.elementId.getData() 一样使用。

【参考方案4】：

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

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

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

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

【参考方案5】：

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

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

【参考方案6】：

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

$("#CampaignTitle").bind("keyup", function()

    $("#titleBar").text($(this).val());
);

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

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

希望对你有帮助。

【参考方案7】：

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

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

【讨论】：

为什么document上的点击事件？

请解释为什么这是该问题的答案，或者希望此答案被删除。

@Marcel Gwerder : 文档可以被删除它不会做任何改变。

@david.pfx ：因为 ckeditor 字段内容将在每次点击时保存在值 id 中，并且可以通过 post 或 get 方法发送。你可以确定这是最好的方法。我已经测试过了

@Marcel Gwerder ：因为 ckeditor 字段内容将在每次点击时保存在值 id 中，并且可以通过 post 或 get 方法发送。你可以确定这是最好的方法。我已经测试过了

【参考方案8】：

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

【讨论】：

这段代码可以回答这个问题，但你能解释一下吗？

无需回答。这在 5 年前有一个公认的答案。此外，您还没有解释任何代码。