在使用 wangeditor5-for-vue3 的时候因为技术文档没有搜索,所以找起来特别不方便,我当时几乎把整个文档看完了
这是清空的功能,但是要先在这里 useWangEditor 获取到,否则会报错
clearContent()
editableOption 一定要经过 useWangEditor 处理之后才能正常使用
<!--HTML -->
<we-editor
ref="editors"
:toolbar-option="toolbar"
:editable-option="editable"
v-model="formData.jarr"
v-model:json="formData.jstr"
v-model:html="formData.html"
/>
import { WeEditor, useWangEditor } from 'wangeditor5-for-vue3'
import { SlateDescendant,IEditorConfig} from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css'
// 菜单栏配置
const toolbarOption = {}
// 防抖时长。当会触发重载的配置项发生变化 365ms 后,编辑器会重载
const reloadDelary = 365
const editableOption = {
config:{
placeholder:"请在这里输入内容...",
MENU_CONF:{
// 配置默认字号
// 配置上传图片
uploadImage:{
// 请求路径
server: "/baseApiv1/file/getUrl",
// 后端接收的文件名称
fieldName: "file",
maxFileSize: 10 * 1024 * 1024, // 10M
// 上传的图片类型
allowedFileTypes: ["image/*"],
// 小于该值就插入 base64 格式(而不上传),默认为 0
base64LimitSize: 10 * 1024, // 10MB
// 自定义插入返回格式【后端返回的格式】
customInsert(res, insertFn) {
insertFn(res)
},
// 携带的数据
meta: {
token: storageLocal.getItem("token")
},
// 将 meta 拼接到 url 参数中,默认 false
metaWithUrl: true,
// 单个文件上传成功之后
onSuccess(file, res) {
ElMessage.success(`${file.name} 上传成功`)
// console.log(`${file.name} 上传成功`, res)
//ElMessage.success(`${file.name} 上传成功`, res)
},
// 单个文件上传失败
onFailed(file, res) {
ElMessage.error(`${file.name} 上传失败`)
},
// 上传错误,或者触发 timeout 超时
onError(file, err, res) {
ElMessage.error(`${file.name} 上传出错`)
},
}
}
}
}
const { editable, toolbar ,clearContent} = useWangEditor(
editableOption,
toolbarOption,
reloadDelary
)
// 不要使用 reactive/ref,应该使用 shallowReactive/shallowRef 来接收 json array 数据
let formData = shallowReactive({
jarr: [] as SlateDescendant[],
jstr: '',
html: ''
})
记得要在setup 的return里面吧 formData,editable, toolbar, editors 。 return 出去