新建组件

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
// Wangeditor.vue
<template>
  <div class="wangeditor">
    <div ref="editorElem" class="wangeditor-mach"></div>
  </div>
</template>

<script>
import E from 'wangeditor'
import { postUpload } from '@/api/upload'
import defaultSettings from '@/config/defaultSettings'
export default {
  name: 'Wangeditor',
  data () {
    return {
      editor: {},
      editorContent: '',
      defaultSettings: defaultSettings.settings,
      path: '',
      imgServerUrl: process.env.VUE_APP_SERVER_URL // 图片地址服务器 (因返回的地址为相对地址)
    }
  },
  watch: {
    context (val, oldval) {
      if (val && val !== oldval) {
        this.handsetHtmlValue(val)
      }
    }
  },
  props: {
    // eslint-disable-next-line
    editorData: {
      type: Function,
      default: (value) => {
        return value
      }
    },
    // eslint-disable-next-line
    editorConfig: {
      // eslint-disable-next-line
      type: Object,
      // eslint-disable-next-line
      default: {
        uploadImgServer: '',
        uploadFileName: 'file',
        uploadImgMaxLength: 1,
        zIndex: 9
      }
    },
    context: {
      type: String,
      default: ''
    }
  },
  mounted () {
    const that = this
    const editor = new E(this.$refs.editorElem) // 创建富文本实例
    this.editor = editor
    editor.customConfig.onchange = (html) => {
      // 把这个html通过editorData的方法传入父组件
      this.editorData(html)
    }
    editor.customConfig.zIndex = this.editorConfig.zIndex || 9
    editor.customConfig.uploadFileName = this.editorConfig.uploadFileName
    editor.customConfig.uploadImgMaxLength = this.editorConfig.uploadImgMaxLength
    editor.customConfig.uploadImgServer = this.editorConfig.uploadImgServer
    console.log('图片上传地址：', editor.customConfig.uploadImgServer, this.imgServerUrl)
    // editor.customConfig.menus = [ // 菜单配置
    //   'head',
    //   'list', // 列表
    //   'justify', // 对齐方式
    //   'bold',
    //   'fontSize', // 字号
    //   'italic',
    //   'underline',
    //   'image', // 插入图片
    //   'foreColor', // 文字颜色
    //   'undo', // 撤销
    //   'redo' // 重复
    // ]
    // 下面是最重要的的方法
    // editor.customConfig.uploadImgHooks = {
    //   before (xhr, editor, files) {
    //     // 图片上传之前触发
    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
    //     // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
    //     // return {
    //     //     prevent: true,
    //     //     msg: '放弃上传'
    //     // }
    //   },
    //   success (xhr, editor, result) {
    //     // 图片上传并返回结果，图片插入成功之后触发
    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    //     this.imgUrl = Object.values(result.data).toString()
    //   },
    //   fail (xhr, editor, result) {
    //     // 图片上传并返回结果，但图片插入错误时触发
    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
    //   },
    //   error (xhr, editor) {
    //     // 图片上传出错时触发
    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    //   },
    //   timeout (xhr, editor) {
    //     // 图片上传超时时触发
    //     // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
    //   },

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

    //     // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
    //     console.log('图片上传并返回结果，自定义插入图片的事件', insertImg, result, editor)
    //     if (result.status !== 'success') { return this.$message.error(`富文本编辑器图片上传失败！`) }
    //     this.path = result.path
    //     const resultData = result.data.split(',')
    //     const wangeditorData = resultData.forEach(item => insertImg(result.path + item))
    //     console.log(wangeditorData)
    //   }
    // }
    editor.customConfig.customUploadImg = function (files, insert) {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法

      // 上传代码返回结果之后，将图片插入到编辑器中 注意：！！！ 此处只涉及单张图片
      const fileList = [...files]
      const formData = new FormData()
      fileList.forEach(file => {
        formData.append('file', file)
      })
      postUpload(formData).then(res => {
        if (res.status !== 'success') {
          return that.$message.error(res.msg)
        }
        console.log('自定义上传方法：', that.imgServerUrl + res.result)
        insert(that.imgServerUrl + res.result)
      }).catch(e => { })
    }
    editor.create()
  },
  methods: {
    handsetHtmlValue (data) {
      this.editor.txt.html(data)
    }
  }
}
</script>

<style lang="less" scoped>
  /deep/ .wangeditor-mach .w-e-toolbar {
    flex-wrap: wrap;
  }
</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
// 父及组件使用方法
import wangeditor from '@/components/Wangeditor'
import xss from 'xss'

export default {
    components: {
        'a-wangeditor': wangeditor
    },
    data () {
        return {
            editorContent: '',
              context: '',
              editorConfig: {
                uploadImgServer: postUploadUrl()
              }
        }  
    },
    methods: {
        editorData (data) {
          this.editorContent = xss(data)
          // 赋值操作
          this.handsetFieldsValue('context', this.editorContent)
        }
    }
}