如何从CKEditor 5实例中获取数据

Question

我知道对于CKEditor 4来说，你可以像这样获取textarea数据：

var content = CKEDITOR.instances['comment'].getData();

这对于CKEditor 5来说怎么做呢？

- user3691644

Answer 1

你可以在Basic API指南中找到答案。

基本上，在CKEditor 5中没有单个全局编辑器存储库（例如旧的CKEDITOR.instances全局变量）。这意味着你需要保留对所创建的编辑器的引用，并在想要检索数据时使用该引用：

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        editor.getData(); // -> '<p>Foo!</p>'
    } )
    .catch( error => {
        console.error( error );
    } );

如果您需要在其他场合检索数据（谁会在初始化编辑器后立即阅读它呢？;)), 那么将编辑器的引用保存在应用程序状态的共享对象或作用域中的某个变量中：

let theEditor;

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        theEditor = editor; // Save for later use.
    } )
    .catch( error => {
        console.error( error );
    } );

function getDataFromTheEditor() {
    return theEditor.getData();
}

请查看这个JSFiddle：https://jsfiddle.net/2h2rq5u2/

编辑：如果您需要管理多个编辑器实例，请参见CKEDITOR 5获取编辑器实例。

- Reinmar

---

使用“var theEditor”而不是“let theEditor”会更好，可以防止在多次加载时出现“标识符已经声明”的错误。 - Saghachi

Answer 2

声明一个全局变量，然后使用 editor.getData()。就像这样：

var editor;
ClassicEditor
    .create(document.querySelector('#editor'))
    .then(editor => {
        editor=editor;
    })
    .catch(error => {
        console.error(error);
    });

然后，在您的事件处理程序中，应该可以这样做：

editor.getData();

- Arvind

Answer 3

我遇到了一个感觉很独特的情况，即在页面上加载多个 CKeditor5 实例，但我还要动态地添加/删除/重新排列应用了编辑器的文本区域。

创建包含所有实例的数组是可管理的，但在添加/删除/重新排列编辑器实例时也更加复杂。

相反，我决定通过选择所有 .ck-editor__editable 类并迭代遍历它们来获取编辑器实例的 innerHTML 并检查内容。

document.querySelector("button[type='submit']").addEventListener('click', (event) => {
  event.preventDefault();
  const domEditableElements = document.querySelectorAll('.ck-editor__editable');
  for (let i = 0; i < domEditableElements.length; ++i) {
    let elementData = domEditableElements[i].innerHTML
    if (elementData === '<p><br data-cke-filler="true"></p>') {
      console.log(`Field ${i} is empty`);
    }
  }
});

控制台日志显示 ck-editor 在空白字段中存储了 <p><br data-cke-filler="true"></p>。

- Rug