bug1:回显的时候,如果内容为null则会报错
- 解决:判断为null,给一个初始值
"<div></div>"
bug2:编辑图片成功之后再点编辑回显报错,原因是因为缓存的原因
- 解决:将编辑器组件所在的弹窗组件,每次关闭的时候销毁
v-if="show"
vue3 封装组件 editor.vue
<template>
<div style="border: 1px solid #ccc">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
<Editor style="height: 300px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
@onCreated="handleCreated" />
</div>
</template>
<script>
import request from '@/utils/request'
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ElMessage } from 'element-plus'
import useUserStore from '@/store/modules/user'
export default {
components: { Editor, Toolbar },
props: {
value: {
type: String,
},
disabled: {
type: Boolean,
},
},
setup(props) {
const editorRef = shallowRef()
const valueHtml = ref('')
const handleCreated = (editor) => {
editorRef.value = editor
}
const toolbarConfig = {}
toolbarConfig.excludeKeys = [
'group-video',
'insertImage'
]
const editorConfig = { placeholder: '请输入内容...', autoFocus: true, MENU_CONF: {} }
editorConfig.MENU_CONF["uploadImage"] = {
async customUpload(file, insertFn) {
if (file.size / 1024 / 1024 > 10) {
ElMessage.error(`文件大小不能超过10MB!`);
return false;
} else {
request({
url: '/common/upload',
method: 'post',
data: { file: file },
headers: { "Content-Type": "multipart/form-data" },
})
.then((res) => {
if (res.code == 200) {
insertFn(location.origin + res.data.url);
} else {
ElMessage.warning(`图片上传失败`);
}
})
}
},
};
watchEffect(() => {
valueHtml.value = props.value
editorConfig.readOnly = props.disabled
})
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})
return {
editorRef,
valueHtml,
mode: 'default',
toolbarConfig,
editorConfig,
handleCreated
};
}
}
</script>
使用组件
<el-dialog v-if="showAdd" v-model="showAdd" title="编辑">
<el-form-item label="单位简介" prop="companyIntro">
<QuEditor ref="editorRef" :value="form.companyIntro" :disabled="type == 3"></QuEditor>
</el-form-item>
</el-dialog>
import QuEditor from '@/components/QuComponents/editor.vue';
if (!res.data.companyIntro) {
form.value.companyIntro = "<div></div>"
}
const editorRef = ref()
console.log(editorRef.value.valueHtml)