Is it possible to initialize ckeditor4 instances in each vue screen?

[kly99]

I am using ckeditor4 component in vue screens.

I want to set the namespaceloaded property differently for each screen.

but I tried it like the source code below, but the setting value of the screen called first is used.

I tried deleting instances in beforeDestroy, but namespaceloaded is not called when I return to the screen.

Is there a way to call namespaceloaded again? Or is there a way to set different settings for each screen?

example >

---

[ A.vue ] <ckeditor id="ckeditor4" v-model="editor" @namespaceloaded="onNamespaceLoaded" type="classic" :config="config" />

onNamespaceLoaded(CKEDITOR) { CKEDITOR.addCss('.cke_editable {font-size: 15px;'); },

---

[ B.vue ] <ckeditor id="ckeditor4" v-model="editor" @namespaceloaded="onNamespaceLoaded" type="classic" :config="config" />

onNamespaceLoaded(CKEDITOR) { CKEDITOR.addCss('.cke_editable {font-size: 20px;');

  CKEDITOR.on('dialogDefinition', function( ev ) {
    const diagName = ev.data.name;
    const diagDefn = ev.data.definition;

    if(diagName === 'table') {
      const infoTab = diagDefn.getContents('info');
      const width = infoTab.get('txtCellSpace');
      width['default'] = "3";
    }
  });
},

---

[github-actions[bot]]

It's been a while since we last heard from you. We are marking this issue as stale due to inactivity. Please provide the requested feedback or the issue will be closed after next 7 days.

[jacekbogdanski]

@kly99 the namespaceloaded event is only called for initial library load (so basically, once in the whole lifecycle of the application). If you want to do some operations on loaded editor instance, you can use ready event - https://ckeditor.com/docs/ckeditor4/latest/guide/dev_vue.html#ready