How to load handleEvent under .then

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