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
| <style src="@wangeditor/editor/dist/css/style.css"></style>
<template>
<div style="border: 1px solid #ccc;">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden;"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
@onChange="onChange"
/>
</div>
</template>
<script>
import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {getAccessToken} from "@/utils/auth";
export default Vue.extend({
props: { // 1. props 的 name 进行接收
value: {
default: ''
}
},
components: { Editor, Toolbar },
data() {
return {
editor: null,
html: this.value,
currentValue: '',
toolbarConfig: { },
editorConfig: {
placeholder: '请输入内容...',
MENU_CONF: {
//上传参考https://www.wangeditor.com/v5/menu-config.html#%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE
uploadImage: {
server: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload2", // 请求地址
// 超时时间，默认为 10 秒
timeout: 30 * 1000, // 5s
fieldName: "file",
// 将 meta 拼接到 url 参数中，默认 false
metaWithUrl: false, // join params to url
// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
meta: { dataKey: 0, bizType: "common" },
// 自定义增加 http header
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
// 跨域是否传递 cookie ，默认为 false
withCredentials: true,
// 自定义增加 http header
// headers: {
// Accept: "text/x-json",
// otherKey: "xxx"
// },
maxFileSize: 10 * 1024 * 1024, // 10M
base64LimitSize: 5 * 1024, // insert base64 format, if file's size less than 5kb
// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
allowedFileTypes: ["image/*"],
// 最多可上传几个文件，默认为 100
maxNumberOfFiles: 30,
onBeforeUpload(file) {
console.log("onBeforeUpload", file);
return file; // will upload this file
// return false // prevent upload
},
onProgress(progress) {
console.log("onProgress", progress);
},
onSuccess(file, res) {
console.log("onSuccess", file, res);
},
onFailed(file, res) {
alert(res.message);
console.log("onFailed", file, res);
},
onError(file, err, res) {
alert(err.message);
console.error("onError", file, err, res);
}
},
uploadVideo: {
server: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload2", // 请求地址
fieldName: "file",
// 单个文件的最大体积限制，默认为 10M
maxFileSize: 5 * 1024 * 1024, // 5M
// 最多可上传几个文件，默认为 5
maxNumberOfFiles: 3,
// 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
allowedFileTypes: ["video/*"],
// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
meta: { dataKey: 0, bizType: "video" },
// 将 meta 拼接到 url 参数中，默认 false
metaWithUrl: false,
// 自定义增加 http header
headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
// 跨域是否传递 cookie ，默认为 false
withCredentials: true,
// 超时时间，默认为 30 秒
timeout: 30 * 1000, // 15 秒
// 上传进度的回调函数
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);
}
}
}
},
mode: 'default', // or 'simple'
}
},
watch: {
value: {
handler(val) {
if (val !== this.html) {
this.html = val === null ? "" : val;
if (this.editor) {
this.editor.setHtml(this.html);
}
}
},
immediate: true,
},
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor)
},
onChange(editor) {
const html = editor.getHtml()
this.$emit("echoHtml", html); // 1. $emit 方法，通知 ok 事件，message 是参数
// 也可以同步到 <textarea>
}
},
mounted() {
// 模拟 ajax 请求，异步渲染编辑器
// setTimeout(() => {
// this.html = props.dd
// }, 1500)
},
beforeDestroy() {
this.editor = null;
}
})
</script>
|
