Hello, I used Ckeditor5
and I need to use handleEvent
to update my editor, but it dosent work under .then
, I am not good at javascript, before showing my code, if I change my handleEvent
position it works for me
Hooks.Editor = {
mounted() {
var container = document.querySelector("#editor");
const view = this;
if (container != null) {
ClassicEditor
.create(container, {
toolbar: {
items: ckeditorItems,
shouldNotGroupWhenFull: true
....
} )
.then( editor => {
window.editor = editor;
this.handleEvent("update-editor-html", ({html}) => {
const viewFragment = editor.data.processor.toView( html );
const modelFragment = editor.data.toModel( viewFragment );
editor.model.insertContent( modelFragment );
});
editor.model.document.on('change:data', (eventInfo, batch ) => {
var data = { html: editor.getData()};
view.pushEvent("save-editor", data);
});
.....
Thanks
I am not good at js either, but can’t you call handle_event
in mounted
directly, with a named function? Then within the named function you can choose to do nothing, if window.editor
is null?
1 Like
Instead of doing this.handleEvent(...
do view.handleEvent(...
I believe this should work. If I am not mistaken, in your then
, this
is not the hook anymore
1 Like
I had to create an instance and use it outside the CKeditor block code like this:
var theEditor = null;
Hooks.Editor = {
mounted() {
var container = document.querySelector("#editor");
const view = this;
var serverHtml;
if (container != null) {
ClassicEditor
.create(container, {
toolbar: {
items: ckeditorItems,
shouldNotGroupWhenFull: true
},
language: 'en',
alignment: {
options: [
{ name: 'left', className: 'my-align-left' },
{ name: 'right', className: 'my-align-right' }
]
},
image: {
toolbar: ['linkImage', 'imageTextAlternative', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side',
]
},
table: {
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties', 'tableProperties']
},
licenseKey: '',
} )
.then( new_editor => {
window.editor = new_editor;
new_editor.setData(serverHtml);
theEditor = new_editor; // Save for later use.
editor.model.document.on('change:data', (eventInfo, batch ) => {
var data = { html: editor.getData()};
view.pushEvent("save-editor", data);
});
} )
.catch( error => {
console.error( 'Oops, something went wrong!' );
console.error( error );
} );
this.handleEvent("update-editor-html", ({html}) => {
serverHtml = html;
if (theEditor != null) {
theEditor.setData(html);
}
});
}
}
}
it didn’t work for me
1 Like