项目场景:
项目场景:vue中使用wangeditor
问题描述
自定义工具栏,自定义上传图片保存和预览
解决方案:
- 引入
import { createEditor, createToolbar } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css'
<!-- 页面-->
<div id="editor—wrapper" style="border: 1px solid #ccc;height: 700px">
<div id="toolbar-container"><!-- 工具栏 --></div>
<div id="editor-container" style='height: 85%'><!-- 编辑器 --></div>
</div>
- 初始化加载编辑器和工具栏
createEditor() {
const editorConfig = {
placeholder: '请输入邮件内容...',
MENU_CONF: {
uploadImage: {
server: 'api/sysFileInfo/editorUpload/image',
timeout: 5 * 1000, // 5s,
fieldName: 'file',
meta: { token: 'xxx', a: 100 },
metaWithUrl: false, // join params to url
headers: { Accept: 'text/x-json' },
maxFileSize: 10 * 1024 * 1024, // 10M
base64LimitSize: 1 * 1024, // insert base64 format, if file's size less than 5kb
onBeforeUpload(file) {
return file
},
onProgress(progress) {
},
onSuccess(file, res) {
},
onFailed(file, res) {
alert(res.message)
},
onError(file, err, res) {
alert(err.message)
},
customInsert(res, insertFn) { // TS 语法
insertFn(process.env.VUE_APP_API_BASE_URL + res.data.url, res.data.alt, '')
}
}
}
}
const editor = createEditor({
selector: '#editor-container',
html: '<p><br></p>',
config: editorConfig,
mode: 'default' // or 'simple'
})
const toolbarConfig = {
excludeKeys: ['fullScreen', 'group-video', 'insertLink', 'insertImage'] // 配置菜单f12根据data-menu-key配置
}
// eslint-disable-next-line no-unused-vars
const toolbar = createToolbar({
editor,
selector: '#toolbar-container',
config: toolbarConfig,
mode: 'default' // or 'simple'
})
}
editorConfig.MENU_CONF.uploadImage.server配置图片上传地址
customInsert方法中返回图片上传完成后图片地址
参考文档:wangeditor图片上传
toolbarConfig.excludeKeys中去除工具栏不需要显示的菜单,可以F12,根据data-menu-key查看对应菜单参数