V-model 和 TinyMCE 不能一起工作

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-model 似乎不受<editor></editor> 的限制，因为在 chrome devtool 中，当我在其中编写时，什么都没有发生。表单中的其他 v-model 运行良好。

有什么想法吗？

感谢您的时间伙伴:)

Answer 1

我想我找到了解决办法。 如果你使用的是 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

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

您为什么在您的 mounted() 代码中使用 TinyMCE init() 调用？ TinyMCE 包装器会为您执行此操作，您可以传递 init 参数以包含您想要的配置。

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

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