wangEditor编辑器 Vue基本配置项

1.Vue安装方法

npm i wangeditor -S

<template>
<div id='wangeditor'>
<div id="editor">
<!-- <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> -->
</div>
<button @click="updata">提交啊</button>
</div>
</template> <script>
import E from "wangEditor";
import 'wangeditor/release/wangEditor.min.css'
// wangEditor配置按钮菜单
const btnmenu = [
'head',//标题
'bold',//粗体
'fontSize',//字号
'fontName',//字体
'italic',//斜体
'undeline',//下划线
'strikeThrough',//删除线
'foreColor',//文字颜色
'backColor',//背景颜色
'link',//插入链接
'list',//列表
'justify',//对齐方式
'quote',//引用
'emoticon',//表情
'image',//插入图片
'table',//表格
'video',//插入视频
'code',//插入代码
'undo', //撤销
'redo', // 重复
]
export default {
name:'wangeditor',
// model:{
// prop:'value',
// event:'change',
// },
// props:{
// value:{
// type:String,
// default:''
// },
// isClear:{
// type:Boolean,
// default:''
// }
// },
data() {
return {
exconten:'',
editor:'',
info:'',
}
},
mounted(){ this.editor = new E('#editor');
// 自定义菜单配置
this.editor.customConfig.menus = btnmenu;
// 配置上传图片为base64
this.editor.customConfig.uploadImgShowBase64=false;
// 配置图片上传服务器
this.editor.customConfig.uploadImgServer='/upload';
// 隐藏“网络图片”tab
this.editor.customConfig.showLinkImg = false
// withCredentials(跨域传递 cookie)
this.editor.customConfig.withCredentials = true;
// 自定义header
this.editor.customConfig.uploadHeader={};
// 后端接收上传文件的参数名
this.editor.customConfig.uploadFileName='';
// 将图片大小限制为2M
this.editor.customConfig.uploadImgMaxSize=2*1024*1024;
// 限制最多上传6张图片
this.editor.customConfig.uploadImgMaxLength=6;
// 设置超时
this.editor.customConfig.uploadImgTimeout=3*60*1000;
// 关闭粘贴样式的过滤
this.editor.customConfig.pasteFilterStyle = false;
// 忽略粘贴内容中的图片
this.editor.customConfig.pasteIgnoreImg = true;
// 自定义处理粘贴的文本内容
this.editor.customConfig.pasteTextHandle = function (content) {
// content 即粘贴过来的内容(html 或 纯文本),可进行自定义处理然后返回
// return content + '<p>在粘贴内容后面追加一行</p>'
return content;
}
// url 即插入图片的地址(插入网络图片的回调)
this.editor.customConfig.linkImgCallback = function (url) {
console.log(url)
}
// 插入链接的校验
this.editor.customConfig.linkCheck = function (text, link) {
console.log(text) // 插入的文字
console.log(link) // 插入的链接
return true // 返回 true 表示校验成功
// return '验证失败' // 返回字符串,即校验失败的提示信息
}
// 插入网络图片的校验
this.editor.customConfig.linkImgCheck = function (src) {
console.log(src) // 图片的链接
return true // 返回 true 表示校验成功
// return '验证失败' // 返回字符串,即校验失败的提示信息
}
// 创建富文本编辑器
this.editor.create()
// 获取富文本内容
this.editor.txt.html();
// 编辑区域的z-index默认为100
this.editor.customConfig.zIndex = 100;
// 图片上传回调
this.editor.customConfig.uploadImgHooks={
fail:(xhr,editor,result)=>{/**插入图片回调失败 */},
success:(xhr,editor,result)=>{/**图片上传成功回调 */},
timeout:(xhr,editor,result)=>{/**网络超时回调 */},
error:(xhr,editor,result)=>{/**图片上传错误回调 */},
customInsert:(insertImg,result,editor)=>{/**图片上传成功,插入图片回调 */}
}
// 上传图片的错误提示默认使用alert弹出,你也可以自定义用户体验更好的提示方式
this.editor.customConfig.customAlert = function (info) {
// info 是需要提示的内容
alert('自定义提示:' + info);
console.log(info);
}
this.editor.customConfig.customUploadImg = function (files, insert) {
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后,插入到编辑器的方法 // 上传代码返回结果之后,将图片插入到编辑器中
insert(imgUrl)
}
// 监听实时富文本输入内容
// this.editor.customConfig.onchange=(html)={
// let info=html;
// this.$emit('change',info);
// }
},
methods:{
updata(){
alert(this.editor.txt.html());
this.editor.txt.html('');
}
},
// watch:{
// isClear(val){
// // 触发清除文本域内容
// if(val){
// this.editor.txt.clear();
// this.info = '';
// }
// },
// value(val){
// // 使用v-model时,设置初始值
// this.editor.txt.html(val);
// }
// }
}
</script> <style> </style>

  

wangEditor编辑器 Vue基本配置项的更多相关文章

  1. Java web 引入wangEditor编辑器

    最近项目需要我做些前端的事,这让我这个半吊子前端很是痛苦.项目中需要一个编辑器,之前找了个ueditor,插件比较多,需要改源码等等不说,最后弄好了,发现需要flash插件.没办法,只有推到重来,在网 ...

  2. PHP UEditor富文本编辑器 显示 后端配置项没有正常加载,上传插件不能正常使用

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 问题描述 我的编辑器在本地测试的时候没问 ...

  3. 修改vue的配置项支持生产环境下二级目录访问的方法

    本文主要记录如何配置vue的打包文件配置项,使打包后的文件可以支持二级目录的访问. 1.常规打包 在实际的项目中,我们通常都使用 npm run build 直接打包文件后丢到服务器上访问 打包后的文 ...

  4. wangEditor编辑器中解析html图文信息问题

    在JS中,有一种方法:innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML. 也就是说,我们可以利用这个属性,把字符串转换为html代码,这样就可以被解析了. 其次,我们是需要在页 ...

  5. 集成百度编辑器 ueditor 后端配置项没有正常加载,上传插件不能正常使用!

    项目要用到编辑器,于是集成了ueditor,集成ok,但一直显示 ‘’后端配置项没有正常加载,上传插件不能正常使用!‘’ 各种查: 网上说的无非就是那么集中情况 1. 因为百度官方的问题,php/co ...

  6. 前端富文本编辑器vue + tinymce

    之前有项目需要用到富文本编辑器,在网上找了好几个后,最终选择了这个功能强大,扩展性强的tinymce tinymce中文文档地址(不全):http://tinymce.ax-z.cn/ tinymce ...

  7. vue 函数配置项watch以及函数 $watch 源码分享

    Vue双向榜单的原理     大家都知道Vue采用的是MVVM的设计模式,采用数据驱动实现双向绑定,不明白双向绑定原理的需要先补充双向绑定的知识,在watch的处理中将运用到Vue的双向榜单原理,所以 ...

  8. wangEditor编辑器控件里textarea的id不要用content

    头引用 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></scri ...

  9. 一款好用的wangEditor编辑器

    文档:https://www.kancloud.cn/wangfupeng/wangeditor3/332599

随机推荐

  1. 什么是vue

    1. 什么是vue.js? 1.1.vue.js是目前最火的一个前端框架,和Angular.js.React.js并称为前端三大主流框架. 1.2.Vue.js是有一套构建用户界面的框架,只关注视图层 ...

  2. web服务-3、epoll高效率实现并发服务器

    知识点: 之前写的四种方法实现并发服务效率都还是低,早期的服务器采用的是select和poll方式,select这种方式的特点是轮询所有套接字去一个个看有没有事件发生,但是装套接字的列表长度是有限制的 ...

  3. Python线性表——单链表

    1. 线性表简介 线性表是一种线性结构,它是由零个或多个数据元素构成的有限序列.线性表的特征是在一个序列中,除了头尾元素,每个元素都有且只有一个直接前驱,有且只有一个直接后继,而序列头元素没有直接前驱 ...

  4. Linux bash基础特性二

    shell脚本的组成部分 shebang 各种命令组合 编程变量种类 本地变量: 仅仅在当前的shell生效 环境变量: 在当前和子shell生效 局部变量: shell进程某代码片段 位置变量: $ ...

  5. 移动端滑动效果 swiper 4.0.7

    <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...

  6. 报错!!!Servlet.service() for servlet [action] in context with path [/myssh] threw exception [java.lang.NullPointerException] with root cause java.lang.NullPointerException

    这个为什么报错啊~~ at com.hsp.basic.BasicService.executeQuery(BasicService.java:33) 这个对应的语句是   Query query = ...

  7. ELK 5.5.0 安装

    Preparation 假设当前为root用户,并已有jdk1.8环境. cd /opt/package useradd sealion ElasticSearch wget https://arti ...

  8. Web版记账本开发记录(一)代码和功能展示

    一丶基本机构 数据库截图 record表 年份表 index.jsp <%@ page language="java" contentType="text/html ...

  9. 加密传输:每位数字+6,然后用除以9的余数代替该数字, 在把第一位和第四位交换,第二位和第三位交换,例如3276->3840

    /** * @author:(LiberHome) * @date:Created in 2019/3/6 10:00 * @description: * @version:$ */ /*今日目标:5 ...

  10. corefx 源码学习:SqlClient 是如何同步建立 Socket 连接的

    在昨天的技术周会上发现 EnyimMemcached 中建立 Socket 连接的代码有问题,今天坐车的时候在手机上阅读 .net core 2.2 的 SqlClient 中同步建立 Socket ...