之前没用过wangEditor真是一脸懵，做自己没做过的东西总是心里没谱，既然项目已经结束了那来总结一下吧
看着官网的demo发现简单了好多
官网地址：快速开始 | wangEditor
这里可以选自己的框架，我用的vue2.0
文章来源：https://www.toymoban.com/news/detail-532151.html
然后按照demo示例一步步开整！文章来源地址https://www.toymoban.com/news/detail-532151.html
yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save<template>
<div style="border: 1px solid #ccc">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editor"
:defaultConfig="toolbarConfig" :mode="mode" ref="toolbar"
/>
<Editor
style="height: 500px; overflow-y: hidden"
v-model="html"
id="wangEdit"
:defaultConfig="editorConfig"
:mode="mode"
ref="editor"
@onCreated="onCreated" />
</div>
</template><script>
import Vue from 'vue';
import { getStore } from '@/util/store';
import { uploadFile } from '@/api/system/post';
import { Boot } from '@wangeditor/editor';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import attachmentModule from '@wangeditor/plugin-upload-attachment';
import { createEditor } from '@wangeditor/editor'
import { DomEditor } from '@wangeditor/editor';
Boot.registerModule(attachmentModule);
export default Vue.extend({
components: { Editor, Toolbar },
data() {
return {
editor: null,
html: '',
// 工具栏配置
toolbarConfig: {
//自定义配置上传附件功能
insertKeys: {
index: 22, // 自定义插入的位置
keys: ['uploadAttachment'], // “上传附件”菜单
},
excludeKeys: ['insertImage','insertVideo'],//去掉网络上传图片和视频
},
editorConfig: {
placeholder: '请输入内容...',
hoverbarKeys: {
attachment: {
menuKeys: ['downloadAttachment'], // “下载附件”菜单
},
image:{
menuKeys: [],
}
},
MENU_CONF: {
// 上传图片
uploadImage: {
fieldName: 'file',
// base64LimitSize: 10 * 1024 * 1024, // 10M 以下插入 base64
server: window.location.origin + '/api/xxx/xxx',//自定义的接口地址
headers: {
'Spang-Auth': getStore({ name: 'access_token' }),
},
async customUpload(file, insertFn) {
const form = new FormData();
form.append('file', file);
uploadFile(form).then(res => {
let { code, data } = res.data;
if (code == 200) {
insertFn(data.link, data.originalName, data.domain + data.domain.name);
} else if (code == 413) {
this.$message({
type: 'success',
message: res.data.message,
});
}
});
},
},
// 上传视频
uploadVideo: {
fieldName: 'file',
server: window.location.origin + '/apiapi/xxx/xxxx',
headers: {
'Spang-Auth': getStore({ name: 'access_token' }),
},
async customUpload(file, insertFn) {
const form = new FormData();
form.append('file', file);
uploadFile(form).then(res => {
let { code, data } = res.data;
if (code == 200) {
insertFn(data.link, data.originalName, data.domain + data.domain.name);
} else if (code == 413) {
this.$message({
type: 'success',
message: res.data.message,
});
}
});
},
},
// 上传附件
uploadAttachment: {
fieldName: 'file',
server: window.location.origin + '/api/xxx/xxxx',
headers: {
'Spang-Auth': getStore({ name: 'access_token' }),
},
// 超时时间，默认为 10 秒
timeout: 100 * 1000, // 5 秒
async customUpload(file, insertFn) {
const form = new FormData();
form.append('file', file);
uploadFile(form).then(res => {
let { code, data } = res.data;
if (code == 200) {
insertFn(data.originalName, data.link);
} else if (code == 413) {
this.$message({
type: 'success',
message: res.data.message,
});
}
});
},
},
},
},
mode: 'default', // or 'simple'
};
},
mounted() {
const editor = createEditor({})
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
},
},
beforeDestroy() {
const editor = this.editor;
if (editor == null) return;
editor.destroy(); // 组件销毁时，及时销毁编辑器
},
});
</script><style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
/deep/ .w-e-modal button {
height: auto;
}
</style>到了这里，关于Vue中使用wangEditor实现自定义上传图片和视频的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
