V-model and TinyMCE doesn't work together

Question

I'm trying to get Vuejs and TinyMCE to work together. I use @tinymce/tinymce-vue package which is the vue integration for TinyMCE. I had followed all the instructions and everything seems to work, I mean I can write properly, insert image... everything except the v-model part.

Here is the simplified template :

<form action="/http://localhost:4000/articles" method="POST">

   <input id="data_title" class="input-title" v-model="title" type="text"/>

   <editor id="editor" v-model="content"></editor>

   <textarea id="data_description" v-model="description" class="input-resume"></textarea>
</form>

Script part :

 export default {
    data() {
        return {
            title: "",
            description: "",
            content:"",
        }
    },

    mounted() {
        tinymce.init({
            selector: '#editor',
            plugins: "image",
            toolbar: [
                'undo redo | styleselect | bold italic | link image',
                'alignleft aligncenter alignright'
            ]
        });
    }

I send my data to a Rest API using axios :

 axios.post('http://localhost:4000/articles', {
                title: this.title,
                description: this.description,
                content: this.content,
            })
                .then(function (response) {
                    console.log(response);
                })
                .catch(function (error) {
                    console.log(error);
                });
        },

Everything is ok, no errors. After posting the article, I have a title and a description, but no content. V-model doesn't seem to be bounded to the <editor></editor>, because in the chrome devtool nothing is happening when I'm writing in it. The others v-model in the form are perfectly working.

Any thoughts?

Thank you for your time fellows :)

Answer 1

Why are you using the TinyMCE init() call in your mounted() code? The TinyMCE wrapper does that for you and you can pass the init parameter to include the configuration you want.

https://github.com/tinymce/tinymce-vue#configuring-the-editor

I suspect your mounted() code is initializing TinyMCE and your Vue model data knows nothing of that - when the wrapper later tries to initialize the editor it fails because its already initialized which leads to the data binding not being in place.

Answer 2

I know this post is a bit old, but for those experiencing this issue, try wrapping your editor component tags in a div block like this:

<form action="/http://localhost:4000/articles" method="POST">

   <input id="data_title" class="input-title" v-model="title" type="text"/>

   <div>
       <editor id="editor" v-model="content"></editor>
   </div>

   <textarea id="data_description" v-model="description" class="input-resume"></textarea>
</form>

This worked for me and I hope it helps.

Answer 3

I think I found a solution. If you are using vue-tinymce-editor

From TinymceVue.vue (in \node_modules\vue-tinymce-editor\src\components\TinymceVue.vue) remove this code:

        value : function (newValue){
            if(!this.isTyping){
                if(this.editor !== null)
                    this.editor.setContent(newValue);
                else
                    this.content = newValue;
            }
        },

And you don't need to init in mounted()

TinyMCE for Vue is bugged so much sometimes we have to find solutions in sourcefiles :P

Answer 4

In my case, I came up with this solution :

tinymce.init({
    selector:'textarea.tinymce',
    setup: function(editor) {
        editor.on('change', function () {
            editor.save();
            editor.getElement().dispatchEvent(new Event('input'));
        });
    }
})