代码之家 › 专栏 › 技术社区 › user3691644

如何从CKEditor 5实例获取数据

ckeditor5 ckeditor

13

user3691644 · 技术社区 · 7 年前

我知道对于CKEditor 4,您可以获得如下文本区域数据:

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

CKEditor 5是如何实现的?

2 回复 | 直到 6 年前

1

26

Reinmar 6 年前

你可以在 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();
}

请参阅此JSFIDLE: https://jsfiddle.net/2h2rq5u2/

编辑: 如果需要管理多个编辑器实例,请参阅 CKEDITOR 5 get editor instances

2

3

Arvind 6 年前

声明一个全局变量,然后使用编辑器。getData()。类似这样:

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

然后,在事件处理程序中,这应该可以工作:

editor.getData();