我正在从ckeditor 4.7迁移到5.

Question

.

但看来CKE5具有函数

ClassicEditor.instances

或类似的功能。

我知道我可以将编辑器实例存储为全局JS变量，但是我正在使用的代码会在一般函数中创建编辑器，因此我不能仅创建一个全局变量，因为我不知道该名称的名称编辑者先验。屏幕上也可以在屏幕上有几个编辑器。 cke5中没有类似于旧的类似模拟，这会让我从替换的文本方面获得一个编辑器实例？

我猜想我可以创建自己的全局数组来持有编辑器实例，但是如果内置有更好的支持，我宁愿不想
    

th这个问题已经在

中回答了如何从CKEditor5Instance

那里获取数据，但让我们在这里考虑一个具有多个编辑器实例的情况。

我猜想我可以创建自己的全局数组来持有编辑器实例，但是如果内置有更好的支持，我宁愿不想

没有编辑实例的存储库。我们可以添加它，但我们不认为这是一个基本功能。实际上，这是人们在Ckeditor 4中习惯的事情，因此他们从未想过并学会了如何自己管理编辑。

，也没有单个实例存储库的原因是根本没有中央单人物对象。您可以实现多个编辑类，他们不必彼此了解。要提出一个存储库，我们需要再次集中这些东西。 正如您所指出的那样，存储所有实例的一种简单方法是将这些实例的全局（在您的应用或模块中进行全局（全局JS变量”）映射。

这些实例的密钥可以是您初始化编辑器的元素的ID：

instances

如果您不为DOM中的元素分配ID？如果您使用ES6，那不是问题。与其他对象一样，元素可以是地图的钥匙。

id

Answer 1

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();

属性，以创建编辑器的元素。

这不是我第一次试图提醒自己如何在生产网站上访问CKEditor实例，该网站仅通过开发人员控制台访问DOM，所以我自己提醒我;）

https：//ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html#how-to-to-to-to-to-to-to-the--editor-instance-instance-object-from-the-dom-lement- ckeditor 5使用的可满足元素上可用的warter属性可以访问编辑器实例。您可以通过例如访问此DOM元素。

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();

班

data-editor-id

我想补充一点，如果您想在Drupal 9.5+中实现这一目标，Drupal确实为我们创建了这些地图。

ckeditorInstance

将与所有编辑返回地图。 然后，您可以达到相同的结果

.ck-editor__editable

。
    

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

// 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 2

Drupal.CKEditor5Instances

这是因为参考变量（ckeditorInstance）存储在每个内容元素上。像表这样的子元素也可能具有“ ck-editor __edior”类，但没有引用该实例，因为它们是“嵌套”。

注意API非常不同，因此像Drupal.CKEditor5Instances.get("{editorId}").getData()这样的命令无法正常工作。为此，您现在需要使用类似：

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

是的，这很详细，您需要根据您的需求向上述处理任何错误处理，但也更有能力。但是，仍然可以使用

const editors = Array.from(
  document.querySelectorAll('.ck-content'),
  node => node.ckeditorInstance,
);

和

CKEDITOR.replace('text_area')

（或

const editor = document.activeElement.closest('.ck-content').ckeditorInstance
const ckViewFrag = editor.data.processor.toView('<strong>rich text</strong>)
const ckModFrag = editor.data.toModel(ckViewFrag)
editor.model.insertContent(ckModFrag)

和

Answer 3

），但是。