如何确定CKEditor是否已加载？

Question

我该如何确定CKEditor是否已加载？我已查阅API文档，但只找到了加载事件。我想检查CKEditor是否已加载，因为如果我第二次加载它，我的文本区域就会消失。

- friedkiwi

Answer 1

loaded事件对我没用，但instanceReady事件可用：

CKEDitor_loaded = false;

CKEDITOR.on('instanceReady', function(){ CKEditor_loaded = true; }); 

- Kees C. Bakker

---

目前还没有 CKEDITOR，那么我该如何检测它？它在准备就绪时不会触发任何事件吗？ - Sebastian Sastre

你能试着把它放在 JS Fiddle 上吗？ - Kees C. Bakker

如果窗口能够触发“ckeditorReady”，那么所有人都会很高兴。我忘了提到，我是通过ajax按需加载它的（在一个带有PrototypeJS更新器的父标签中）。把所有东西粘贴起来会很混乱，但它所做的就是：当更新器完成（onComplete）时，它初始化自己和子级。在相关子级的初始化中，我已经做了这个：http://jsfiddle.net/yzxWv/2/ - Sebastian Sastre

更新，我刚刚进行了一些修改并使其在脚本末尾触发，结果如预期。但现在我遇到了一些问题，似乎与销毁有关，因为如果再次调用更新程序（例如再次编辑该输入），CKEditor会显示“未捕获的编辑器实例”goalEditor“已附加到提供的元素”。 - Sebastian Sastre

您可以使用 || {} 链式调用来避免 CKEDITOR 或对象层次结构中的任何其他键尚不可用的情况，代码如下：const isCKEInstanceReady = instanceName => (((window.CKEDITOR || {}).instances || {})[instanceName] || {}).status === 'ready'; - Ashley Wilson

Answer 2

var waitCKEDITOR = setInterval(function() {
    if (window.CKEDITOR) {
       clearInterval(waitCKEDITOR);
       //CKEDITOR.replace(...);
    }
}, 100/*milli*/);

- Alex

Answer 3

我查看了API文档，但只找到了loaded事件。不知道是否存在特定的属性 - 可能有！ - 但您可以使用loaded事件设置全局标志。虽然这样做并不太好，但却能胜任工作。

// At the top of the script
CKEDitor_loaded = false;

// then later
CKEDITOR.on('loaded', function(){ CKEditor_loaded = true; });

你可以考虑在 CKEDITOR 中设置某些内容，而不是使用全局变量：

CKEDITOR.flag_loaded = true;

这会更加简洁。

- Pekka

---

@Yvan 我不知道。你为什么需要这样做？ - Pekka

因为如果我意外地加载了两次，我的页面会损坏并需要刷新。由于我的应用程序完全是AJAX驱动的，这样做不好。 - friedkiwi

@Yvan 您的意思是，当您两次初始化文本区域时？ - Pekka

当用户再次请求页面时，文本区域会被初始化第二次。假设我们有一个博客和一个注册表单。如果用户访问注册表单，没有问题；如果用户访问博客，也没有问题；但是如果用户在访问博客后再次访问注册表单，就会出现问题，因为文本区域会被重新创建。用户应该刷新页面，然后它就能正常工作了。 - friedkiwi

@Yvan 我明白了！确实很棘手。请确保你在CKEditor论坛上提出这个问题，据我所知，开发人员经常在那里活动。 - Pekka

Answer 4

如果实例未准备好，文本设置将被丢弃

在初始化CkEditor（这里是版本4）时，在编辑器准备好处理数据之前，您不应该设置任何数据。

// Initialize this._editor with replace

if (this._editor.status !== "ready") {
    this._editor.on("instanceReady",
        event => {
            event.editor.setData(data);
        });
} else {
    this._editor.setData(data);
}

- Fab

Answer 5

//creating instance of ck-editor
var yourInstance = CKEDITOR.instances.yourContainer;
//check instance of your ck-editor 
if(yourInstance){
      //destroy instance
      yourInstance .destroy(true); 
}
// create instance again
CKEDITOR.replace( 'yourContainer' );

- devendra singh

Answer 6

希望这能帮到某些人。

我也通过 AJAX 加载了一个带有 CKEDITOR 功能的页面片段，因此我遇到了这个问题中概述的许多问题。这是我的解决方案：

function setCk(id){
if(window.CKEDITOR){
    var _instId = CKEDITOR.instances[id];
    if(_instId == undefined){
        CKEDITOR.inline(id);
    }else{
        CKEDITOR.instances[id].destroy();
        CKEDITOR.inline(id);
    }
}

}

在此代码片段的每个 AJAX 响应中，我都会将一个脚本元素注入到头部，并调用 setCk(textareaId)。诀窍在于，在每次 AJAX 片段加载后销毁目标 ID 的任何先前的 CKEDITOR 实例，并重新初始化 CKEDITOR。

- Jonathan Parker

Answer 7

我知道这是一个非常古老的帖子，但在我的研究中，它一直出现。我通过 jQuery 动态加载 CKEditor。我不想多次加载它，因为会出现一些问题，就像你发现的那样。

简单解决方案：

if (!window.CKEDITOR) {
    // (not loaded yet, your code to load it)
}

- Convictions