vue 封装富文本组件wangeditor

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

1
import E from 'wangeditor'

1
2
3
4
5
6
<template>
  <div id="wangeditor">
    <div ref="editorElem"
         style="text-align: left;"></div>
  </div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<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>

1
2
3
4
5
6
7
8
9
10
11
12


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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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>