WangEdit富文本编辑器增加上传视频功能

乘着今天中午的时间对以前项目的一个需求进行一定的处理

前天去了甲方公司

接到了了一个新的需求

就是可以把项目的一个富文本的编辑器可以设置为能够上传视频

于是乎

就要对vue里面的这个组件进行操作了

首先我们可以看一眼官网的文档

需要用到的就直接到官网文档进行查询即可了

需求（接口文档）

由于官网的的文档是对原生js进行说明的

所以vue的写法就可以这样先写了、

代码部分(封装子组件)

<template lang="html"><div class="editor"><!--定义的为表头的属性--><div ref="toolbar" class="toolbar"></div><!--定义的为表格的属性--><div ref="editor" class="text" ></div></div>
</template>
<script>
/*引入王edit插件*/
import E from 'wangeditor'
import {ACCESS_TOKEN} from "@/store/KeyConstants";
/*开始引入Vue的模块*/
import Vue from "vue";
export default {name: 'EditorBar',data() {return {editor: null,info_: null,UploadVidio:'',}},model: {prop: 'value',event: 'change'},props: {value: {type: String,default: ''},isClear: {type: Boolean,default: false},setMode:{type:Boolean,request:true}},watch: {isClear(val) {// 触发清除文本域内容if (val) {this.editor.txt.clear()this.info_ = null}},value: function(value) {if (value !== this.editor.txt.html()) {this.editor.txt.html(this.value)}},//value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值},created() {/*控制上传图片的逻辑*/this.$nextTick(()=>{this.seteditor()this.editor.txt.html(this.value)})},methods: {seteditor() {const token = Vue.ls.get(ACCESS_TOKEN);/*选中对应的元素*/this.editor = new E(this.$refs.toolbar, this.$refs.editor)/*设置存储照片的格式*/// this.editor.config.uploadImgShowBase64 = true // base 64 存储图片this.editor.config.uploadVideoServer = 't.com/api/v1/upload/picture'// 配置服务器端地址// 自定义 headerthis. editor.config.uploadVideoHeaders = {'Authorization': `Bearer ` + token}this.editor.config.uploadVideoName = 'file'//后端接收上传文件的参数名（这是配置视频）this.editor.config.uploadImgServer = '.com/api/v1/upload/picture'// 配置服务器端地址// 自定义 headerthis.editor.config.uploadImgHeaders = {'Authorization': `Bearer ` + token}this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名（这是配置图片）this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2Mthis.editor.config.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间// 配置菜单this.editor.config.menus = ['head', // 标题'bold', // 粗体'fontSize', // 字号'fontName', // 字体'italic', // 斜体'underline', // 下划线'strikeThrough', // 删除线'foreColor', // 文字颜色'backColor', // 背景颜色'link', // 插入链接'list', // 列表'justify', // 对齐方式'quote', // 引用'emoticon', // 表情'image', // 插入图片'table', // 表格'video', // 插入视频'code', // 插入代码'undo', // 撤销'redo', // 重复'fullscreen' // 全屏]//上传图片的回调this.editor.config.uploadImgHooks = {fail: (xhr, editor, result) => {// 插入图片失败回调},success: (xhr, editor, result) => {// 图片上传成功回调},timeout: (xhr, editor) => {// 网络超时的回调},error: (xhr, editor) => {// 图片上传错误的回调},customInsert: (insertImg, result, editor) => {// 图片上传成功，插入图片的回调//result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]//insertImg()为插入图片的函数//循环插入图片// for (let i = 0; i < 1; i++) {// postAction('/content/picture',{file})let url =  result.dataconsole.log(url)insertImg(url)// }}}this.editor.config.onchange = (html) => {this.info_ = html // 绑定当前逐渐地值this.$emit('ChangePicture', this.info_) // 将内容同步到父组件中}// 视频上传
/*      this.editor.config.uploadVideoServer ="http://otp.cdinfotech.top/file/upload_images"; // 上传接口this.editor.config.uploadVideoParams = {"Content-Type": "multipart/form-data; boundary=----WebKitFormBoundarycZm1pHksXeHS6t5r"}*/
/*      this.editor.config.uploadVideoHooks = {// 上传完成处理方法customInsert: function (insertVideo, result) {if (result.code == 0) {(result.data || "").split(",").forEach(function (link) {link && insertVideo(link);});} else {/!* flavrShowByTime("上传失败", null, "danger");*!/}},};*///上传视频的回调this.editor.config.uploadVideoHooks = {// 上传视频之前
/*        before: function(xhr) {console.log(xhr)// 可阻止视频上传return {prevent: true,msg: '需要提示给用户的错误信息'}},*/// 视频上传并返回了结果，视频插入已成功success: function(xhr) {console.log('success', xhr)},// 视频上传并返回了结果，但视频插入时出错了fail: function(xhr, editor, resData) {console.log('fail', resData)},// 上传视频出错，一般为 http 请求的错误error: function(xhr, editor, resData) {console.log('error', xhr, resData)},// 上传视频超时timeout: function(xhr) {console.log('timeout')},// 视频上传并返回了结果，想要自己把视频插入到编辑器中// 例如服务器端返回的不是 { errno: 0, data: { url : '.....'} } 这种格式，可使用 customInsertcustomInsert: function(insertVideoFn, result) {// result 即服务端返回的接口console.log('customInsert', result)// insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可//result.data 就是url的值insertVideoFn(result.data)}}this.editor.create()}}
}
</script><style lang="css">
.editor {width: 100%;margin: 0 auto;position: relative;z-index: 0;
}
.toolbar {border: 1px solid #ccc;
}
.text {border: 1px solid #ccc;min-height: 500px;
}
</style>

这边直接上代码以后用到富文本可以直接使用

就很nice

我是歌谣这部分支队wangEdit使用有效放弃很容易但是坚持一定很酷

WangEdit富文本编辑器增加上传视频功能相关推荐

富文本编辑器图片上传失败的BUG解决：IndexError：list index out of range
富文本编辑器图片上传失败的BUG解决问题原因我们将通过Django上传的图片保存到了FastDFS中,而保存在FastDFS中的文件名没有后缀名(.png/.jpg/.jif),而ckeditor ...
layui富文本编辑器上传图片java_解决layui富文本编辑器图片上传无法回显的问题...
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
layui富文本编辑器图片上传无法回显问题解决
layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问 ...
php 编辑器插入视频,织梦dedecms默认编辑器实现上传视频功能
织梦默认的编辑器采用的是ckeditor厂商提供的,只可以上传Flash,今天我们进行二次改进,使之可以上传视频文件如MP4文件进行播放,方法比较简单,无需去更换编辑器,下面就言归正传. 第一步:后台 ...
wangeditor 请求头_wangEditor编辑器添加上传视频功能
正在帮一个朋友的项目进行一些修改,该项目中使用的是 wangEditor 富文本编辑器. 该编辑器的上传视频有个缺陷,不能手动上传,这是目前的效果图朋友要求加一个上传视频的功能. 网上的解决方案的文 ...
wangeditor富文本编辑器添加上传本地视频功能
wangeditor.js全部代码(可选择复制) (function (global, factory) {typeof exports === 'object' && typeof ...
vue项目 vue-quill-editor富文本编辑器+图片上传
目录基础使用: 进阶版: 使用 el-upload 图片上传: 进阶版2.0: 可拖动调整图片大小: 基础使用: 富文本编辑器: 此方法得到的图片为base64编码,图片上传在下面. npm ins ...
SSM+KindEditor实现富文本编辑器图片上传
场景 KindEitor官方文档: http://kindeditor.net/demo.php 实现效果下载Kindeditor 下载地址: http://kindeditor.net/down ...
springboot整合H+,基于summernote的富文本编辑器图片上传
我在做这块任务时遇到了好几个问题,也查了一些资料,自己总结的一些东西,希望可以帮到一些有需要的朋友,废话不多说开始看代码. 首先看前台页面: 需要注意的是summernote的默认图片上传是base6 ...

WangEdit富文本编辑器增加上传视频功能

需求（接口文档）

代码部分(封装子组件)

WangEdit富文本编辑器增加上传视频功能相关推荐

最新文章

热门文章