vue 封装富文本组件wangeditor

60 阅读 0 评论 40 点赞

我是靠谱客的博主开朗心锁，最近开发中收集的这篇文章主要介绍vue 封装富文本组件wangeditor，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1：使用npm下载：

//（注意 wangeditor 全部是小写字母）
npm install wangeditor

2: 直接在项目模板中引用

import E from 'wangeditor'

3：HTML

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

4: js代码

<script>
import E from 'wangeditor'
// import { gettest } from '@/api/home'
export default {
  name: 'wangEditor',
  data() {
    return {
      imgUrl: '',
      editor: null,
      editorImg: [],
      editorText: '',
    }
  },
  // 接收父组件的方法
  props: {
    catchData: Function,
    content: null,
    editorHeight: {
      type: Number,
      default: 400,
    },
  }, // 接收父组件的方法
  watch: {
    content() {
      this.editor.txt.html('')
    },
  },
  methods: {
    getSrt(content) {
      // 获取html 在所有的img 中src
      let imgReg = /<img.*?(?:>|/>)/gi //匹配图片中的img标签
      let srcReg = /src=['"]?([^'"]*)['"]?/i // 匹配图片中的src
      let arr = content.match(imgReg)  //筛选出所有的img
      let srcArr = []
      if (!this.$utils.IsNull(arr)) {
        for (let i = 0; i < arr.length; i++) {
          let src = arr[i].match(srcReg)
          // 获取图片地址
          srcArr.push(src[1])
        }
      }
      return srcArr
    }
  },
  mounted() {
    this.imgUrl = ''
    this.editor = new E(this.$refs.editorElem)
    this.editor.customConfig.onchange = (html) => {
      // 把这个html通过catchData的方法传入父组件
      this.catchData(html)
      // 获取编辑区域的纯文本
      this.editorText = this.editor.txt.text();
      this.editorImg = this.getSrt(this.editor.txt.html())
    }
    this.editor.customConfig.uploadImgTimeout = 3000
    this.editor.customConfig.zIndex = 1
    this.editor.customConfig.uploadFileName = 'myFileName'
    this.editor.customConfig.uploadImgServer = this.globalApi.ImgApi
    // editor.customConfig.uploadImgHeaders = {
    //   'Accept': '*/*',
    //   'Authorization': 'Bearer ' + token  //头部token
    // }
    // editor.customConfig.uploadImgHeaders = {
    //   Authorization: localStorage.getItem('toutoken'), // 设置请求头
    // }
    this.editor.customConfig.menus = [
      // 菜单配置
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      // 'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'code', // 插入代码
      'undo', // 撤销
      'redo', // 重复
    ]
    // 下面是最重要的的方法
    this.editor.customConfig.uploadImgHooks = {
      before: function (xhr, editor, files) {
        // 图片上传之前触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
        // return {
        //     prevent: true,
        //     msg: '放弃上传'
        // }
      },
      success: function (xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果

        this.imgUrl = Object.values(result.data).toString()
      },
      fail: function (xhr, editor, result) {
        // var res = xhr.data
        // 图片上传并返回结果，但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
      },
      error: function (xhr, editor) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
      },
      timeout: function (xhr, editor) {
        // 图片上传超时时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
      },

      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
      customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        let url = Object.values({ url: `http://localhost:8089/${result.data}` }) // result.data就是服务器返回的图片名字和链接
        JSON.stringify(url) // 在这里转成JSON格式
        insertImg(url)
        // result 必须是一个 JSON 格式字符串！！！否则报错
      },
    }
    // this.editor.customConfig.debug = true
    this.editor.create() // 创建富文本实例

    if (!this.content) {
      this.editor.txt.html('')
    }
    // 设置编辑框的高度
    let eds = document.getElementsByClassName('w-e-text-container')
    eds[0].style = `${eds[0].style.cssText} height: ${this.editorHeight}px`
  },
}
</script>

5: CSS样式



  this.$utils.IsNull() 上面用的这个方法 

  IsNull(val) {
    // 验证字段是否为空
    if (val == "" || val == undefined || val == null) {
      return true
    } else {
      return false
    }
  }

<style lang="less">
#wangeditor {
  .w-e-text {
    background-color: white;
  }
  .w-e-toolbar {
    background-color: #f8f8f8 !important;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    box-sizing: border-box;
  }
  .w-e-text p {
    margin: 0 0 !important;
    line-height: normal !important;
  }
  .w-e-text img {
    width: 400px;
    width: 430px;
  }
}
</style>