inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <div>
3     <div id="editor" ref="myEditor"></div>
4     <slot></slot>
5   </div>
6 </template>
7 <script>
8   import WangEditor from 'wangeditor'
9   export default {
10     name: 'ComponentWangeditor',
11     data () {
12       return {
13         edit: ''
14       }
15     },
16     props: {
17       value: {
18         type: String,
19         default: ''
20       },
21       config: {
22         type: Object,
23         default: () => {
24           return {}
25         }
26       },
27       uploadConfig: {
28         type: Object,
29         default: () => {
30           return {
31             method: 'http', // 支持custom(objurl)和http(服务器)和base64
32             url: '/'
33           }
34         }
35       }
36     },
37     computed: {
38       customConfig () {
39         return {
40           pasteFilterStyle: false, // 关闭掉粘贴样式的过滤
41           pasteIgnoreImg: false, // 粘贴时不忽略图片
42           ...this.config
43         }
44       }
45     },
46     watch: {
47
48     },
49     components: {
50
51     },
52     methods: {
53       readBlobAsDataURL (blob, callback) {
54         var a = new FileReader()
55         a.onload = function (e) { callback(e.target.result) }
56         a.readAsDataURL(blob)
57       },
58       initEditor () {
59         var self = this
60         this.editor = new WangEditor(this.$refs.myEditor)
61         // 配置 onchange 事件
62         this.editor.customConfig = this.customConfig
63         this.editor.customConfig.uploadImgMaxLength = 5
64         this.editor.change = function () { // 编辑区域内容变化时
65           self.$emit('input', this.txt.html())
66           self.$emit('onchange', this.txt.html(), this.txt)
67           // editor.txt.html('.....') //设置编辑器内容
68           // editor.txt.clear() //清空编辑器内容
69           // editor.txt.append('<p>追加的内容</p>')//继续追加内容。
70           // editor.txt.text()  // 读取 text
71           // editor.txt.getJSON()  // 获取 JSON 格式的内容
72         }
73         this.editor.customConfig.customUploadImg = function (files, insert) {
74           if (self.uploadConfig.method === 'custom') {
75             files.forEach(file => {
76               var fileUrl = URL.createObjectURL(file)
77               insert(fileUrl)
78             })
79           }
80           if (self.uploadConfig.method === 'base64') {
81             files.forEach(file => {
82               self.readBlobAsDataURL(file, function (dataurl) {
83                 insert(dataurl)
84               })
85             })
86           }
87           if (self.uploadConfig.method === 'http') {
88             if (self.uploadConfig.callback) {
89               self.uploadConfig.callback(files, insert)
90             } else {
91               var formData = new FormData()
92               files.forEach(file => {
93                 formData.append('file', file)
94               })
95               self.$axios.post(self.uploadConfig.url, formData).then(({ data }) => {
96                 if (data.status === 'success') {
97                   insert(data.url)
98                 }
99               })
100             }
101           }
102         }
103
104         this.editor.create() // 生成编辑器
105         this.editor.txt.text(this.value) // 生成编辑器
106         this.$emit('oninit', this.editor)
107       }
108     },
109     beforeCreate () {
110     },
111     created () {
112     },
113     beforeMount () {
114     },
115     mounted () {
116       this.initEditor()
117     }
118   }
119 </script>
120
121 <style >
122   .w-e-toolbar{
123     flex-wrap:wrap;
124   }
125
126 </style>