wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用

一：项目需求：①角色为管理员可以新增编辑文章 + ②点击可以看文章详情 +③ 角色为管理员可以修改编辑文章

二：效果：

①角色为管理员可以新增编辑文章

步骤：

①下载安装相关依赖 npm i wangeditor --save

②引入

③初始化创建编辑器

代码中的initialEditor函数

④自定义上传附件按钮

主要思路：在编辑器上增加新的菜单按钮 --》实例化按钮 --》结合ant-vue中的上传文件的组件，点击上传附件的按钮点击上传附件

// 菜单 key ，各个菜单不能重复

const menuKey = 'alertMenuKey'

editor = new E('#editor')

// editor.txt.clear() //清空富文本的内容

editor.menus.extend(menuKey, AlertMenu)

editor.config.menus.push(menuKey)

// 菜单点击事件

clickHandler() {

// 做任何你想做的事情

document.getElementById("tiggerPick").click();

}

要点：①自定义上传图片和视频方法 ②如何判断Dom上编辑器是否被创建

具体代码：

Markup

<template>  <a-modaltitle="新增知识库":width="900":visible="visible":confirmLoading="confirmLoading"@ok="handleSubmit"@cancel="handleCancel"><a-spin :spinning="confirmLoading"><a-form :form="form"><a-form-itemlabel="标题":labelCol="labelCol":wrapperCol="wrapperCol"has-feedbackstyle="margin-left:-150px;"><a-input placeholder="请输入标题" v-decorator="['title', {rules: [{required: true, message: '请输入标题！'}]}]" /></a-form-item><a-form-itemlabel="来源":labelCol="labelCol":wrapperCol="wrapperCol"has-feedbackstyle="margin-left:-150px;"><a-input placeholder="请输入来源" v-decorator="['source', {rules: [{required: true, message: '请输入来源！'}]}]" /></a-form-item><a-form-itemlabel="摘要":labelCol="labelCol":wrapperCol="wrapperCol"has-feedbackstyle="margin-left:-150px;"><a-textareaplaceholder="请输入摘要" v-decorator="['summary', {rules: [{required: true, message: '请输入摘要！'}]}]":auto-size="{ minRows: 3}"/></a-form-item><a-form-itemlabel="类型":labelCol="labelCol":wrapperCol="wrapperCol"style="margin-left:-150px;"><a-select style="width: 100%" placeholder="请选择类型" v-decorator="['type', {rules: [{ required: true, message: '请选择类型' }]}]"><a-select-option v-for="(item,index) in typeData" :key="index" :value="item.code">{{ item.name }}</a-select-option></a-select></a-form-item><a-form-itemlabel="封面":labelCol="labelCol":wrapperCol="wrapperCol"has-feedbackstyle="margin-left:-150px;"><!-- <a-input placeholder="请输入封面" v-decorator="['coverimg']" /> --><div :key="imgKey"><a-uploadlist-type="picture-card":file-list="fileList"@change="handleChange"@preview="handlePreview":before-upload="beforeImg":customRequest="uploadMethod"><div v-if="fileList.length < 1"><a-icon type="plus" /><div class="ant-upload-text">上传封面</div></div></a-upload></a-upload></div><a-modal :visible="previewVisible" :footer="null" @cancel="imghandleCancel"><img alt="example" style="width: 100%" :src="previewImage" /></a-modal></a-form-item><a-form-itemlabel="内容":labelCol="labelCol":wrapperCol="wrapperCol"style="margin-left:-150px;"><div id="editor" style="width:810px;"></div><div class="accessory" style="margin-left:-35px;position: relative;"><span >附件:&nbsp;</span><a-upload :file-list="refileList":before-upload="beforeUpload":customRequest="fileUpload":remove="handleRemove"><a-button v-show="false" style="width: 220px;" id="tiggerPick"> <a-icon type="upload" />  请选择文件资源 </a-button></a-upload></div></a-form-item><!-- <a-form-itemlabel="附件路径":labelCol="labelCol":wrapperCol="wrapperCol"has-feedback><a-input placeholder="请输入附件路径" v-decorator="['filepath']" /></a-form-item><a-form-itemlabel="排序":labelCol="labelCol":wrapperCol="wrapperCol"has-feedback><a-input placeholder="请输入排序" v-decorator="['sort']" /></a-form-item> --> </a-form></a-spin></a-modal>
</template><script>import "@/components/bottomReset.less"import "@/components/subfile.less"import { knowledgeBaseAdd } from '@/api/modular/main/knowledgebase/knowledgeBaseManage'import E from 'wangeditor'const { BtnMenu } = E// 自定义上传附件菜单class AlertMenu extends BtnMenu {constructor(editor) {// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述const $elem = E.$(`<div class="w-e-menu" data-title="上传附件"><a-button style="width: 40px;height: 40px;">附件</a-button></div>`)super($elem, editor)}// 菜单点击事件clickHandler() {// 做任何你想做的事情document.getElementById("tiggerPick").click();}// 菜单是否被激活（如果不需要，这个函数可以空着）tryChangeActive() {// 激活菜单// 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class// 2. this.this.isActive === truethis.active()}}/*封面上传图片预览 */function getBase64(file) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => resolve(reader.result);reader.onerror = error => reject(error);});}let editor;export default {data () {return {labelCol: {xs: { span: 24 },sm: { span: 5 },},wrapperCol: {xs: { span: 24 },sm: { span: 12 },},typeData: [],visible: false,confirmLoading: false,form: this.$form.createForm(this),/*封面上传参数 */previewImage:'',//预览图片地址previewVisible:false,//预览fileList:[],coverimg:'',//存放封面图片地址/*附件上传参数 */refileList:[],/*富文本内容 */content:'',imgKey: '',// 附件路径filepath:'',}},mounted(){},watch: {visible() {if (this.visible) {this.imgKey = ''} else {this.imgKey = Math.random()}}},methods: {// 初始化方法add (record) {this.visible = trueconst typeOption = this.$optionsthis.typeData = typeOption.filters['dictData']('knowledge_type')this.$nextTick(() =>{if (editor==null){this.initialEditor()}else {editor.destroy();//判断编辑器是否被创建，如果创建了就先销毁。this.initialEditor()}})},/*富文本编辑器初始化 */initialEditor(){// 菜单 key ，各个菜单不能重复const menuKey = 'alertMenuKey' editor = new E('#editor')// editor.txt.clear()  //清空富文本的内容editor.menus.extend(menuKey, AlertMenu)editor.config.menus.push(menuKey)editor.config.height = 300const that = this;// 图片editor.config.customUploadImg = function (resultFiles, insertImgFn) {// resultFiles 是 input 中选中的文件列表// insertImgFn 是获取图片 url 后，插入到编辑器的方法console.log(resultFiles[0],'...');const formData = new FormData();formData.append('file', resultFiles[0]);formData.append('type', 'image');that.axios.post('/sysFileInfo/upload',formData).then(res => {console.log(res);if(res.success){// 上传图片，返回结果，将图片插入到编辑器中insertImgFn(res.data)}}).catch(err =>{})}// 视频editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {const formData = new FormData();formData.append('file', resultFiles[0]);formData.append('type', 'image');console.log(formData);that.axios.post('/sysFileInfo/upload',formData).then(res => {if(res.success){// 上传视频，返回结果，将图片插入到编辑器中insertVideoFn(res.data)}}).catch(err =>{})}editor.config.excludeMenus = ['link']// 注意，先配置 height ，再执行 create()editor.create()},/*封面上传*///控制图片预览显示 imghandleCancel() {this.previewVisible = false;},// 在上传之前做出判断beforeImg(file){console.log('tupian',file);const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';if (!isJpgOrPng) {this.$message.error('只能上传图片文件,请重新上传');const index = this.fileList.indexOf(file);const newFileList = this.fileList.slice();newFileList.splice(index, 1);this.fileList = newFileList;return false}},// 上传uploadMethod(file){let image = "image"const formData = new FormData();formData.append('file', file.file);formData.append('type', image);this.axios.post('/sysFileInfo/upload',formData).then(res => {console.log(res);if(res.success){this.coverimg = res.datafile.onSuccess();}}).catch(err =>{file.onError() //上传失败})},// 预览async handlePreview(file) {if (!file.url && !file.preview) {file.preview = await getBase64(file.originFileObj);}this.previewImage = file.url || file.preview;this.previewVisible = true;},handleChange({ fileList }) {this.fileList = fileList},/*附件上传*/// 移除handleRemove(file) {const index = this.refileList.indexOf(file);const newFileList = this.refileList.slice();newFileList.splice(index, 1);this.refileList = newFileList;},// 上传之前的限制beforeUpload(file){console.log('file',file);if(this.refileList.length === 0){this.refileList = [...this.refileList, file];}else{this.$message.error('仅支持上传一个文件');}},//上传fileUpload(){const formData = new FormData();if(this.refileList.length){this.refileList.forEach(file => {formData.append('file', file);formData.append('type', 'image');});this.axios.post('/sysFileInfo/upload',formData).then(res => {console.log(res);if(res.success){this.filepath = res.data}}).catch((err => {this.$message.error('上传失败');}))}},/*** 提交表单*/handleSubmit () {const { form: { validateFields } } = thisthis.confirmLoading = trueconsole.log('富文本内容',editor.txt.html());this.content = editor.txt.html()validateFields((errors, values) => {if (!errors) {for (const key in values) {if (typeof (values[key]) === 'object') {values[key] = JSON.stringify(values[key])}}values.coverimg = this.coverimgvalues.content = this.contentvalues.filepath = this.filepathknowledgeBaseAdd(values).then((res) => {if (res.success) {this.$message.success('新增成功')this.confirmLoading = falsethis.$emit('ok', values)this.handleCancel()} else {this.$message.error('新增失败')// + res.message}}).finally((res) => {this.confirmLoading = false})} else {this.confirmLoading = false}})},handleCancel () {this.form.resetFields()this.visible = falsethis.refileList = []this.fileList = []}}}
</script>
<style lang="less" scoped>
.accessory-text{position: absolute;left: 0;bottom: 0;
}
.ant-upload-select-picture-card i {font-size: 32px;color: #999;
}.plus{font-size: 100px;color: #dfdfdf;width: 20px;height: 20px;}
.ant-upload-select-picture-card .ant-upload-text {margin-top: 8px;color: #666;
}
</style>

②

具体代码：重点 v-html

Markup

<a-modaltitle="":width="900":footer="null":visible="detailVisible":confirmLoading="confirmLoading"@cancel="detailHandleCancel"style="height: auto;"><div class="content-box"><h1>{{headline}}</h1><div class="content-info"><span>时间：{{time}}</span><span>来源：{{source}}</span><span>分类：{{classify}}</span></div><div class="content" v-html="content"></div><div class="footer" v-show="accessory == '' ? false : true "><span>附件：<span class="sub" @click="fileDownLoad"><a-icon type="paper-clip" />{{classify}}附件</span></span></div></div></a-modal>

③

具体代码：重点：初始化编辑器内容

editor.txt.html(this.content)

Markup

<template>  <a-modaltitle="新增知识库":width="900":visible="visible":confirmLoading="confirmLoading"@ok="handleSubmit"@cancel="handleCancel"><a-spin :spinning="confirmLoading"><a-form :form="form"><a-form-item v-show="false"><a-input  v-decorator="['id']" /></a-form-item><a-form-itemlabel="标题":labelCol="labelCol":wrapperCol="wrapperCol"has-feedbackstyle="margin-left:-150px;"><a-input placeholder="请输入标题" v-decorator="['title', {rules: [{required: true, message: '请输入标题！'}]}]" /></a-form-item><a-form-itemlabel="来源":labelCol="labelCol":wrapperCol="wrapperCol"has-feedbackstyle="margin-left:-150px;"><a-input placeholder="请输入来源" v-decorator="['source', {rules: [{required: true, message: '请输入来源！'}]}]" /></a-form-item><a-form-itemlabel="摘要":labelCol="labelCol":wrapperCol="wrapperCol"has-feedbackstyle="margin-left:-150px;"><a-textareaplaceholder="请输入摘要" v-decorator="['summary', {rules: [{required: true, message: '请输入摘要！'}]}]":auto-size="{ minRows: 3}"/></a-form-item><a-form-itemlabel="类型":labelCol="labelCol":wrapperCol="wrapperCol"style="margin-left:-150px;"><a-select style="width: 100%" placeholder="请选择类型" v-decorator="['type', {rules: [{ required: true, message: '请选择类型' }]}]"><a-select-option v-for="(item,index) in typeData" :key="index" :value="item.code">{{ item.name }}</a-select-option></a-select></a-form-item><a-form-itemlabel="封面":labelCol="labelCol":wrapperCol="wrapperCol"has-feedbackstyle="margin-left:-150px;"><!-- <a-input placeholder="请输入封面" v-decorator="['coverimg']" /> --><div :key="imgKey"><a-uploadlist-type="picture-card":file-list="fileList"@change="handleChange"@preview="handlePreview":before-upload="beforeImg":customRequest="uploadMethod"><div v-if="fileList.length < 1"><a-icon type="plus" /><div class="ant-upload-text">上传封面</div></div></a-upload></a-upload></div><a-modal :visible="previewVisible" :footer="null" @cancel="imghandleCancel"><img alt="example" style="width: 100%" :src="previewImage" /></a-modal></a-form-item><a-form-itemlabel="内容":labelCol="labelCol":wrapperCol="wrapperCol"style="margin-left:-150px;"><div id="editor" style="width:810px;"></div><div class="accessory" style="margin-left:-35px;position: relative;"><span >附件:&nbsp;</span><a-upload :file-list="refileList":before-upload="beforeUpload":customRequest="fileUpload":remove="handleRemove"><a-button v-show="false" style="width: 220px;" id="tiggerPick"> <a-icon type="upload" />  请选择文件资源 </a-button></a-upload></div></a-form-item><!-- <a-form-itemlabel="附件路径":labelCol="labelCol":wrapperCol="wrapperCol"has-feedback><a-input placeholder="请输入附件路径" v-decorator="['filepath']" /></a-form-item><a-form-itemlabel="排序":labelCol="labelCol":wrapperCol="wrapperCol"has-feedback><a-input placeholder="请输入排序" v-decorator="['sort']" /></a-form-item> --> </a-form></a-spin></a-modal>
</template><script>import "@/components/bottomReset.less"import "@/components/subfile.less"import { knowledgeBaseEdit } from '@/api/modular/main/knowledgebase/knowledgeBaseManage'import E from 'wangeditor'const { BtnMenu } = Eclass AlertMenu extends BtnMenu {constructor(editor) {// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述const $elem = E.$(`<div class="w-e-menu" data-title="上传附件"><a-button style="width: 40px;height: 40px;">附件</a-button></div>`)super($elem, editor)}// 菜单点击事件clickHandler() {// 做任何你想做的事情document.getElementById("tiggerPick").click();}// 菜单是否被激活（如果不需要，这个函数可以空着）tryChangeActive() {// 激活菜单// 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class// 2. this.this.isActive === truethis.active()}}/*封面上传图片预览 */function getBase64(file) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => resolve(reader.result);reader.onerror = error => reject(error);});}let editor;export default {data () {return {labelCol: {xs: { span: 24 },sm: { span: 5 },},wrapperCol: {xs: { span: 24 },sm: { span: 12 },},typeData: [],visible: false,confirmLoading: false,form: this.$form.createForm(this),/*封面上传参数 */previewImage:'',//预览图片地址previewVisible:false,//预览fileList:[],coverimg:'',//存放封面图片地址/*附件上传参数 */refileList:[],/*富文本内容 */content:'',imgKey: '',// 附件路径filepath:'',}},mounted(){},watch: {visible() {if (this.visible) {this.imgKey = ''} else {this.imgKey = Math.random()}}},methods: {// 初始化方法edit (record) {console.log(record);this.visible = trueconst typeOption = this.$optionsthis.typeData = typeOption.filters['dictData']('knowledge_type')if(record.type == 1){record.type = '危化百科'}else if(record.type == 2){record.type = '安全流程'}else if(record.type == 3){record.type = '企业安全制度管理模板'}setTimeout(() => {this.form.setFieldsValue({id: record.id,title: record.title,source: record.source,summary: record.summary,type: record.type,coverimg: record.coverimg,content: record.content,filepath: record.filepath,sort: record.sort})}, 100)this.fileList.push({  uid: '-1',name: 'image.png',status: 'done',url: record.coverimg})this.coverimg = record.coverimgthis.content = record.contentthis.filepath = record.filepaththis.refileList.push({  uid: '-1',name: 'file.doc',status: 'done',url: record.filepath})this.$nextTick(() =>{if (editor==null){this.initialEditor()}else {editor.destroy();//判断编辑器是否被创建，如果创建了就先销毁。this.initialEditor()}})},/*富文本编辑器初始化 */initialEditor(){// 菜单 key ，各个菜单不能重复const menuKey = 'alertMenuKey' editor = new E('#editor')// editor.txt.clear()  //清空富文本的内容editor.menus.extend(menuKey, AlertMenu)editor.config.menus.push(menuKey)editor.config.height = 300const that = this;// 图片editor.config.customUploadImg = function (resultFiles, insertImgFn) {// resultFiles 是 input 中选中的文件列表// insertImgFn 是获取图片 url 后，插入到编辑器的方法console.log(resultFiles[0],'...');const formData = new FormData();formData.append('file', resultFiles[0]);formData.append('type', 'image');that.axios.post('/sysFileInfo/upload',formData).then(res => {console.log(res);if(res.success){// 上传图片，返回结果，将图片插入到编辑器中insertImgFn(res.data)}}).catch(err =>{})}// 视频editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {const formData = new FormData();formData.append('file', resultFiles[0]);formData.append('type', 'image');console.log(formData);that.axios.post('/sysFileInfo/upload',formData).then(res => {if(res.success){// 上传视频，返回结果，将图片插入到编辑器中insertVideoFn(res.data)}}).catch(err =>{})}editor.config.excludeMenus = ['link']// 注意，先配置 height ，再执行 create()editor.create()editor.txt.html(this.content) // 初始化编辑器内容},/*封面上传*///控制图片预览显示 imghandleCancel() {this.previewVisible = false;},// 在上传之前做出判断beforeImg(file){console.log('tupian',file);const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';if (!isJpgOrPng) {this.$message.error('只能上传图片文件,请重新上传');const index = this.fileList.indexOf(file);const newFileList = this.fileList.slice();newFileList.splice(index, 1);this.fileList = newFileList;return false}},// 上传uploadMethod(file){let image = "image"const formData = new FormData();formData.append('file', file.file);formData.append('type', image);this.axios.post('/sysFileInfo/upload',formData).then(res => {console.log(res);if(res.success){this.coverimg = res.datafile.onSuccess();}}).catch(err =>{file.onError() //上传失败})},// 预览async handlePreview(file) {if (!file.url && !file.preview) {file.preview = await getBase64(file.originFileObj);}this.previewImage = file.url || file.preview;this.previewVisible = true;},handleChange({ fileList }) {this.fileList = fileList},/*附件上传*/// 移除handleRemove(file) {const index = this.refileList.indexOf(file);const newFileList = this.refileList.slice();newFileList.splice(index, 1);this.refileList = newFileList;},// 上传之前的限制beforeUpload(file){console.log('file',file);if(this.refileList.length === 0){this.refileList = [...this.refileList, file];}else{this.$message.error('仅支持上传一个文件');}},//上传fileUpload(){const formData = new FormData();if(this.refileList.length){this.refileList.forEach(file => {formData.append('file', file);formData.append('type', 'image');});this.axios.post('/sysFileInfo/upload',formData).then(res => {console.log(res);if(res.success){this.filepath = res.data}}).catch((err => {this.$message.error('上传失败');}))}},/*** 提交表单*/handleSubmit () {const { form: { validateFields } } = thisthis.confirmLoading = trueconsole.log('富文本内容',editor.txt.html());this.content = editor.txt.html()validateFields((errors, values) => {if (!errors) {for (const key in values) {if (typeof (values[key]) === 'object') {values[key] = JSON.stringify(values[key])}}values.coverimg = this.coverimgvalues.content = this.contentvalues.filepath = this.filepathif(values.type == '危化百科'){values.type = 1}else if(values.type == '安全流程'){values.type = 2}else if(values.type == '企业安全制度管理模板'){values.type = 3}delete values.createtimeknowledgeBaseEdit(values).then((res) => {if (res.success) {this.$message.success('新增成功')this.confirmLoading = falsethis.$emit('ok', values)this.handleCancel()} else {this.$message.error('新增失败')// + res.message}}).finally((res) => {this.confirmLoading = false})} else {this.confirmLoading = false}})},handleCancel () {this.form.resetFields()this.visible = falsethis.refileList = []this.fileList = []}}}
</script>
<style lang="less" scoped>
.accessory-text{position: absolute;left: 0;bottom: 0;
}
.ant-upload-select-picture-card i {font-size: 32px;color: #999;
}.plus{font-size: 100px;color: #dfdfdf;width: 20px;height: 20px;}
.ant-upload-select-picture-card .ant-upload-text {margin-top: 8px;color: #666;
}
</style>

wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用相关推荐

wangeditor支持图片和视频上传
最近在搞王编辑器 ,但是却不支持视频上传.只能自己去修改源代码.将上传图片变为可支持的上传视频. 如果觉得麻烦可以安装我的版本.如果已经安装过请先卸载之前的版本 npm uninstall wa ...
Avue2 wangeditor(富文本) 支持视频上传
1.默认效果 2.修改后的效果 3.具体步骤如下 3.1 源码copy到我们的组件模块下,删掉无用代码,结构如下 3.2 修改项目引用,直接引用我们本地组件 import AvueUeditor fr ...
vue项目引入富文本编辑，图片上传/视频上传
1:下载富文本和更改图片大小 npm install quill-image-resize-module --save//更改img图片大小 npm install vue-quill-editor ...
如何不通过网络把电脑上的视频上传到手机端
平时想要把电脑上的一小段视频快速的保存到手机上,咱们普通人的第一印象肯定是通过网络在线传输,比如通过QQ,微信,钉钉阿之类的一些社交软件和办公软件然后在通过社交软件把视频保存到自己手机上.那么大家应该 ...
yii2.0使用ueditior完成上传单张，多张图片，上传视频等操作
一.前言由于工作需求需要集成富文本编辑器,本来是想要选用之前用过的WangEditor的,但是考虑到WangEditor还是比较小众,所以最终选择了没用过的Uedtor,这篇文章主要讲述了Yii2. ...
织梦后台上传文章的php文件是那个,如何在织梦文章中上传视频及调用视频
在上一篇文章中,我弄好了zblog如何在文章中上传视频和调用视频,那么因为我有很多个站,所以,这篇文章研究一下如何在织梦系统的文章中进行上传视频和调用视频,上传视频的话,一般推荐直接FTP传到自己的服 ...
uniapp-上传图片、上传视频
基于 uniapp 的应用上传图片/视频资源的实现: 功能涉及的主要 uniapp API 如下: 1.选择图片:uni.chooseImage(OBJECT) | uni-app官网 2.选择视频 ...
iOS图片，视频上传视频内容旋转
#前言我最近在接手一个智能盒子的iOS应用,上面有一个功能是这样的.把你本地的照片和视频可以甩屏到你绑定的盒子上. 我的上一位前辈做的时候必须要求再同一个局域网,但是当我做的时候要求不同的局域网也要 ...
php腾讯云+视频上传失败,腾讯云视频上传和播放尝试总结
项目中需要用到腾讯云视频,做了一个完整的流程尝试,总结一下. 基本需求是通过后台管理页面上传视频,然后通过网页,Android和iOS播放视频. 腾讯视频分三大部分:视频上传,视频处理,视频播放,相应 ...

wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用

wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用相关推荐

最新文章

热门文章