0

I have a custom type in V1 of Vue:

Vue.component('c_k_editor-fieldtype', {

    mixins: [Fieldtype],

    template: `
        <div>
            <label class="block" style="font-weight:500">CKEditor</label>
            <textarea class="form-control" id="foo" v-model="data"></textarea>
        </div>
    `,

    data: function() {
        return {
            //
        };
    },

    computed: {
        //
    },

    methods: {
        //
    },

    ready: function() {
        ClassicEditor
            .create( document.querySelector( '#foo' ) );
    }
});

It loads data properly but when I type in the field, the data property is not updated (see screenshot)Vue screenshot

Is there an event I can trap or something whenever the editor data is changed so I can update the Vue (V1) data?

emd
  • 434
  • 1
  • 7
  • 18
  • I think you need to update the props value from child to parent. Try to look here https://stackoverflow.com/questions/43701175/is-it-possible-to-change-props-value-from-method-in-vue-component – Robert Anthony S. Tribiana Aug 28 '19 at 04:56

1 Answers1

1

This works but I don't know if it's "right":

    ready: function() {

    ClassicEditor
        .create( document.querySelector( '#foo' ) )
        .then(editor => {
            editor.document.on( 'change', ( evt, data ) => {
                this.data = editor.getData();
            } );
        });
}
emd
  • 434
  • 1
  • 7
  • 18
  • 1
    Document#event:changesDone would be a better fit - it is fired a bit less often: https://docs.ckeditor.com/ckeditor5/latest/api/module_engine_model_document-Document.html#event:changesDone. Still, this event is fired at least once after every action performed by a user (like, for example, changing selection using arrow keys). – Szymon Cofalik Oct 25 '17 at 09:31