V-model和TinyMCE不能一起工作

Question

我在试着让Vuejs和TinyMCE合作。我使用@ TinyMCE /tinymce-vue包，它是TinyMCE的vue集成。我已经遵循了所有的说明，一切似乎都很正常，我的意思是我可以正确地书写，插入图像…除了v型那部分。

以下是简化后的模板：

<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>

脚本部分：

 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'
            ]
        });
    }

我使用axios将数据发送到Rest API：

 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);
                });
        },

一切正常，没有错误。在发布了这篇文章后，我有了标题和描述，但没有内容。V-model似乎并不局限于<editor></editor>，因为在chrome开发工具中，当我在它里面写东西的时候什么也没有发生。表单中的其他v-model运行得很好。

有什么想法吗？

感谢各位抽出时间来:)

Answer 1

为什么要在mounted()代码中使用TinyMCE init()调用？TinyMCE包装器会为您完成这项工作，您可以传递init参数来包含您想要的配置。

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

我怀疑您的mounted()代码正在初始化TinyMCE，而您的Vue模型数据对此一无所知-当包装器稍后尝试初始化编辑器时，它会失败，因为编辑器已经初始化，这导致数据绑定不到位。

Answer 2

我知道这篇文章有点老了，但是对于那些遇到这个问题的人，试着把你的编辑器组件标签包装在一个div块中，如下所示：

<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>

这对我很有效，我希望它能有所帮助。

Answer 3

我想我找到了一个解决方案。如果您正在使用vue-tinymce-editor

从TinymceVue.vue (在\node_modules\vue-tinymce-editor\src\components\TinymceVue.vue)中删除以下代码：

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

而且您不需要在mounted()中初始化。

Vue的TinyMCE有很多错误，有时我们必须在源文件中找到解决方案:P