Use ckEditor events in vue-ckeditor

[oskarbet]

In js :

`$(document).ready(function() {  
    CKEDITOR.replace('myckeditor'); 
    CKEDITOR.on('dialogDefinition', function(ev) {  
            var dialogName = ev.data.name; 
            if (dialogName == 'image') {
               // custom uploader    
            }
    });  
 }); `

How I can add this event handler to VueCkeditor? In Vue component I have next:

<template>
    <vue-ckeditor v-model="page.body.ru" :config="ckEditorOptions" />
</template>

import VueCkeditor from 'vue-ckeditor2';
    export default {
        components: {
            VueCkeditor
        },
    data() {
            return {
                ckEditorOptions: {
                    toolbar: [
                        ['Bold', 'Image']
                    ],

                    extraPlugins: ['filebrowser', 'image2'],

                    filebrowserImageBrowseUrl: 'javascript:void(0)',
                },

                page: {
                   body: {
                        ru: '',
                        uk: ''
                   },
                },              
            }
        },

And I want to add custom file uploader when dialogName = 'image'

[dangvanthanh]

Hi @oskarbet

From v2.1.0 I added dialogDefinition events

<template>
  <div>
    <vue-ckeditor 
      v-model="page.body.ru" 
      :config="ckEditorOptions" 
      @dialogDefinition="onDialogDefinition($event)" />
  </div>
</template>

<script>
import VueCkeditor from 'vue-ckeditor2';

export default {
  components: { VueCkeditor },
  data() {
    return {
      ckEditorOptions: {
        toolbar: [
          ['Bold', 'Image']
        ],
        extraPlugins: ['filebrowser', 'image2'],
        filebrowserImageBrowseUrl: 'javascript:void(0)'
      },
      page: {
        body: {
          ru: '',
          uk: ''
        }
      }
    };
  },
  methods: {
    onDialogDefinition(evt) {
      if (evt.data && evt.data.name) {
        var dialogName = evt.data.name;

        if (dialogName === 'image') {
          // Custom loader
        }
      }
    }
  }
};
</script>

Besides you can use others Ckeditor events such as blur, focus, contentDom, fileUploadRequest, fileUploadResponse. You can see events support in vue-ckeditor2

[oskarbet]

Don't work. DialogDefinition event didn't fired when I have open dialog window.
For example, if I use @blur="onDialogDefinition($event)" /> all work great. Then console.log(evt) return next: {name: "blur", sender: a, editor: a, data: undefined, listenerData: undefined, …}

[oskarbet]

Can you send example where event dialogDefinition was fired?

[dangvanthanh]

Hi @oskarbet

This is my fault. I registered wrong for dialogDefinition. Please upgrade to v2.1.1 to fix it. You can see example when open devtools and see console log when open dialog in demo with classic. But current it show the first of call dialog. From second open dialog it doesn't show.

It reference from documents of Ckeditor about dialogDefinition

[oskarbet]

Great! Thank you!