CKEditor 5 - 获取编辑器实例

Question

我正在从CKEditor 4.7迁移到5.

在CKE4中,我会做这样的事情: CKEDITOR.replace('text_area'); 然后在另一个JS函数中我可以得到数据 CKEDITOR.instances.text_area.getData().

但似乎CKE5没有功能ClassicEditor.instances或类似的功能.

我知道我可以将编辑器实例存储为全局JS变量,但我正在使用的代码在一般函数中创建编辑器,因此我不能只创建一个全局变量,因为我不知道编辑器的名称先验.屏幕上也可以同时激活多个编辑器.

CKE5中是否没有模拟旧版本instances,这样我就可以从id它替换的textarea中获取一个编辑器实例？

我想我可以创建自己的全局数组来保存编辑器实例,但是如果有内置的东西并且支持得更好,我宁愿不要

Answer 1

这个问题已在如何从CKEDITOR5实例获取数据中得到解答,但让我们在这里考虑一个具有多个编辑器实例的情况.

我想我可以创建自己的全局数组来保存编辑器实例,但是如果有内置的东西并且支持得更好,我宁愿不要

没有编辑器实例的存储库.我们可以添加它,但我们不认为这是一个必不可少的功能.这实际上是人们在CKEditor 4中习惯的东西,所以他们从未想过并学会了如何自己管理编辑.

此外,没有单个实例存储库的原因是根本没有中心单例对象.您可以实现多个编辑器类,他们不必彼此了解.要想出一个存储库,我们需要再次集中这些东西.

因此,正如您自己指出的那样,存储所有实例的一种简单方法是通过在这些实例中创建全局(在您的应用程序或模块中的全局,不一定是"全局JS变量")映射.

这些实例的键可以是初始化编辑器的元素的ID:

const editors = {}; // You can also use new Map() if you use ES6.

function createEditor( elementId ) {
    return ClassicEditor
        .create( document.getElementById( elementId ) )
        .then( editor => {
            editors[ elementId ] = editor;
        } )
        .catch( err => console.error( err.stack ) );
}

// In real life, you may also need to take care of the returned promises.
createEditor( 'editor1' );
createEditor( 'editor2' );

// Later on:
editors.editor1.getData();

如果您不将ID分配给DOM中的元素,该怎么办？如果您使用ES6,那么这不是问题.与其他对象一样,元素可以是地图的关键字.

const editors = new Map();

function createEditor( elementToReplace ) {
    return ClassicEditor
        .create( elementToReplace )
        .then( editor => {
            editors.set( elementToReplace, editor );
        } )
        .catch( err => console.error( err.stack ) );
}

// In real life, you may also need to take care of the returned promises.
createEditor( textarea1 );
createEditor( textarea2 );

// Later on:
editors.get( textarea1 ).getData();

如果你不能使用ES6,那么你需要做更多的事情 - 例如动态地data-editor-id为你创建编辑器的元素分配一些属性.

Answer 2

这不是我第一次尝试提醒自己如何通过开发者控制台访问 DOM 来访问生产网站上的 CKEditor 实例，所以给自己一个提醒;)

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html#how-to-get-the-editor-instance-object-from-the-dom-element

可以使用ckeditorInstanceCKEditor 5 正在使用的 contenteditable 元素上可用的属性来访问编辑器实例。您可以通过类等方式访问此 DOM 元素.ck-editor__editable。

// A reference to the editor editable element in the DOM.
const domEditableElement = document.querySelector( '.ck-editor__editable' );
    
// Get the editor instance from the editable element.
const editorInstance = domEditableElement.ckeditorInstance;
    
// Now you can use the editor instance API.
editorInstance.setData( '<p>Hello world!<p>' );