How to get values in CKEditor5 Rich text Editor
html introduces the js code for CKEditor5, and then binds to the textarea element with the following code.
<textarea name="content" id="editor">
Here goes the initial content of the editor.
</textarea>
ClassicEditor
.create( document.querySelector( "-sharpeditor" ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
then js cannot get the text node of textarea. Look at the API problem of CKEditor and find that it can be obtained through editor.getData (). But it can only be obtained when it is just loaded. How can you get the text box content by clicking a button?
is there anyone!
ClassicEditor
.create( document.querySelector( '-sharpeditor' ), {
//
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);
add the click event of the button to the first callback function
.then (editor= > {
let btn = document.querySelector ('- sharpbtn')
btn.onclick = () = > {
let content = editor.getData ()
}
})
)
