Vue中使用wangEditor实现自定义上传图片和视频

之前没用过wangEditor真是一脸懵，做自己没做过的东西总是心里没谱，既然项目已经结束了那来总结一下吧

看着官网的demo发现简单了好多

官网地址：快速开始 | wangEditor

这里可以选自己的框架，我用的vue2.0

然后按照demo示例一步步开整！

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --saveyarn 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"/><Editorstyle="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 以下插入 base64server: 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实现自定义上传图片和视频相关推荐

vue-html5-editor接收数据,在vue中获取wangeditor的html和text的操作
目的:vue 中获取 wangeditor 的 html 和 text. 补充知识:vue-cli webpack 引入 wangeditor(轻量级富文本框) 1:使用npm下载: //(注意 wa ...
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点
深夜学姐问我在Vue中Echarts柱状图如何自定义顶部亮点先看效果图我们可以看到图中图表不仅有渐变色,同时柱状图顶部位置有一个不相同的顶部亮点(图片) 接下来,我们一起来实现一下这个效果 1. ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
在vue中使用wangEditor上传视频
一.效果展示实现效果原本效果二.修改wangEditor源码添加插入视频panel 只修改Video.prototype._createPanel方法 // 原型 Video.prototyp ...
笔记三 vue中封装复用过滤器自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...
教女朋友学习 vue中的指令及其自定义指令
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...
vue中使用video-player 播放rtmp格式的视频，播放前有一小段黑屏
问题: 在vue项目中使用video-player 播放rtsp格式的视频的时候, 若视频渲染比较慢的时候, 会导致初始画面是黑屏的状态. 解决思路:监听播放状态,等数据加载完,页面可以渲染的时候再 ...
vue中使用wangeditor富文本编辑器（含图片上传和回显）
最近在写vue的项目中,遇到一个需求,点击编辑,显示弹框,在弹框中的富文本编辑器中编辑自定义文本样式,可以上传图片并回显.编辑完成确定后显示在页面上. 首先先写一个editor.vue的页面.(建议单 ...
Vue中使用Wangeditor富文本实现聊天发送文件驻留
1.最近遇到一个需求,类似企业微信发送文件及视频时可以在文本框内驻留,然后点击发送按钮进行文件发送,这里使用的是富文本框进行处理,Wangeditor富文本框. 自定义添加菜单功能如下: cnpm i ...

Vue中使用wangEditor实现自定义上传图片和视频

Vue中使用wangEditor实现自定义上传图片和视频相关推荐

最新文章

热门文章