tinymce-vue是一款强大的富文本编辑器

UI精美，功能模块多，可按需加载配置

github地址：tinymce-vue

demo查看

一、安装

"@tinymce/tinymce-vue": "^3.0.1",
"tinymce": "^5.0.14",

下载的时候可以先在static下面建个目录tinymce，里面可以防止一些插件，语言包什么的

二、下载中文语言包

inymce提供了很多的语言包，这里我们下载中文语言包，下载完成后将其解压到static\tinymce目录下面，如上图

三、初始化

引入基本文件

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/modern/theme'

components中注册tinymce-vue才能使用

<Editor v-model="editorHTML" :init="editorInit"></Editor>

 配置表(部分常用)：

editorInit: {

        /**
         * 配置参数
         * @param {string/object} language_url 语言包文件地址
         * @param {string} language 设置语言包
         * @param {number} height 初始化高度
         * @param {string} plugins 使用插件名称
         * @param {string} toolbar 工具栏配置
         * @param {boolean} branding 是否显示右下角品牌名称
         * @param {boolean} resize 是否允许自由拖拽
         * @param {string} fontsize_formats 字号设置
         * @param {function} images_upload_handler 自定义图片上传回调
         */
        language_url: EditorCN,
        language: 'zh_CN',
        height: 390,
        plugins: 'link lists image code table wordcount advlist code lineheight fullscreen',
        toolbar: 'bold | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | lineheight | bullist numlist | outdent indent | image | fullscreen',
        branding: false,
        resize: false,
        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 26px 28px 30px',
        images_upload_handler (blobInfo, succFun, failFun) {
          console.log('上传图片')
          let formdata = new FormData()
          console.log('获取到的图片信息：' + blobInfo)
          // 插入图片
          succFun('https://my.weblf.cn/website/static/img/3.5cba2ca.jpg')
        }
      }

扩展插件

默认的编辑器只有基本功能，如果还需要上传图片，插入表格之类的功能就需要添加插件
如添加上传图片和插入表格的插件

import 'tinymce/plugins/image'
import 'tinymce/plugins/table'

 引入后还需要再toolbar工具栏上添加相应的按钮

plugins: 'lists image media table textcolor wordcount contextmenu',
toolbar: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat',

完整代码：

<template>
  <div class='tinymce'>
    <Editor v-model="editorHTML" :init="editorInit"></Editor>
  </div>
</template>

<script>
// import axios from '@/mixins/axios'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import EditorCN from './../../../static/tinymce/zh_CN'

import 'tinymce/skins/ui/oxide/skin.min.css'
import 'tinymce/themes/silver/theme'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/fullscreen'

import './../../../static/tinymce/plugins/lineheight/lineheight'

let that = ''

export default {
  data () {
    return {
      switch: true,
      editorHTML: '',
      editorInit: {

        /**
         * 配置参数
         * @param {string/object} language_url 语言包文件地址
         * @param {string} language 设置语言包
         * @param {number} height 初始化高度
         * @param {string} plugins 使用插件名称
         * @param {string} toolbar 工具栏配置
         * @param {boolean} branding 是否显示右下角品牌名称
         * @param {boolean} resize 是否允许自由拖拽
         * @param {string} fontsize_formats 字号设置
         * @param {function} images_upload_handler 自定义图片上传回调
         */
        language_url: EditorCN,
        language: 'zh_CN',
        height: 390,
        plugins: 'link lists image code table wordcount advlist code lineheight fullscreen',
        toolbar: 'bold | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | lineheight | bullist numlist | outdent indent | image | fullscreen',
        branding: false,
        resize: false,
        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 26px 28px 30px',
        images_upload_handler (blobInfo, succFun, failFun) {
          console.log('上传图片')
          let formdata = new FormData()
          console.log('获取到的图片信息：' + blobInfo)
          // 插入图片
          succFun('https://my.weblf.cn/website/static/img/3.5cba2ca.jpg')
        }
      }
    }
  },
  // mixins: [axios],
  model: {
    prop: 'content',
    event: 'setContent'
  },
  props: {
    content: {
      type: String,
      default: ''
    },
    tinymceUploadImg: {
      type: Function,
      default: () => {}
    }
  },
  components: { Editor },
  watch: {
    'content' (value) {
      if (this.switch) {
        this.switch = false
        this.editorHTML = value
      }
    },
    'editorHTML' (value) {
      this.$emit('setContent', value)
    }
  },
  async mounted () {
    that = this
    tinymce.init({})
    this.editorHTML = this.content
  }
}
</script>

<style lang="scss">
@import "./tinymce.scss";
</style>