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?

[anselmobattisti]

@renatoneri your code works, thanks! but my the editor only appear after some key be pressed inside the textarea. Some idea why this is happening?

[renatoneri]

Humm...
In my case, my v-model have always a inicial value that trigger the watch and load summernote.
Try send null or a empty value through v-model on load.

I'll try to change that after.

If that don't work, verify if you loaded summernote.js before my script.

Sorry for my bad english.

[malisit]

You can take a look at my solution. Works perfectly with vue 2. link
Thanks.

[coxlr]

@anselmobattisti where you able to get the version from @renatoneri to work fully? I am having the same issue as you, in that the editor only renders once a key has been pressed in the textarea.

[michaeljcoyne]

I have rewritten to work on init: seems to work fine.

`<script>
require('summernote');
export default {
data() {
return {
isChanging: false,
control: null,
text: '',
summerData: '',
}
},
replace: true,
inherit: false,
template: '<textarea :id="id" v-model="text" class="form-control" :name="name"></textarea>',
props: {
id: {
required: true,
type: String,
},
value: {
required: false,
type: String,
},
data: {
type: String,
required: true
},
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;
}
},

methods: {
    initSummer(id) {

        if (this.minHeight > this.height) {
            this.minHeight = this.height;
        }
        if (this.maxHeight < this.height) {
            this.maxHeight = this.height;
        }

        this.control = $('#' + id);
        this.control.summernote({
            lang: this.language,
            height: this.height,
            minHeight: this.minHeight,
            maxHeight: this.maxHeight,
            toolbar: this.toolbar,
            callbacks: {
                onInit: () => {
                    this.control.summernote('code', this.text);
                }
            }
        }).on('summernote.change', () => {
            if (!this.isChanging) {
                this.isChanging = true;
                let code = this.control.summernote('code');
                this.text = (code === null || code.length === 0 ? null : code);
                this.$nextTick( ()=> {
                    this.isChanging = false;
                });
            }
        });
    }
},
mounted() {
    this.text = this.data;
    this.initSummer(this.id);
}

};
</script>
`

<summernote :id="'title'" :data="form.title" v-model="form.title"></summernote>