Question

我正在尝试让Vuejs和TinyMCE一起工作。我使用@ tinymce / tinymce-vue软件包，它是TinyMCE的vue集成。我遵循了所有说明，一切似乎都可以正常工作，我的意思是我可以正确书写，插入图片...除了v-model部分之外的所有内容。

这是简化的模板：

<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模型似乎不受<editor></editor>的约束，因为在chrome devtool中，当我编写它时，什么也没有发生。表单中的其他v模型都可以正常工作。

有什么想法吗？

感谢您的同伴：）

Answer 1

为什么要在init()代码中使用TinyMCE mounted()调用？ 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;
            }
        },

而且您不需要在mount（）中初始化

TinyMCE for Vue有很多错误，有时我们不得不在源文件：P

中找到解决方案

V模型和TinyMCE不能一起使用

3 个答案: