安装及使用https://www.wangeditor.com/v5/for-frame.html#vue3 (opens new window)

1. 工具栏配置

const toolbars = reactive({
  // excludeKeys为排除不想要的菜单，只需填写写菜单组 key 的值即可
  excludeKeys: [
    // 全部菜单如下所示
	"header1",// 标题
	"header2",
	"header3",
	"|",
	"blockquote", // 引用
	"bold", // 加粗
	"underline", // 下划线
	"italic", // 斜体
	"group-more-style",
	"color", // 文字颜色

	"bgColor", // 背景色

	"fontSize", // 字号

	"fontFamily", // 字体

	"lineHeight", // 行高

	"bulletedList", // 无序列表

	"numberedList", // 有序列表
	
	"justifyLeft", //左对齐
	
	"justifyRight", //右对齐
	
   "justifyCenter", //居中对齐

	"todo", // 代办
	
	"emotion",// 表情
	
	"insertLink",// 插入链接
	
	"insertTable",// 插入表格
	
	"codeBlock", // 代码块
	
	"divider", // 分割线
	
	"undo", // 撤销
	
	"redo", // 重做
	
	"fullScreen", // 全屏
	
	"through", //中划线
	
	"clearStyle" ,  //清除格式
	
	"group-indent", // 缩进
	
	"group-image", // 上传图片
	
	"insertVideo"  // 上传视频
  ]
})

2. 图片及视频上传

// 编辑器配置
const editorConfig = ref({
	placeholder: "请输入内容...",
    autoFocus : false,
    readOnly: props.readOnly,
	MENU_CONF: {
		uploadImage: {
			// 自定义图片上传
			async customUpload(file: any, insertFn: any) {
				uploadFileApi(file).then((response) => {
					const url = response.data;
					insertFn(url);
				});
			},
		},
		uploadVideo: {
		  // 自定义视频上传
		  async customUpload(file: any, insertFn: any) {  // TS 语法
			uploadVideoApi(file).then((response) => {
				  const url = response.data;
				  insertFn(url);
			  });
		  }
		}
	},
});


//uploadApi接口如下

/**
 * 上传视频
 *
 * @param file
 */
export function uploadVideoApi(file: File): AxiosPromise<FileInfo> {
  const formData = new FormData();
  formData.append('file', file);
  formData.append('biz', 'file');
  return request({
	url: '/api/file/upload',
	method: 'post',
	data: formData,
	headers: {
	  'Content-Type': 'multipart/form-data'
	}
  });
}