CKEditor5富文本编辑器如何取值

Question

html中引入了CKEditor5的js代码，然后通过下面代码绑定到textarea元素上面。

<textarea name="content" id="editor">
    <p>Here goes the initial content of the editor.</p>
</textarea>

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

然后js的方式就不能获取到textarea的文本节点，查看CKEditor的API问题，发现可以通过editor.getData()获取；但是只能刚加载的时候获取，如何做到，点击某个按钮就能拿到文本框内容呢？

Answer 1

ClassicEditor

    .create( document.querySelector( '#editor' ), {  
        //工具栏，可选择添加或去除
        toolbar: ['headings', 'bold', 'italic', 'blockQuote', 'bulletedList', 'numberedList', 'link', 'cut','undo','redo'],
        //toolbar: ['headings', 'bold', 'italic', 'blockQuote', 'bulletedList', 'numberedList', 'link', 'ImageUpload', 'cut','undo','redo'],
        //editor加载中文简体，默认是英文
        language: 'zh-cn' 
        //,ckfinder: {
        //    uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
        //}
        //image: {
        //    // You need to configure the image toolbar, too, so it uses the new style buttons.
        //    toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ],

        //    styles: [
        //        // This option is equal to a situation where no style is applied.
        //        'full',

        //        // This represents an image aligned to the left.
        //        'alignLeft',

        //        // This represents an image aligned to the right.
        //        'alignRight' ,

        //        'side'
        //    ]
        //},
    } )
    .then( editor => {
        window.editor = editor;
} )
    .catch( err => {
        console.error( err.stack );
} );

 
var a = document.getElementById("editor"); //取得纯文本

alert(a.innerHTML);
alert(a.textContent);

Answer 2

有木有人咧！！！

Answer 3

在第一个.then回调函数里面加按钮的点击事件就可以了
.then(editor=>{
let btn = document.querySelector('#btn')
btn.onclick = () => {
let content = editor.getData()
}
})