ant design of vue 之富文本编辑组件（腾讯云）封装

本次使用wangeditor富文本编辑器，查看官网
wangeditor是一个萌新富文本编辑器，基于js和css，重点在于它轻量，如果你需要的功能不是很复杂，那么选它没错了，刚好能满足你！

安装

npm i wangeditor -S
npm i cos-js-sdk-v5 -S

uuid.js文件

在src的utils文件夹中新增uuid.js文件

/* eslint-disable */
export default (len, radix) => {
  var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');

  var uuid = [],
    i;
  radix = radix || chars.length;
  if (len) {
    // Compact form
    for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
  } else {
    // rfc4122, version 4 form
    var r;

    // rfc4122 requires these characters
    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
    uuid[14] = '4';
    // Fill in random data.  At i==19 set the high bits of clock sequence as
    // per rfc4122, sec. 4.1.5
    for (i = 0; i < 36; i++) {
      if (!uuid[i]) {
        r = 0 | Math.random() * 16;
        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
      }
    }
  }
  return uuid.join('');
}

system.config.js文件

在src的config文件夹中新增system.config.js文件

/**
 * 系统配置文件
 */
/* eslint-disable */
// 系统配置 ，在模块中使用方法： this.$CONFIG.xxxx 
const config = {
  //系统名称
  systemTitle:'安全生产标准化管理体系网',
  //系统描述
  systemDescription:'业界领先的信息聚合平台',
  //系统底部 copyright@公司名称
  footerComName:'信息科技有限公司',
  //腾讯云存储
  Bucket: 'test-1256342487',
  Region: 'ap-chengdu',
  //后台接口地址
  serverUrl:'http://123.206.76.136/news/api'
  
}
export default config

在main.js文件中进行全局属性配置

import config from '@/config/system.config'
// 引入全局自定义配置文件
Vue.CONFIG = Vue.prototype.$CONFIG = config

组件封装

<template>
  <div id="wangeditor">
    <div ref="editorElem" style="text-align:left"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
import { getCredential } from '@/api/upload'
import COS from 'cos-js-sdk-v5'
import uuid from '@/utils/uuid'
export default {
  name: 'Editor',
  data() {
    return {
      cos: null,
      editorContent: '',
      editor: null
    }
  },
  props: ['catchData', 'value'], //接收父组件的方法
  watch: {
    value(newVal){
         this.setHtml(newVal)
    }
  },
  created() {
    this.cos = new COS({
      getAuthorization: (options, callback) => {
        getCredential().then(res => {
          if (res.success) {
            const { result } = res
            callback({
              TmpSecretId: result.tmpSecretId,
              TmpSecretKey: result.tmpSecretKey,
              XCosSecurityToken: result.sessionToken,
              ExpiredTime: result.expiredTime
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    })
  },
  mounted() {
    const that = this
    this.editor = new E(this.$refs.editorElem)
    //创建富文本实例
    this.editor.customConfig.onchange = html => {
      // html  带P标签的文本
      // this.getText() 不带P标签的文本
      html = this.getHtml()
      this.editorContent = html
      this.$emit('change')
      this.$emit('input', html)
    }
    // 隐藏“网络图片”tab
    this.editor.customConfig.showLinkImg = false
    this.editor.customConfig.uploadImgServer = '你的上传图片的接口'
    this.editor.customConfig.uploadFileName = '你自定义的文件名'
    this.editor.customConfig.uploadImgHeaders = {
      Accept: '*/*'
      // 'Authorization':'Bearer ' + token    //头部token
    }
    this.editor.customConfig.menus = [
      //菜单配置
      'head',
      'list', // 列表
      'justify', // 对齐方式
      'bold',
      'fontSize', // 字号
      'italic',
      'underline',
      'image', // 插入图片
      'foreColor', // 文字颜色
      'undo', // 撤销
      'redo' // 重复
    ]
    //下面是最重要的的方法
    this.editor.customConfig.customUploadImg = function(files, insert) {
      console.log('图片上传', files)
      const file = files[0]
      const uid = uuid(32)
      const extName = that.getExtName(file.name)
      const fileName = `${uid}.${extName}`
      that.cos.sliceUploadFile(
        {
          Bucket: that.$CONFIG.Bucket,
          Region: that.$CONFIG.Region,
          Key: fileName,
          Body: file
        },
        (err, data) => {
          if (!err) {
            const { Location } = data
            const imageUrl = 'http://' + Location
            insert(imageUrl)
          }
        }
      )
    }
    this.editor.create()
    if (this.value) {
      this.setHtml(this.value)
    }
  },
  methods: {
    // 获取内容(html)
    getHtml() {
      return this.editor.txt.html()
    },
    // 获取内容(纯文本)
    getText() {
      return this.editor.txt.text()
    },
    // 设置内容(html)
    setHtml(text) {
      this.editor.txt.html(text)
    },
    // 追加内容(html)
    appendHtml(text) {
      this.editor.txt.append(text)
    },
    // 清空内容
    clear() {
      this.editor.txt.clear()
    },
    /**
     * 获取后缀名
     */
    getExtName(fileName) {
      let index = fileName.lastIndexOf('.')
      if (index > -1) {
        return fileName.substring(index + 1)
      } else {
        return ''
      }
    }
   }
}
</script>

<style lang="less">
.w-e-toolbar {
  flex-wrap: wrap !important;
}
.w-e-text {
  p {
    white-space: normal !important;
  }
}
</style>

使用

<a-form-item label="内容" v-bind="formItemLayout" style="position: relative;z-index: 1;">
	<Editor style="min-height: 200px"
                  ref="emergency"
                  :value="allContent"
                  @input="handleInput"></Editor>
</a-form-item>

// 富文本编辑器内容变更
    handleInput (html) {
      console.log(html)
      this.allContent = html
    },