OnChange event not firing when using ck-editor in source mode

[wittsparks]

Hello @dangvanthanh - Thanks for creating this!!

I added a console.log in ckeditor.vue here:

this.instance.on('change', () => {
        console.log('ckeditor onchange');
        let html = this.instance.getData()
        if (html !== this.value) {
          this.$emit('changed', this.instance)
        }
      })

I see my log message whenever I make a change in ck-editor's 'normal' mode, but I don't see when in 'source' mode.

Update: looks like ck-editor itself doesn't fire change events in source mode:

Sounds like there are some valid reasons for that behavior, but it leaves me unable to detect the changed content if a user makes a change in ck-editor source mode. Anyone know of a workaround for this?

Thanks for any help!!

[wittsparks]

I'm wrapping my ckeditor component in a another vue component which is a modal dialog. I ended out getting around this issue by having the ckeditor component emit an event containing the ckeditor instance when it's mounted.

Then when the parent component responds to the mounted event emitted by the ckeditor vue component, it saves a reference to the underlying ckeditor instance passed with the event. When the modal is closed, I can call getData on the ckeditor instance and update the v-model.

This has the added benefit of not calling getData() on the ckeditor with every keystroke.

[dangvanthanh]

Hi @wittsparks

Can you post your code in here. I can see problem.

[wittsparks]

Hi @dangvanthanh ,

Here's the component where I'm using the ckeditor:

<template>
  <div class="text-editor">
    <div :id="id" class="modal modal-fixed-footer">
      <ckeditor v-model="content" @mounted="onMounted($event)"></ckeditor>
      <div class="modal-footer">
        <button class="btn waves-effect waves-light" type="button" v-on:click="save()">Done
          <i class="material-icons right">send</i>
        </button>
        <button class="btn waves-effect waves-light modal-action modal-close" type="button">Cancel </button>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        props: ['id', 'content'],
        mounted() {
          $('.modal').modal({
            dismissible:false,
          });
        },

        data() {
          return {
            newContent: this.content,
            editorInstance: null
          }
        },

        methods: {
          onMounted ( editor ) {
            console.log("ckeditor mounted");
            this.editorInstance = editor;
          },
          save( ) {
            this.newContent = this.editorInstance.getData();
            this.$emit('changed', this.newContent);
            $('#' + this.id).modal('close');
          }
        },
    }
</script>

In ckeditor.vue, I added a console.log in this.instance.on('change') as shown in my original post. When I run the code, I see my log message when making changes in regular mode, but not in source mode.

From my research, it sounds like the underlying ckeditor instance itself does not emit on-changed events in source mode. It does emit an event when you switch back to regular mode.

As I said above, I solved the problem for my purposes by calling getData() on the ckeditor instance after the user closes the modal containing the editor, and that's working for me. So as far as I'm concerned this can be closed.

Thanks,
Witt

[dangvanthanh]

Hi @wittsparks. Thank you very much. I will close thread. You can open new issues when you working with vue-ckeditor.

[MugenFTW]

In case anyone comes across this I have a solution here:

this.instance.on('mode', () => { if (this.instance.mode === 'source') { var editable = this.instance.editable(); editable.attachListener(editable, 'input', () => { var value = editable.getData(); this.$emit('input', value); this.$emit('update:value', value); }); } });

By adding this extra event listener to the mounted method of the main ckeditor vue component it will update when inputs change when the source view is selected.

AJ

[dangvanthanh]

Thank you very much @MugenFTW

I will be adding the extra event listeners to this case.

[tbwork]

Why do not just add a change event... Above solutions are so tedious.

[MugenFTW]

@tbwork It has to be done this way because the change event isn't fired by ck-editor when the editor is changed to source mode.

https://dev.ckeditor.com/ticket/12031