Compatibility with vueJs 2.0

[DominiqueFERET]

Hello,

Thanks for this job. Are you plan to update it to be compatible with Vuejs 2.0 ?

Best regards,

[dangvanthanh]

Hi @DominiqueFERET

Thank you suggestion. I will update to support Vue 2.0.

I move to project and will complete soon.

[edimoldovan]

@dangvanthanh I noticed there is next branch with some work on Vue 2.0 support. Can you share how usable that is already? I’d also be happy to help if needed.

[edimoldovan]

@dangvanthanh I tried the implementation in the next branch. Worked pretty well, except for one thing. Even though the props passed to the Ckeditor component are being changed as needed, I am unable to set the value on the CKEDITOR instance. Have you tried doing that?

It looks like there is an issue with the editor (and for now my data changes) being in the mounted hook. I’ll be doing further testing a bit later and post results here again.

[edimoldovan]

I was able to get it to work with this Ckeditor component

<template>
    <div class="ckeditor">
        <textarea ref="editor" id="editor" placeholder="Post body"></textarea>
    </div>
</template>

<script>

    export default {

      props: [
        'value',
        'options'
      ],

        mounted () {
            let self = this

            let editor = CKEDITOR.replace(this.$refs.editor.id, {
          toolbar: [
            ['Format'], ['Bold', 'Italic'], ['Undo', 'Redo']
          ]
        })
        CKEDITOR.instances.editor.setData(this.value)
        CKEDITOR.instances.editor.updateElement()
        },

        beforeUpdate () {
            CKEDITOR.instances.editor.setData(this.value)
            CKEDITOR.instances.editor.updateElement()
        }
    }

</script>

<style lang="scss">

    .ckeditor {
        float: left;
        width: 100%;
        clear: both;
    }

</style>

[dangvanthanh]

@edimoldovan Thanks you very much. Now I review change custom event of input from Vue 2.0. I will update your code with next branch and change code to support multiple ckedior, too. With the next branch code doesn't support multiple.

I try your code but when call ckeditor component I can't get data from v-model:

<template>
  <div class="app">
    <ckeditor v-model="content"></ckeditor>
  </div>
</template>

<script>
import Ckeditor from './ckeditor.vue'

export default {
  data () {
    return {
      content: ''
    }
  },
  components: { Ckeditor }
}
</script>

I will fix and update soon.

[edimoldovan]

@dangvanthanh This is how I have it integrated right now, using props

<ckeditor class="body" :value="post.body">{{ post.body }}</ckeditor>

Most likely not an ideal integration so I will have to work on improving that also.

[dangvanthanh]

@DominiqueFERET and @edimoldovan. Now we can use ckedior with Vue.js 2x. Thank you very much.

@edimoldovan I hope you can help me improve some features of ckeditor with Vue.js 2x.

[edimoldovan]

@dangvanthanh I’ll be implementing a few things soon. So sure, happy to do it.