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&nbsp; &nbsp; .create( document.querySelector( '#editor' ), {&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; //工具栏，可选择添加或去除&nbsp; &nbsp; &nbsp; &nbsp; toolbar: ['headings', 'bold', 'italic', 'blockQuote', 'bulletedList', 'numberedList', 'link', 'cut','undo','redo'],&nbsp; &nbsp; &nbsp; &nbsp; //toolbar: ['headings', 'bold', 'italic', 'blockQuote', 'bulletedList', 'numberedList', 'link', 'ImageUpload', 'cut','undo','redo'],&nbsp; &nbsp; &nbsp; &nbsp; //editor加载中文简体，默认是英文&nbsp; &nbsp; &nbsp; &nbsp; language: 'zh-cn'&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; //,ckfinder: {&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'&nbsp; &nbsp; &nbsp; &nbsp; //}&nbsp; &nbsp; &nbsp; &nbsp; //image: {&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; // You need to configure the image toolbar, too, so it uses the new style buttons.&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ],&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; styles: [&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; // This option is equal to a situation where no style is applied.&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; 'full',&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; // This represents an image aligned to the left.&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; 'alignLeft',&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; // This represents an image aligned to the right.&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; 'alignRight' ,&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; 'side'&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; //},&nbsp; &nbsp; } )&nbsp; &nbsp; .then( editor => {&nbsp; &nbsp; &nbsp; &nbsp; window.editor = editor;} )&nbsp; &nbsp; .catch( err => {&nbsp; &nbsp; &nbsp; &nbsp; console.error( err.stack );} );&nbsp;var a = document.getElementById("editor"); //取得纯文本alert(a.innerHTML);alert(a.textContent);

Answer 2

有木有人咧！！！