ckeditor - 如何从 CKEditor 5 实例获取数据

Question

我知道对于 CKEditor 4，你可以像这样获取文本区域数据:

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

CKEditor 5 是如何做到这一点的？

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 get editor instances .