本页导航
article
wangeditor使用
AI摘要
Vue3 中使用 wangeditor 富文本编辑器,包含工具栏配置和组件封装
工具栏配置
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" // 上传视频
]
})
图片及视频上传
// 编辑器配置
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'
}
});
}
最后更新于 2026-02-18 18:09