CKEditor5无法获取编辑器实例，无法读写数据求助

问题根源 #

ClassicEditor.create() 是异步操作，返回 Promise。你当前的代码在 Promise 未完成时就尝试访问 CKeditor 变量，此时变量还未被赋值，因此是 undefined。而通过 DOM 元素获取实例的方法失败，是因为编辑器初始化完成前，.ck-editor__editable 元素还未生成。

修正方案一：在 Promise 回调内操作实例 #

将设置数据的代码移到 .then() 回调中，确保编辑器初始化完成后再执行：

<script type="module">
import { ClassicEditor } from 'ckeditor5';
import translations from 'ckeditor5/translations/tr.js';

const editorConfig = {
    // 你的配置项
    language: 'tr',
    translations
};

let CKeditor;
ClassicEditor.create(document.querySelector('#editor'), editorConfig)
    .then( editor => {
        CKeditor = editor;
        // 直接在这里设置数据
        CKeditor.setData("<p>Another Hello World</p>");
        console.log(CKeditor); // 此时能正确获取实例
    })
    .catch( error => {
        console.error( error );
    });
</script>

<textarea name="content" id="editor" class="block"></textarea>

修正方案二：使用 async/await 简化异步操作 #

如果你的环境支持 ES6+ 的 async/await，可以这样写：

<script type="module">
import { ClassicEditor } from 'ckeditor5';
import translations from 'ckeditor5/translations/tr.js';

const editorConfig = {
    // 你的配置项
    language: 'tr',
    translations
};

async function initEditor() {
    try {
        const CKeditor = await ClassicEditor.create(document.querySelector('#editor'), editorConfig);
        CKeditor.setData("<p>Another Hello World</p>");
        console.log(CKeditor);
    } catch (error) {
        console.error(error);
    }
}

initEditor();
</script>

<textarea name="content" id="editor" class="block"></textarea>

修正方案三：通过 DOM 元素获取实例（确保初始化完成） #

如果你一定要通过 DOM 元素获取实例，需确保编辑器已经完全初始化。可以在初始化完成后的回调中执行相关代码：

<script type="module">
import { ClassicEditor } from 'ckeditor5';
import translations from 'ckeditor5/translations/tr.js';

const editorConfig = {
    // 你的配置项
    language: 'tr',
    translations
};

ClassicEditor.create(document.querySelector('#editor'), editorConfig)
    .then( editor => {
        // 编辑器初始化完成后，通过 DOM 元素获取实例
        const domEditableElement = document.querySelector('.ck-editor__editable');
        const editorInstance = domEditableElement.ckeditorInstance;
        editorInstance.setData('<p>Another Hello World</p>');
    })
    .catch( error => {
        console.error( error );
    });
</script>

<textarea name="content" id="editor" class="block"></textarea>

关键注意点 #

• 永远不要在 Promise 未 resolve 时直接访问编辑器实例，异步操作必须等待完成。
• 若要在编辑器初始化后其他地方使用实例，可以将其存储在全局变量（或合适的作用域）中，但需确保使用前实例已存在。

内容的提问来源于stack exchange，提问作者erena