在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/