vue2引入wangEditor5富文本编辑器

以下为引入wangEditor

<template>
  <div>
    <div class="w-e-for-vue">
      
      <Toolbar
        class="w-e-for-vue-toolbar"
        :editor="editor"
        :defaultConfig="toolbarConfig">
      Toolbar>

      
      <Editor
        class="w-e-for-vue-editor"
        :style="'height: ' + height"
        :disabled="isDisabled"
        :defaultConfig="editorConfig"
        v-model="content"
        @onChange="onChange"
        @onCreated="onCreated">
      Editor>
    div>
  div>
template>

<script>
import store from '@/store'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {baseUrl} from "@/config/env";
import { DomEditor } from '@wangeditor/editor'


export default {
  name: 'wangEditor',
  components: {Editor, Toolbar},
  props: [
    'editorParams'
  ],
  data() {
    return {
      // 富文本编辑器对象
      editor: null,
      // 富文本内容
      content: null,
      // 富文本占位内容
      placeholder: null,
      // 富文本上传图片的地址
      uploadImageUrl: null,
      // 富文本最小高度
      height: '300px',
      // 富文本是否禁用
      isDisabled: false,
      // 工具栏配置
      toolbarConfig: {
        // 显示指定的菜单项
        // toolbarKeys: [],
        // 隐藏指定的菜单项
        excludeKeys: [
          // 隐藏全屏按钮
          "fullScreen"
        ],
      },
      // 编辑器配置
      editorConfig: {
        placeholder: '请输入内容......',
        MENU_CONF: ['uploadImage']
      }
    }
  },
  watch: {
    /**
     * 深度监听富文本参数
     */
    'editorParams': {
      handler: function (newVal, oldVal) {
        if (newVal != null) {
          this.content = newVal.content
          this.editorConfig.placeholder = this.placeholder
          this.uploadImageUrl = newVal.uploadImageUrl
          this.setUploadImageConfig()
          this.height = newVal.height
          this.isDisabled = newVal.isDisabled
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    /**
     * 实例化富文本编辑器
     */
    onCreated(editor) {
      this.editor = Object.seal(editor)
      this.setIsDisabled()
    },
    /**
     * 监听富文本编辑器
     */
    onChange(editor) {
      // console.log('onChange =>', editor.getHtml())
    },
    /**
     * this.editor.getConfig().spellcheck = false
     * 由于在配置中关闭拼写检查，值虽然设置成功，但是依然显示红色波浪线
     * 因此在富文本编辑器组件挂载完成后，操作 Dom 元素设置拼写检查 spellcheck 为假
     */
    async setSpellCheckFasle() {
      let doms = await document.getElementsByClassName('w-e-scroll')
      for (let vo of doms) {
        if (vo) {
          if (vo.children.length > 0) {
            vo.children[0].setAttribute('spellcheck', 'false')
          }
        }
      }
    },
    /**
     * 设置富文本是否禁用
     */
    async setIsDisabled() {
      if (this.editor) {
        this.isDisabled ? (this.editor.disable()) : (this.editor.enable())
      }
    },
    /**
     * 上传图片配置
     */
    setUploadImageConfig() {
      this.editorConfig.placeholder = this.placeholder
      this.editorConfig.MENU_CONF['uploadImage'] = {
        fieldName: 'file', // 文件字段名（后端需要对应的字段）， 默认值 'wangeditor-uploaded-image'
        maxFileSize: 6 * 1024 * 1024, // 单个文件的最大体积限制，默认为 2M，此次设置为 6M
        maxNumberOfFiles: 30, // 最多可上传几个文件，默认为 100
        allowedFileTypes: ['image/*'], // 选择文件时的类型限制，默认为 ['image/*'] ，若不想限制，则设置为 []
        meta: {// 自定义上传参数，例如传递验证的 token 等，参数会被添加到 formData 中，一起上传到服务端
          'TENANT-ID': store.getters.userInfo.tenantId,
          Authorization: 'Bearer ' + store.getters.access_token
        },
        metaWithUrl: false, // 将 meta 拼接到 URL 参数中，默认 false
        headers: {// 设置 HTTP 请求头信息
          'TENANT-ID': store.getters.userInfo.tenantId,
          Authorization: 'Bearer ' + store.getters.access_token
        },
        server: this.uploadImageUrl, // 上传图片接口地址
        withCredentials: false, // 跨域是否传递 cookie ，默认为 false
        timeout: 5 * 1000, // 超时时间，默认为 10 秒，此次设置为 5 秒
        // 自定义插入图片
        customInsert(res, insertFn) {
          // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
          // 注意此处将返回的文件路径拼接出来放入,注意应该是完整地址，res为上传后接口返回的数据
          let file_url = '';
          insertFn(file_url, res.data.fileName, file_url);
        },
        // 上传之前触发
        onBeforeUpload(file) {
          return file
        },
        // 上传进度的回调函数
        onProgress(progress) {
          console.log('progress', progress)
        },
        // 单个文件上传成功之后
        onSuccess(file, res) {
          console.log(`${file.name} 上传成功`, res)
        },
        // 单个文件上传失败
        onFailed(file, res) {
          console.log(`${file.name} 上传失败`, res)
        },
        // 上传错误，或者触发 timeout 超时
        onError(file, err, res) {
          console.log(`${file.name} 上传出错`, err, res)
        }
      }
    },
    /**
     * 获取编辑器文本内容
     */
    getEditorText() {
      const editor = this.editor
      if (editor != null) {
        return editor.getText()
      }
    },
    /**
     * 获取编辑器Html内容
     */
    getEditorHtml() {
      const editor = this.editor
      // 下方三行用来获取编辑器工具栏分组
      // const toolbar = DomEditor.getToolbar(this.editor)
      // const curToolbarConfig = toolbar.getConfig()
      // console.log( curToolbarConfig.toolbarKeys )
      if (editor != null) {
        return editor.getHtml()
      }
    },
    /**
     * 填充编辑器Html内容
     */
    setEditorHtml(html) {
      const editor = this.editor
      if (editor != null) {
        editor.setHtml(html)
      }
    }
  },
  created() {

  },
  mounted() {
    this.setSpellCheckFasle() // 设置拼写检查 spellcheck 为假
    document.activeElement.blur() // 取消富文本自动聚焦且禁止虚拟键盘弹出
  },
  /**
   * 销毁富文本编辑器
   */
  beforeDestroy() {
    const editor = this.editor
    if (editor != null) {
      editor.destroy()
    }
  }
}
script>

<style src="@wangeditor/editor/dist/css/style.css">style>

<style lang="less" scoped>
.w-e-full-screen-container {
  z-index: 99;
}

.w-e-for-vue {
  margin: 0;
  border: 1px solid #ccc;

  .w-e-for-vue-toolbar {
    border-bottom: 1px solid #ccc;
  }

  .w-e-for-vue-editor {
    height: auto;

    /deep/ .w-e-text-container {

      .w-e-text-placeholder {
        top: 6px;
        color: #666;
      }

      pre {

        code {
          text-shadow: unset;
        }
      }

      p {
        margin: 5px 0;
        font-size: 14px; // 设置编辑器的默认字体大小为14px
      }
    }
  }
}
style>

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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267

封装为wangEdit组件，调用代码

<wang-edit ref="wangEditorRef" v-if="editShow" :editorParams="editorParams"/>
<script>
// 此处改为你自己存放的路径
import WangEdit from "@/components/text-editor/wangEdit";
export default {
  components: {
    WangEdit
  },
  data() {
    return {
    	editShow: false,
    	editorParams: {
	        content: '', // 富文本内容
	        placeholder: '请填写内容', // 富文本占位内容
	        uploadImageUrl: '/file', // 富文本上传图片的地址
	        height: document.documentElement.clientHeight, // 富文本最小高度
	        isDisabled: false // 富文本是否禁用
      	},
    }
  },
  methods: {
  	setHtml(html){
      // 回显富文本框中内容
      let _this = this;
      this.$nextTick(() => {
        // 此处用来解决富文本编辑器未完全加载的问题
        setTimeout(()=>{
          _this.$refs.wangEditorRef.setEditorHtml(html);
        },200)
      })
    },
    getHtml() {
    	this.$refs.wangEditorRef.getEditorHtml();
    }
  }
}
script>
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