如何在 NuxtJs 中建模绑定 Tinymce

Question

我已经使用 npm i tinymce 在我的 nuxt js 项目上安装了 Tinymce，它安装了 v6 然后我在 nuxt.config.js 文件

中执行了以下操作

plugins: [
      '~/plugins/axios',
      {
        src: "~/plugins/tinymce.js",
        mode: "client",
        ssr: false
      }
    ]

我在插件文件夹中创建了一个 tinymce.js 文件，所有这些都在里面

import tinymce from "tinymce"
import "tinymce/themes/silver"
import "tinymce/plugins/table"
import "tinymce/plugins/link"
import "tinymce/plugins/image"
import "tinymce/plugins/lists"
import "tinymce/plugins/code"
import "tinymce/plugins/fullscreen"
import "tinymce/icons/default"
import 'tinymce/models/dom'
import "tinymce/skins/ui/oxide/skin.min.css"
import "tinymce/skins/ui/oxide/content.min.css"
import "tinymce/skins/content/default/content.css"
import "tinymce/skins/ui/oxide/skin.min.css"
import "tinymce/skins/ui/oxide/content.min.css"
import "tinymce/skins/content/default/content.css"
import "tinymce/skins/ui/oxide/skin.min.css"
import "tinymce/skins/ui/oxide/content.min.css"
import "tinymce/skins/content/default/content.css"
import "tinymce/skins/ui/oxide/skin.min.css"
import "tinymce/skins/ui/oxide/content.min.css"

export default tinymce

然后我在我的 .vue 文件中做了这个

<textarea
  v-model="body"
  id="main"
  type="text"
  class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
  rows="4"
>
</textarea>

脚本

 data:() =>({
    errors: [],
    title: '',
    body: '',
    excerpt: ''
  }),
mounted(){
    tinymce.init({
      selector: 'textarea#main',
      height: 500,
      skin: false,
      content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
      plugins: 'image code',
      images_file_types: 'jpg,png,jpeg'
    })
  }

但是数据没有发送到数据库，所以我不断收到正文验证错误。

我该如何解决这个问题
每当我从 tinymce 所在的页面导航到浏览器上的另一个页面时，我需要刷新浏览器以在返回到它所在的页面时看到 tinymce 编辑器。（我该如何解决这个问题）？

Answer 1

正在解决完全相同的问题，即使 v-model 显然也是如此。

不应使用查询选择器，但建议 refs！

如何在 NuxtJs 中建模绑定 Tinymce

How to Model Bind Tinymce in NuxtJs

javascript

vue.js

nuxt.js