Catch CKeditor events

[focussing]

How can I catch CKeditor events? Like described [here] (http://docs.ckeditor.com/#!/api/CKEDITOR.editor) For example when I use the editor inline and close the editor, I want to catch the blur event.

[focussing]

Dear Dang,

Found it by looking at the source code. See you $emit and I bind an event handler to that. Maybe it would be a good idea to update the wiki with that info.

<ckeditor :value="post.nl" types="inline" @change="onChange(index,$event)"></ckeditor>

Also added the 'blur' event. So normally I would use the change event to indicate the user has changed something; the blur event for saving the changes into a database or so.

The only thing I can't get to work is this as described in the vuejs docs. The name of the CKeditor instance is undefined

methods: {
    onChange: function (event, index) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }

[dangvanthanh]

Hi @focussing

I agree, I think there should more events. I want to custom component to easy add more events, too. I will research it and add soon.

[akinolu52]

hello @dangvanthanh

i tried this:

<ckeditor @blur="updateQuestion(questionIndex, $event)" :config="config"></ckeditor>

updateQuestion(i, e){ console.log(i) this.examQuestions[i] = e.target.value; console.log(this.examQuestions) },

but it is not showing in the console.

thanks in adv

[dangvanthanh]

Hi @akinolu52

I will update version support blur and focus events in Ckeditor. Can you reference to using blur and focus events

[dangvanthanh]

Hi @focussing

Now you can update to using custom blur or focus events.

[akinolu52]

thanks it working now. bt the only issue i have is that e.target.value; is not working when i console.log(e) i cant get what i typed into the textarea any help?

[akinolu52]

hello @dangvanthanh

thanks it working now. bt the only issue i have is that e.target.value; is not working when i console.log(e) i cant get what i typed into the textarea any help?

[dangvanthanh]

Hi @akinolu52

I use CKEDITOR.instances (this instance Ckeditor) register blur and focus events. With your code:

<ckeditor @blur="updateQuestion(questionIndex, $event)" :config="config"></ckeditor>

You can show value of $event with

updateQuestion(i, e) {
   console.log(e) // This instance of Ckeditor
   console.log(e.getData()) // Get value of Ckeditor
}

[akinolu52]

thanks @dangvanthanh. works like magic

[vaishnavi-prabakar]

Hi,

We are trying to update something on our Vue component based on the mode change in CKEDITOR.

There is an event 'mode' emitted by CKEDITOR for the same. Can we please have a listener for that event in vue-ckeditor?