如何从CKEditor 5实例获取数据

Posted 2021-04-11

我知道对于CKEditor 4，你可以得到这样的textarea数据：

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

如何为CKEditor 5完成这项工作？

答案

你可以在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 get editor instances。

另一答案

声明一个全局变量，然后使用editor.getData（）。像这样的东西：

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

然后，在您的事件处理程序中，这应该工作：

editor.getData();