富文本推介 www.wangeditor.com/v5/API.html…*
去掉不想要的工具类
const toolbarConfig = { excludeKeys: [ 'uploadVideo', // 排除菜单组，写菜单组 key 的值即可 'group-image' 'group-video', 'group-image', ``],`` insertKeys: { index: 0, tag: 'button', title: 'title', keys: ['editCode'], // show menu in toolbar }, }
添加新的自定义 需要创建自己的class 类
`
class Upload {
constructor(vueInstance) {
this.vueInstance = vueInstance;
this.iconSvg = '';
this.title = '上传图片'; // 自定义菜单标题
this.tag = 'button';
}
// 获取菜单执行时的 value ，用不到则返回空 字符串或 false getValue(editor) {}
// 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false isActive(editor) { return false }
// 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false isDisabled(editor) { return false }
// 点击菜单时触发的函数 exec(editor, value) { this.vueInstance.value._click() //console.log('123123213213') } }
export default Upload页面使用 onMounted(() => {
const menu1Conf = {
key: 'editCode', // 定义 menu key ：要保证唯一、不重复（重要）
factory() {
//
editorRef.value._click = () => {
const fileInput = document.querySelector('.uploadImg .ItemImg .avatar-uploader')
if (fileInput) fileInput.click()
}
return new Upload(editorRef)
},
}
Boot.registerMenu(menu1Conf)
// 初始化检查 props.value 是否是 HTML 格式
// const editor = editorRef.value
// if (editor && isHtmlString(valueHtml.value)) {
// editor.setHtml(valueHtml.value)
// }
}) import { DomEditor, Boot } from '@wangeditor/editor'`
添加文本 dangerouslyInsertHtml 是重要的关键 // 监听 coverUrl 的变化 watch(()=>coverUrl.value, (newUrl) => { console.log(newUrl,'newUrl') if (newUrl) { const editor = editorRef.value if (editor) { const imgHtml = editor.dangerouslyInsertHtml(imgHtml) coverUrl.value = '' // 清空 coverUrl } } })
