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 中获取编辑器实例？

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

Answer 1

这个问题已经在中得到了回答，但让我们在这里考虑一个具有多个编辑器实例的情况。

I guess I could create my own global array to hold the editor instances, but I would rather not if there is something built in and better-supported

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

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

因此，正如您自己指出的那样，存储所有实例的一种简单方法是拥有这些实例的全局（在您的应用程序或模块中是全局的，不一定是 "global JS variable"）映射。

这些实例的键可以是您在其上初始化编辑器的元素的 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 class.

// 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>' );

Answer 3

运行使用 jQuery 和 class 选择器的编辑器的多个副本：

$( '.editor' ).each( function() {
    InlineEditor
        .create( this )
        .catch( error => {
            console.error( error );
        } );
});

CKEditor 5 – 获取编辑器实例

CKEditor 5 – get editor instances

ckeditor

ckeditor5