在vue中使用tinymce富文本編輯器

關於做一個有關富文本編輯器的工作

使用情況：在vue腳手架中使用

一、資源下載

npm install @tinymce/tinymce-vue -S

安裝之后在node_modlules中找到tinymce/skins目錄，然后將skins目錄拷貝到static目錄下。

如果是使用vue-cli 3.x構建的typescript項目，就放到public目錄下。

二、在組件中初始化tinymce

//子組件
<template>
  <div class='tinymce' v-drag>
    <editor id='tinymce'  v-model='value' :init='init'></editor>
  </div>
</template>

<script>
//核心的兩個模塊
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
//一些樣式模塊
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons'
import 'tinymce/plugins/link'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/image'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/media'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/print'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/help'
//如果在init配置中添加相對路徑不生效可以直接在組件中引入
import '../../static/tinymce/skins/ui/oxide/skin.min.css'
import '../../static/tinymce/skins/ui/oxide/content.inline.min.css'
//在網上找個中文的模塊
import '../../static/tinymce/zh_CN.js'
export default {
  
  name: 'tinymce',
  props: [
    'editorData'//從父組件傳遞過來的數據
  ],
  components: {
    Editor
  },
  data () {
    return {
      init: {//配置富文本編輯器
        height: 500,//高度
        plugins: 'link',//添加插件
        toolbar: ' bold italic | fontsizeselect | forecolor | link unlink | removeformat',//添加工具欄按鈕
        menubar: 'file edit',//添加菜單欄
        // language_url: '../../static/tinymce/zh_CN.js',//如果不生效直接導入
        language: 'zh_CN',//定義語言
        content_css: false,
        // skin_url: '../../static/tinymce/skins/ui/oxide'//如果不生效直接導入
      },
       value:this.editorData,//父組件通過ref拿到該組件的值
    }
  },

//在vue中初始化init
created(){
    tinymce.init({});
  },

父組件

<tinymce-editor v-if="announcement" :editorData="editorData" ></tinymce-editor>

更多配置請看官網http://tinymce.ax-z.cn/