wangeditor 富文本编辑器上传图片时使用项目中图片选择器

/*
	实现思路:
	wangeditor 自定义上传图片按钮;
	通过 customBrowseAndUpload 方法，代替原有选择图片上传操作，打开项目中的图片选择器;
	通过 editorRef 中的 selection 方法记录当前光标位置;
	选择图片后确定方法中，将得到的图片 url 写入 const imgHtml = `<img src="${url}" />`;
	通过 editorRef 中的 select 方法聚焦光标到记录的位置;
	在通过 editorRef 中的 dangerouslyInsertHtml(imgHtml); 插入到富文本编辑器中;
*/

//wangeditor index.vue 中
props.editorConfig.MENU_CONF!["uploadImage"] = {
  //自定义选择图片 - 唤起图片选择器 (不调用其原本的上传图片)
  customBrowseAndUpload() {
    uploadImg.value = true;
    //获取并存储光标所在位置
    cursorPosition.value = editorRef.value.selection;
  }
};

//图片选择器选中确定调用
const confirm = (val: any) => {
  //这里我们返回数据的格式是 [{name:"",id:"",path:""...}]
  //需根据自己项目中图片选择器来给 url 赋值
  const imgUrl = selectImage.value[0].path;
  const imgHtml: string = `<img src='${imgUrl}' />`;
  //聚焦光标位置
  editorRef.value.select(cursorPosition.value);
  //将 img 写入富文本编辑框
  editorRef.value.dangerouslyInsertHtml(imgHtml); 
  uploadImg.value = false;
};