vue wangeditor3封装
<script src="wangEditor/3.1.1/wangEditor.min.js"></script>
Vue.component('my-wangeditor', {
props: ['value'],
data() {
return {
flag: true,
editor: null,
}
},
watch: {
value(val) {
if(this.flag){
//这里初始化的时候赋值
this.editor.txt.html(val);
}
this.flag = true;
}
},
mounted: function () {
const self = this;
let E = window.wangEditor;
self.editor = new E(this.$refs.editorElem); //创建富文本实例
self.editor.customConfig.onchange = (html) => {
this.flag = false;//这里改变绝对不能触发初始化赋值 否者会出现问题
self.$emit('input', html);
};
self.editor.customConfig.uploadImgServer = '图片上传地址';
self.editor.customConfig.uploadFileName = 'file';
self.editor.customConfig.uploadImgMaxSize = 1024 * 1024;// 将图片大小限制为 1M
self.editor.customConfig.uploadImgMaxLength = 1;// 限制一次最多上传 1 张图片
self.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000;// 设置超时时间
// editor.customConfig.uploadImgHeaders = {
// 'Accept': '*/*',
// 'Authorization':'Bearer ' + token //头部token
// };
self.editor.customConfig.menus = [ //菜单配置
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
// 'code', // 插入代码
'undo', // 撤销
'redo' // 重复
];
//下面是最重要的的方法
self.editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件 // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
},
success: function (xhr, editor, result) {
// 图片上传并返回结果,图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
self.imgUrl = Object.values(result.data).toString()
},
fail: function (xhr, editor, result) {
// 图片上传并返回结果,但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
},
timeout: function (xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
}, // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
// (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果 // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
// let url = Object.values(result.data); //result.data就是服务器返回的图片名字和链接
// JSON.stringify(url); //在这里转成JSON格式
insertImg(result.data.location);
// result 必须是一个 JSON 格式字符串!!!否则报错
}
};
self.editor.create();
},
methods: { },
updated() { },
created() { },
destroyed() { },
template: '<div id="wangeditor"><div ref="editorElem" v-model="value" style="text-align:left"></div></div>'
});
使用方法
<my-wangeditor v-model="notes"></my-wangeditor>
vue wangeditor3封装的更多相关文章
- vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证)
vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证): html: <el-form-item label="活动时间" required> & ...
- vue如何封装自己需要的方法
因为现在vue的流行,vue的各种插件都出来了,我们公司也是使用vue做项目,我自己在做项目的时候自己去琢磨了其他的插件以及结合自己对vue和es2015的理解,自己找的了一种在vue中使用封装方法的 ...
- vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...
- vue axios 封装(二)
封装二: http.js import axios from 'axios' import storeHelper from './localstorageHelper' // 全局设置 const ...
- vue Axios 封装与配置项
import axios from "axios"; import qs from "qs"; import { Message } from "el ...
- vue todolist 封装localstorage
//封装操作localstorage本地存储的方法 模块化的文件 // nodejs 基础 var storage={ set(key,value){ localStorage.setItem(key ...
- vue中封装axios方法
axios基本配置 使用方法 import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: proces ...
- Vue 数组封装和组件data定义为函数一些猜测
数组封装 var vm={ list:[0,1] } var push=vm.list.push;//把数组原来的方法存起来 vm.list.push=function(arg){//重新定义数组的 ...
- Vue如何封装多个全局过滤器到一个文件
#### 在写vue项目时,所用的过滤器很多时,把所有的过滤器方法封装在一个文件中,然后导出,并绑定在vue实例上 1.在src下创建filters文件夹,并新建index.js文件 2. index ...
随机推荐
- 实验吧-杂项-啦啦啦(数据包http导出、图片拼接)
比较综合的一道题. 1.数据包数据提取 首先下载数据包,一般数据包都是抓取的一些数据,需要对数据进行分析. 用wireshark打开数据包,筛选出http协议的数据,发现有两个是上传的数据: 我们就看 ...
- spring源码 继承AttributeAccessor的BeanDefinition接口
/** * A BeanDefinition describes a bean instance, which has property values, * constructor argument ...
- 08 SSM整合案例(企业权限管理系统):11.AOP日志
04.AdminLTE的基本介绍 05.SSM整合案例的基本介绍 06.产品操作 07.订单操作 08.权限控制 09.用户和角色操作 10.权限关联 11.AOP日志 11.AOP日志 1.数据库与 ...
- Object.keys(),Object.values(),Object.entries()
(1)Object.keys() // 返回数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名. eg:var obj = {a:1,b:'gy'} Ob ...
- springboot - 映射 HTTP Response Status Codes 到自定义 JSP Error 页面
1.总览 2.代码 1).pom.xml <dependencies> <dependency> <groupId>org.springframework.boot ...
- P 1026 程序运行时间
转跳点:
- 关于javascript中this 指向的4种调用模式
this指向问题绝对可以排js 的top 5最难和最重点的问题,初学者常常搞不清楚this指向哪里,特别是学过java和c#的人,想当年俺也迷糊了好久,直到遇到蝴蝶书,主要是因为js和主流的面向对象语 ...
- java伪代码 (第一章)
在<大道至简>第一章中,周爱民先生引用一则<愚公移山>的寓言,引出了编程的根本:顺序.选择.循环.汤问篇中所述的愚公移山这一事件,我们看到了原始需求的产生---“惩山北之塞,出 ...
- GTK入门
环境准备 官网下载 GTK 源码包,因为本机 GLib 版本不够,下载一个非最新版的 GTK3.8.0 先学习用 直接阅读 "/gtk+-3.8.0/docs/reference/gtk/h ...
- django数据库读写分离
django数据库读写分离 1. 配置数据库 settings.py文件中 用SQLite: DATABASES = { 'default': { 'ENGINE': 'django.db.backe ...