vue3 wangeditor组件封装

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

```css
<template>
<div style="border: 1px solid #ccc;">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
<Editor :style="{ height: editorHeight + 'px', 'overflow-y': 'hidden' }" v-model="valueHtml"
:defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
</div>
</template>
<script
setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getToken } from "@/utils/auth";
import { defineProps, shallowRef } from "vue";
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const props = defineProps({
modelValue: [String, Object, null],
height: {
type: Number,
default: 300
}
})
const editorHeight = ref(props.height)
const emit = defineEmits()
const valueHtml = computed({
get () {
return props.modelValue
},
set (value) {
emit('update:modelValue', value)
}
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const mode = ref('simple')
//工具栏
//配置项
const editorConfig = {
placeholder: '请输入内容...',
MENU_CONF: {
uploadImage: {
//上传图片配置
server: baseUrl + "/common/upload", //上传接口地址
headers: { Authorization: "Bearer " + getToken() },
fieldName: "file", //上传文件名
methods: "post",
// timeout: 5 * 1000, // 5s
// meta: { token: "xxx", a: 100 },
metaWithUrl: true, // 参数拼接到 url 上
// headers: { Accept: "text/x-json" },
maxFileSize: 10 * 1024 * 1024, // 10M
// base64LimitSize: 5 * 1024, // 5kb 以下插入 base64
onBeforeUpload (files) {
if (files.extension == "svg") {
globalProperties.$message.info("不支持此格式图片");
return false; // 返回哪些文件可以上传 会阻止上传
}
},
onProgress (progress) {
console.log("onProgress", progress);
},
onSuccess (file, res) {
console.log("onSuccess", file, res);
},
onFailed (file, res) {
console.log("onFailed", file, res);
},
onError (file, err, res) {
console.error("onError", file, err, res);
},
// // 用户自定义插入图片
customInsert (res, insertFn) {
console.log(res, insertFn);
const imgInfo = res || {};
console.log(imgInfo.url);
//data为后端返回的图片地址
const { url } = imgInfo;
if (!url) throw new Error(`Image url is empty`);
// 自己插入图片
insertFn(url);
},
},
},
}
const toolbarConfig = {
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const { value } = editorRef
if (value === null) return
value.destroy()
})
const handleCreated = (editor) => {
editorRef.value = editor // 记录 editor 实例，重要！
}
</script>
<style lang="scss" scoped>
</style>