wangeditor5-for-vue3 清空内容,以及上传图片配置

1,313 阅读1分钟

在使用 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: '' 
      })

记得要在setupreturn里面吧 formData,editable, toolbar, editorsreturn 出去