tinymce vue富文本编辑器

简介

最近在项目中使用一款非常实用,功能齐全的富文本编辑器----Tinymce Editor

文档参考-- 英文文档中文文档效果如图以下

tinymceDemo.png

安装

目前只安装tinymce 4.x 环境最新版网上文献太少了 4.x 版本我认为足够用了

cnpm install @tinymce/[email protected] -D

cnpm install [email protected] -D

接下来在 static 文件目录下 创建tinymce文件夹

注意 vue-cli 2.x 版本在static 目录里面以上更高的版本放在public

tinymce_src.png

下载tinymce完成后在node_modules中找到tinymce目录将目录中skins和plugins文件夹复制至我们新建的tinymce文件夹中,使用编辑器的主题样式及扩展插件,后续有需要使用到拓展插件和主题都可以下引入,文档中有提供更多实用的的插件可供参考地址

接着下载中文汉化包链接官方提供许多中汉化包,中文文档下载地址

也就是上面图中 zh_CN.js

页面组件的使用-创建一个组件

封装了 tinymce 进行使用

安装完成之后引入文件

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/link'
import 'tinymce/plugins/image'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/media'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/table'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/imagetools'
import 'tinymce/plugins/fullscreen'

props 组件接收参数

props: {
    // 选择器
    selector: {
      default: '#tincmce',
      required: true
    },
    // 编辑放的内容
    content: {
      default: ''
    },
    // 配置项
    setConfig: {
      default: () => {
        return {}
      },
      type: Object
    },
    // 禁止使用
    disabled: {
      default: false,
      type: Boolean
    },
    // 上传文件配置
    uploadConfig: {
      default: () => {
        return {
          type: ['jpg', 'jpeg', 'png', 'gif', 'webp'],
          limitsize: 10 * 10 * 10 * 1024,
          data: {
            uploadSource: 'CRM'
          },
          url: 'xxxxxx'
        }
      },
      type: Object
    },
    // 动态加载文件
    dynamicCofig: {
      default: () => {
        return []
      },
      type: Array
    }
  }

data 返回值

 data () {
    return {
      init: {
        language_url: '/static/tinymce/zh_CN.js',
        selector: '#' + this.selector,  // vue-cli 2.x 使用这个
        // language_url: '/tinymce/zh_CN.js',   // vue-cli 3.x 创建的 typescript 项目，将 url 中的 static 去掉，即 skin_url: '/tinymce/skins/lightgray'
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/lightgray',   // vue-cli 2.x 使用这个
        // skin_url: '/tinymce/skins/lightgray',  // vue-cli 3.x 创建的 typescript 项目，将 url 中的 static 去掉，即 skin_url: '/tinymce/skins/lightgray'
        height: 300,
        plugins: 'advlist autolink link image lists charmap table preview', // 插件
        toolbar1: 'undo redo | formatselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify ',
        toolbar2: 'bullist numlist outdent indent lists image | preview',
        toolbar3: 'fontselect | fontsizeselect',
        toolbar_location: '/',
        placeholder: '在这里输入内容~', // 这个版本似乎不支持
        // 如果配置了这个，编辑器会自动抹掉节点的属性(如果要保留请设置为false)
        paste_as_text: true,
        plugin_preview_height: 670,
        plugin_preview_width: 375,
        branding: false, // 隐藏右下角技术支持
        // 一个汉字算一个字符，为了统计相对准确
        // eslint-disable-next-line no-control-regex
        wordcount_countregex: /([\w\u2019\x27\-\u00C0-\u1FFF]+)|([^\x00-\xff])/g,
        // 上传文件配置
        images_upload_handler: (blobInfo, success, failure) => {
          const files = blobInfo.blob()
          let config = {
            type: ['jpg', 'jpeg', 'png', 'gif', 'webp'],
            limitsize: 10 * 10 * 10 * 1024,
            data: {
              uploadSource: 'CRM'
            },
            url: '/upload/v2/batchFileUploadPublic',
            ...this.uploadConfig
          }
          // 初始化格式
          let { type, limitsize, data, url } = config

          // 限制格式
          const myType = files.name.split('.')[1]
          if (!type.includes(myType)) {
            failure('仅能上传' + type.toString())
          }
          const size = blobInfo.blob().size
          // 限制大小
          if (size >= limitsize) {
            failure('大下限制为' + limitsize)
          }
          let formdata = new FormData()
          formdata.append('file', files)
          for (let i in data) {
            formdata.append(i, data)
          }
          this.$axios({
            url: `xxxxxxxxx`,
            method: 'post',
            data: formdata
          }).then(res => {
            this.$emit('uploading', success, failure, res)
          }).catch(error => {
            failure(error)
          })
        },       
      },
      tinymceHtml: ''
    }
  },

method 方法

// 动态引入import
dynamicImport () {
    // 默认配置
    let tinyPluginsConfig = []
    tinyPluginsConfig = [...tinyPluginsConfig, ...this.dynamicCofig]
    tinyPluginsConfig.forEach(item => {
        return item
    })
}

挂载生命周期完成 mounted

// 生命周期 - 挂载完成
mounted () {
    // 动态导入
    this.dynamicImport()
    // 在 mounted 中也需要初始化一次
    tinymce.init({})
}

页面监听

  // 数据监听
  watch: {
    // 父组件使用
    tinymceHtml (val) {
      this.$emit('content', val)
    },
    // 初始化内容
    content: {
      handler: function (val) {
        this.tinymceHtml = val
      },
      immediate: true
    },
    // 禁用editor
    disabled (val) {
      if (val) {
        tinymce.init({
          readonly: 1
        })
        tinymce.activeEditor.setMode('readonly')
      }
    }
  },

父组件使用

引入组件

import MyTincmce from '@/components/MyTincmce'

data 返回对象

data () {
    return {
       content:'',
       checkDisabled: false 
    }
}

method 的方法

// 图片上传的方法
handleUploading (success, failure, res) {
    const { code, result, msg } = res.data
    if (code === '0') {
        success(result[0].filePath)
    } else {
        failure(msg)
    }
},
handleContent (val) {
    this.ruleForm.content = val
},