<div style="border: 1px solid #ccc; margin: 20px 0">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
@onChange="onChange"
@onDestroyed="onDestroyed"
@onMaxLength="onMaxLength"
@onFocus="onFocus"
@onBlur="onBlur"
@customAlert="customAlert"
@customPaste="customPaste"
/>
</div>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
//重点配置editorconfig
data() {
return {
// 编辑器
editor: null,
html: "<p>暂时未配置上传图片/视频地址 </p>",
//根据需要显示工具栏内容
toolbarConfig: {},
//终点配置
editorConfig: {
placeholder: "请输入内容...",
MENU_CONF: {
//配置上传图片
uploadImage: {
customUpload: this.uploadImg,
},
},
},
mode: "simple", // or 'simple'default
}
}
methods: {
uploadImg(file, insertFn) {
let imgData = new FormData();
imgData.append("file", file);
//调自己配置的接口,上传图片
接口方法(imgData).then((res) => {
....
});
},}
Wang editor 富文本编辑器配置上传图片方法
于 2023-09-11 00:14:20 首次发布