一、引入tinymce-vue
官网 https://www.tiny.cloud/docs/integrations/vue/#tinymcevuejsintegrationquickstartguide

• 注意
  vue2.x 使用的是tinymce-vue4版本以下的

npm install --save "@tinymce/tinymce-vue@^3"

vue4.x 使用的是tinymce-vue4版本以上的

npm install --save "@tinymce/tinymce-vue"

二、通过包管理方式下载 tinymce

npm install tinymce -S

三、配置中文语言

到官网下载中文语言包 zh_CN.js

1661307100185.png

四、注意事项

• 1. 需要将 node_modules下的tinymce/skins文件夹复制到项目的public/tinymce文件夹下
• 2、需要将 node_modules下的tinymce/icons文件夹复制到项目的public/tinymce文件夹下
• 3、将下载后的汉化语言包放到public/tinymce

五、引入tinymce-vue，tinymce

<Editor:init="init"></Editor>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'

// 引入你需要的插件
// import 'tinymce/plugins/paste'
// import 'tinymce/plugins/link'
export default {
  components: { Editor },
  data () {
    return {
    
      init: {
        base_url: '/tinymce',
        language_url: '/tinymce/langs/zh-Hans.js', // 语言包的路径
        language: 'zh-Hans', // 语言
        skin_url: '/tinymce/skins/ui/oxide', // skin路径
        height: 400, // 编辑器高度
        branding: false // 是否禁用“Powered by TinyMCE”
      }
    }
  },