CKEditor 5 –获取编辑器实例 [英] CKEditor 5 – get editor instances

问题描述

我正在从CKEditor 4.7迁移到5。

I am migrating from CKEditor 4.7 to 5.

在CKE4中，我将执行以下操作：
CKEDITOR.replace （'text_area'）;
，然后在另一个JS函数中，我可以通过
CKEDITOR.instances.text_area.getData（）获取数据code>。

In CKE4, I would do something like this: CKEDITOR.replace('text_area'); and then in another JS function I could get the data by CKEDITOR.instances.text_area.getData().

但是CKE5似乎没有具有 ClassicEditor.instances 之类的功能

But it doesn't appear that CKE5 has a function ClassicEditor.instances or something analogous.

我知道我可以将编辑器实例存储为全局JS变量，但是我正在使用的代码在通用函数中创建了编辑器，因此我可以只是创建一个全局变量，因为我不知道编辑器的名称是先验的。屏幕上也可以同时有几个编辑器处于活动状态。

I know I can store the editor instance as a global JS variable, but the code I am working with creates the editors in a general function, so I can't just create a global variable since I don't know the name of the editor a priori. There can also be several editors active on the screen at the same time.

CKE5中没有与旧的实例类似的可以让我从替换后的文本区域的 id 中获取编辑器实例？

Is there no analog in CKE5 to the old instances that would allow me to get an editor instance from just the id of the textarea it replaced?

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

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

推荐答案

该如何从CKEDITOR5实例获取数据，但让我们考虑一个不止一个编辑器实例的情况。

This question was already answered in How to get data from CKEDITOR5 instance, but let's consider here a case with more than one editor instance.

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

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，所以他们从未想过并学会了如何自己管理编辑器。

There's no repository of editor instances. We could add it but we don't feel that this is an essential feature. It's actually something that people got used to in CKEditor 4 so they never thought and learned how to manage their editors by themselves.

此外，之所以没有一个单独的存储库实例是根本没有中央单例对象。您可以实现多个编辑器类，而他们不必彼此了解。为了提供存储库，我们需要再次将这些内容集中化。

Also, the reason why there's no single repository of instances is that there's no central singleton object at all. You may implement multiple editor classes and they don't have to know about each other. To come up with a repository, we'd need to centralise these things again.

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

So, as you pointed out yourself, a simple way to store all instances would be by having a global (global within your app or module, not necessarily a "global JS variable") map of these instances.

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

The keys to these instances can be the ids of elements on which you initialised editors:

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，那就没问题了。像其他对象一样，元素也可以是地图的键。

What if you don't assign ids to elements in the DOM? If you use ES6, then it's not a problem. Elements, like other objects, can be keys of a map.

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 属性。

If you can't use ES6, then you'd need to do a bit more – e.g. dynamically assign some data-editor-id attributes to elements on which you create the editors.

这篇关于CKEditor 5 –获取编辑器实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！