Compatibility with Vue.js 2.0

[ninmesara]

Is vue-html-editor compatible with Vue.js 2.0? I'm using Vue.js 2.0 and I'm getting the following error:

[Vue warn]: Failed to mount component: template or render function not defined. (found in component )

[ninmesara]

After fixing some issues with my setup, this turned out to be something else.
On the other hand, this extension is really incompatible with vuejs 2.0:

• it doesn't compile the template, thus dependening on vuejs's runtime (which is undesirable), but porbably easy to fix.
• it modifies the props passed as arguments (which sets a big warning and might break things).

[cgarnier]

You need to migrate some stuff too. Like rename ready to mounted.

[vitobotta]

Hi @ninmesara , did you manage to get this to work with 2.0?

[ninmesara]

I ended up forking it and making a private version with more customization options. My version uses single file components (in order to be compatible with the new version of vuejs's default runtime) and uses the v-model directive, which is the standard way of handling input in vuejs 2.0. I'll submit a pull request when I have the time.

[rlambertsen]

@ninmesara Could you maybe share the forked version with us? Love to see it

[Chalkin]

Yep, please share the repo! I would need it as well

[Paolocargnin]

Yeah @ninmesara Hi want that too!

[JapSeyz]

@ninmesara Any updates on this?

[rlambertsen]

Nope lol

[fritx]

+1... Here is some helpful references:

• Vue2 migration commits in vue-threejs: https://github.com/fritx/vue-threejs/commits/vue2
• Migration from Vue 1.x http://rc.vuejs.org/guide/migration.html
• 2.0 Changes 2.0 Changes vuejs/vue#2873

[tooppoo]

I tried to fix this issues, and created a pull request #16.
(not fixed test codes yet.)

[MatheusGodinho]

Some expectations with @tooppoo PR will be accepted?

[todayqq]

@ninmesara Can you share it?

[renatoneri]

If someone wants, works in v2:

<script>
export default {
    data() {
        return {
            isChanging: false,
            control: null,
            text: ''
        }
    },
    replace: true,
    inherit: false,
    template: '<textarea v-model="text" class="form-control" :name="name"></textarea>',
    props: {
        value: {
            required: false
        },
        language: {
            type: String,
            required: false,
            default: 'en-US'
        },
        height: {
            type: Number,
            required: false,
            default: 160
        },
        minHeight: {
            type: Number,
            required: false,
            default: 160
        },
        maxHeight: {
            type: Number,
            required: false,
            default: 800
        },
        name: {
            type: String,
            required: false,
            default: ''
        },
        toolbar: {
            type: Array,
            required: false,
            default() {
                return [
                    ['font', ['bold', 'italic', 'underline', 'clear']],
                    ['fontsize', ['fontsize']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['color', ['color']],
                    ['insert', ['link', 'picture', 'hr']]
                ];
            }
        }
    },
    watch: {
        text(val) {
            this.$emit('input', val)
        },
        value(newVal) {
            this.text = newVal;
            if (this.minHeight > this.height) {
                this.minHeight = this.height;
            }
            if (this.maxHeight < this.height) {
                this.maxHeight = this.height;
            }

            var that = this;

            this.control =  $(this.$el);
            this.control.summernote({
                lang: this.language,
                height: this.height,
                minHeight: this.minHeight,
                maxHeight: this.maxHeight,
                toolbar: this.toolbar,
                callbacks: {
                    onInit: function() {
                        that.control.summernote('code', that.text);
                    }
                }
            }).on('summernote.change', function() {
                if (!that.isChanging) {
                    that.isChanging = true;
                    var code = that.control.summernote('code');
                    that.text = (code === null || code.length === 0 ? null : code);
                    that.$nextTick(function() {
                        that.isChanging = false;
                    });
                }
            });
        }
    }
};
</script>

Html:

<summernote v-model="form.texto"></summernote>

[todayqq]

@ninmesara I received your email, thank you for your sharing, can become the friend with you?