网站 302重定向 备案,基层建设期刊网站,济宁互联网推广公司,国外开源商城系统乘着今天中午的时间 对以前项目的一个需求进行一定的处理 前天去了甲方公司 接到了了一个新的需求 就是可以把项目的一个富文本的编辑器可以设置为能够上传视频 于是乎 就要对vue里面的这个组件进行操作了 首先我们可以看一眼官网的文档 需要用到的就直接到官网文档进行查询即可… 乘着今天中午的时间 对以前项目的一个需求进行一定的处理 前天去了甲方公司 接到了了一个新的需求 就是可以把项目的一个富文本的编辑器可以设置为能够上传视频 于是乎 就要对vue里面的这个组件进行操作了 首先我们可以看一眼官网的文档 需要用到的就直接到官网文档进行查询即可了 需求接口文档 由于官网的的文档是对原生js进行说明的 所以vue的写法就可以这样先写了、 代码部分(封装子组件)
template langhtmldiv classeditor!--定义的为表头的属性--div reftoolbar classtoolbar/div!--定义的为表格的属性--div refeditor classtext /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()}}
}
/scriptstyle langcss
.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使用有效 放弃很容易 但是坚持一定很酷
