vue中使用tinymce富文本

安装

方式一:

npm install @tinymce/tinymce-vue -S
npm install tinymce -S

方式二:

将下面的配置粘到package.json文件dependencies中执行npm install

"@tinymce/tinymce-vue": "^2.0.0",
"tinymce": "^5.0.3"

下载中文包

tinymce官网

使用

在public目录下新建tinymce目录,将中文包和skins目录(node_modules->tinymce->skins)放到该目录

简单封装成了组件

<template>
  <div>
    <editor id="TinymceEditor" 
    v-model="editorValue" 
    :init="init" 
    :disabled="disabled"
    :key="editorKey">
    </editor>
  </div>
</template>
<script>
// 富文本
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'  // 主题
import 'tinymce/icons/default/icons.js'  // 图标
// 富文本插件
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件
export default {
  name:'TinymceEditor',
  props:{
    value: {
      type: String,
      default: ''
    },
    // 是否禁止编辑
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'lists image table wordcount'
    },
    toolbar: {
      type: [String, Array],
      default: 'undo redo |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image table | removeformat'
    }
  },
  components: {
    Editor
  }, 
  data(){
    return {
      editorKey: 1,
      editorValue: this.value,
      init: {}
    }
  },
  created() {
    this.init = {
      language_url: `${window.global_url.BASE_URL}/tinymce/langs/zh_CN.js`, //语言包的路径
      language: 'zh_CN', //语言
      skin_url: `${window.global_url.BASE_URL}/tinymce/skins/ui/oxide`, //skin路径
      height: document.body.offsetHeight - 350, //编辑器高度
      menubar: false, //顶部菜单栏显示
      browser_spellcheck: true, // 拼写检查
      branding: false, // 去水印
      statusbar: true, // 隐藏编辑器底部的状态栏
      paste_data_images: true, // 允许粘贴图像
      plugins: this.plugins,
      toolbar: this.toolbar,
      images_upload_handler: (blobInfo, success, failure) => {
        let base64 = "data:image/png;base64," + blobInfo.base64();
    　　//编辑器的上传图片内容被处理为<img src="success方法里面的参数" />
        success(base64);
      }
    }
  },
  activated () {
    this.editorKey++
  },
  watch: {
    value(newVal) {
      this.editorValue = newVal
    },
    editorValue(newVal) {
      this.$emit('input', newVal)
    }
  }
}
</script>
<style lang="scss">
// 处理富文本下拉框在dialog中被挡住的问题
.tox-tinymce-aux{
  z-index: 3000 !important;
}
</style>

使用

// html
<tinymce-editor 
  v-model="data" 
  :disabled="disabled"
  @input="editorValueChange">
</tinymce-editor>
// js
 methods: {
    // 监听编辑器数据
    editorValueChange(val) {
      this.data = val
    }
 }