Question

我正在从CKEditor 4.7迁移到5。

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

但似乎CKE5没有函数ClassicEditor.instances或类似的东西。

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

在旧版instances的CKE5中是否没有模拟允许我从其替换的textarea的id获取编辑器实例？

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

Answer 1

此问题已在How to get data from CKEDITOR5 instance中得到解答，但我们在此考虑一个包含多个编辑器实例的案例。

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

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

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

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

这些实例的键可以是初始化编辑器的元素的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();

如果您没有为DOM中的元素分配ID，该怎么办？如果您使用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

这不是我第一次想提醒自己如何在生产网站上访问CKEditor实例，而该网站只能通过开发者控制台访问DOM，因此提醒自己;）

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

可以使用ckeditorInstance属性访问编辑器实例，该属性在CKEditor 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>' );

CKEditor 5 - 获取编辑器实例

2 个答案: