tinymce vue富文本编辑器

简介

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

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

tinymceDemo.png

安装

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

cnpm install @tinymce/tinymce-vue@3.2.2 -D

cnpm install tinymce@4.5.10 -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
},

template 模板内容

 <MyTincmce
    :disabled="checkDisabled"
    selector="tincmce1"
    :content="content"
    @content="handleContent"
    @uploading="handleUploading"
></MyTincmce>