526互联

如何在Vue项目中引入富文本编辑器(wang-enduit)

发布时间 2023-09-05 20:52:19作者: ajajaz

介绍

官网 https://www.wangeditor.com/

安装

yarn add @wangeditor/editor
npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue@next
npm install @wangeditor/editor-for-vue@next --save

使用

自定义上传图片，先转base64，转blob，上传服务器

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

import E from 'wangeditor'
import axios from 'axios'

// 初始化编辑器
updated() {
    this.setEditor()
},
// 函数
setEditor（）{
    const me = this
    this.editor = new E(this.$refs.editorElem)
    // 自定义上传图片
    this.editor.config.customUploadImg = function(resultFiles, insertImgFn) {
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
        me.filesToBase64(resultFiles)
    }
    
    this.editor.config.menus = [
      // 菜单配置
        'head', // 标题
        'bold', // 粗体
        'italic', // 斜体
        'underline', // 下划线
        'link', // 插入链接
        'image', // 插入图片
        'undo', // 撤销
        'redo' // 重复
      ]
      this.editor.create()
}

//   转base64
filesToBase64(files) {
  const _this = this
  files.map(item => {
    console.log(item)
    var reader = new FileReader()
    reader.onload = function(e) {
      _this.uploadImg(e.target.result, item)
    }
    // 传入一个参数对象即可得到基于该参数对象的文本内容
    reader.readAsDataURL(item)
  })
},


// base64转blob
Base64toBlob({ base64, success }) {
  var arr = base64.split(',')
  var mime = arr[0].match(/:(.*?);/)[1]
  var bstr = atob(arr[1])
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  const blob = new Blob([u8arr], { type: mime })
  success(blob)
},


// 上传图片
uploadImg(base64, file) {
  const _this = this
  // 自己的上传地址
  const uploadUrl = process.env.VUE_APP_BASE_API_UNIVERSAL + '/api/qiniu/upload'
  const formData = new FormData()
  this.Base64toBlob({
    base64,
    success(blob) {
      formData.append('file', blob, file.name)
      formData.append('open', true)
      // 调用axios上传
      const config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }
      axios.post(uploadUrl, formData, config).then((res) => {
        // 根据自己的后台逻辑进行判断
        if (res.data.code === 0) {
          _this.$message.success('图片上传成功！')
          // 上传图片，返回结果，将图片插入到编辑器中
          _this.editor.cmd.do(
            'insertHtml',
            '<img src="' + res.data.result + '" style="max-width:100%;"/>'
          )
        } else {
          _this.$message({
            message: '文件服务异常，请联系管理员！',
            type: 'error'
          })
        }
      })
    }
  })
}

image