如何正确销毁 CKEditor 实例？

Posted 2023-02-16

【中文标题】如何正确销毁 CKEditor 实例？

【英文标题】：How to properly destroy CKEditor instance?

【发布时间】：2011-04-06 12:10:04

【问题描述】：

我在一个非常简单的页面上运行 CKeditor 3.4。我遇到了一个问题（有时），当我调用 document.main_form.submit() 时，它不会发送 textarea 的内容。经过一番阅读，听起来CKeditor没有正确销毁。我试图在保存表单之前手动销毁它，但无法调用它。奇怪的是，它有时有效，但有时无效。我在 Chrome 上，所以这可能会搞砸一些事情，但在 Firefox 中也会发生同样的事情。

如何正确销毁 CKeditor 以便它始终在 POST 中发送 textarea 数据。谢谢！

【参考方案1】：

我遇到了这个问题。好痛啊。

要正确销毁编辑器实例，请尝试

if (CKEDITOR.instances.myInstanceName) CKEDITOR.instances.myInstanceName.destroy();

来自文档here

我通过在回发之前将编辑器的内容分配给隐藏字段来解决缺少内容的问题。我正在使用 ASP.Net，但它应该可以通用。

在提交按钮的客户端点击处理程序中，调用

if (CKEDITOR.instances.myInstanceName)
    document.getElementById('hiddenField').value = CKEDITOR.instances.getData();

【讨论】：

我怎么知道'myInstanceName'是什么？这是编辑的id吗？

【参考方案2】：

我的情况

CKEDITOR.instances.myInstanceName.destroy();

没有帮助，因为我在jquery dialog 中双击某个项目时打开了CKEditor。当我关闭编辑器然后再次打开它们时，我的代码崩溃了。 解决方案正在使用

CKEDITOR.instances.myInstanceName.destroy(false);

更新了 DOM 元素 (link to documentation)。

【讨论】：

我们也在 jquery 对话框中打开我们的 CKEditor。我们正在使用CKEDITOR.instances.myInstanceName.destroy(true);，这也导致我们的代码由于错误“TypeError：a is null”而崩溃。然而，切换到false 并没有解决我们的问题。不得不将这行代码包装在 try/catch 中

【参考方案3】：

我曾经使用 angularjs ui-router，每个子视图都有一个 CKEDITOR 实例。每次加载 ui-view 时，我都使用以下解决方案来清除实例

for(name in CKEDITOR.instances)

    CKEDITOR.instances[name].destroy()

【讨论】：

这是一个更好的解决方案。在我的情况下，每次用户访问加载编辑器的路径时，实例名称都会更改....从 editor1 到 editor2 等。由于我无法轻松预测实例名称，因此像这样循环遍历它们。谢谢！

【参考方案4】：

$this->widget('cms.extensions.fancybox.EFancyBox', array(
    'target' => 'a#fancy-link',
    'config' => array( 'onClosed'=>'js:function()for(name in CKEDITOR.instances) CKEDITOR.instances[name].destroy(true);'
)));

【参考方案5】：

使用这个简单的代码。注意我的文本区域 ID 是 editor1。 或者您也可以通过console.log(CKEDITOR.instances.editor1);查看它

if (CKEDITOR.instances.editor1) 
     CKEDITOR.instances.editor1.destroy();

【参考方案6】：

最终奏效的解决方案。

问题是如果您销毁 ckeditor，然后尝试替换不起作用的 textarea。

我发现这个简单的例子给了我线索。使用 div 并附加 ckeditor 而不是使用 replace api 调用

http://ckeditor.com/latest/samples/old/ajax.html

<div id='emailEditor1'>
              </div>

function closeTab() 
    emailEditor1.destroy();
    emailEditor1 = null;


function createEditor() 
    if (emailEditor1 == null) 
        emailEditor1 = CKEDITOR.appendTo( 'emailEditor1');
    

【参考方案7】：

for(name in CKEDITOR.instances) CKEDITOR.instances[name].destroy()

用于代码销毁所有ckeditor创建的实例