目录
自己项目开发中使用到了WangEditor,记录了部分配置
更详细配置尽在官网:wangEditor3使用手册
自定义菜单
编辑器创建之前,可使用editor.customConfig.menus定义显示哪些菜单和菜单的顺序。注意:v3 版本的菜单不支持换行折叠了(因为换行之后菜单栏是在太难看),如果菜单栏宽度不够,建议精简菜单项。
代码示例
<div id="div1">
<p>欢迎使用 wangEditor 富文本编辑器</p></div>
<script type="text/javascript" src="/wangEditor.min.js"></script><script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
// 自定义菜单配置
editor.customConfig.menus = [
'head',
'bold',
'italic',
'underline'
]
editor.create()</script>
默认菜单
编辑默认的菜单配置如下
[
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复]
粘贴文本
注意,以下配置暂时对 IE 无效。IE 暂时使用系统自带的粘贴功能,没有样式过滤!
关闭粘贴样式的过滤
当从其他网页复制文本内容粘贴到编辑器中,编辑器会默认过滤掉复制文本中自带的样式,目的是让粘贴后的文本变得更加简洁和轻量。用户可通过editor.customConfig.pasteFilterStyle = false手动关闭掉粘贴样式的过滤。
忽略粘贴内容中的图片
从其他页面复制过来的内容,除了包含文字还可能包含图片,这些图片一般都是外域的(可能会有盗链)。此时如果想要忽略图片,即只粘贴文字不粘贴图片,可以使用editor.customConfig.pasteIgnoreImg = true来控制。默认是可以粘贴图片的。
自定义处理粘贴的文本内容
使用者可通过editor.customConfig.pasteTextHandle对粘贴的文本内容进行自定义的过滤、处理等操作,然后返回处理之后的文本内容。编辑器最终会粘贴用户处理之后并且返回的的内容。
示例代码
<div id="div1">
<p>欢迎使用 wangEditor 富文本编辑器</p></div>
<script type="text/javascript" src="/wangEditor.min.js"></script><script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
// 关闭粘贴样式的过滤
editor.customConfig.pasteFilterStyle = false
// 忽略粘贴内容中的图片
editor.customConfig.pasteIgnoreImg = true
// 自定义处理粘贴的文本内容
editor.customConfig.pasteTextHandle = function (content) {
// content 即粘贴过来的内容(html 或 纯文本),可进行自定义处理然后返回
return content + '<p>在粘贴内容后面追加一行</p>'
}
editor.create()</script>
配置字体颜色、背景色
编辑器的字体颜色和背景色,可以通过editor.customConfig.colors自定义配置
<div id="div1">
<p>欢迎使用 wangEditor 富文本编辑器</p></div>
<script type="text/javascript" src="/wangEditor.min.js"></script><script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
// 自定义配置颜色(字体颜色、背景色)
editor.customConfig.colors = [
'#000000',
'#eeece0',
'#1c487f',
'#4d80bf',
'#c24f4a',
'#8baa4a',
'#7b5ba1',
'#46acc8',
'#f9963b',
'#ffffff'
]
editor.create()</script>
配置表情
v3.0.15开始支持配置表情,支持图片格式和 emoji ,可通过editor.customConfig.emotions配置。注意看代码示例中的注释:
<div id="div1">
<p>欢迎使用 wangEditor 富文本编辑器</p></div>
<script type="text/javascript" src="/wangEditor.min.js"></script><script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
// 表情面板可以有多个 tab ,因此要配置成一个数组。数组每个元素代表一个 tab 的配置
editor.customConfig.emotions = [
{
// tab 的标题
title: '默认',
// type -> 'emoji' / 'image'
type: 'image',
// content -> 数组
content: [
{
alt: '[坏笑]',
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
},
{
alt: '[舔屏]',
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
}
]
},
{
// tab 的标题
title: 'emoji',
// type -> 'emoji' / 'image'
type: 'emoji',
// content -> 数组
content: ['?', '?', '?', '?', '?']
}
]
editor.create()</script>
温馨提示:需要表情图片可以去 https://api.weibo.com/2/emotions.json?source=1362404091 和 http://yuncode.net/code/c_524ba520e58ce30 逛一逛,或者自己搜索。
配置字体
编辑器的字体,可以通过editor.customConfig.fontNames自定义配置
<div id="div1">
<p>欢迎使用 wangEditor 富文本编辑器</p></div>
<script type="text/javascript" src="/wangEditor.min.js"></script><script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
// 自定义字体
editor.customConfig.fontNames = [
'宋体',
'微软雅黑',
'Arial',
'Tahoma',
'Verdana'
]
editor.create()</script>
上传图片 & 配置
将图片上传到服务器上的配置方式
提示,如果上传图片提示错误,可以 打开 debug 模式 (会在 console.log 提示错误详细信息)来辅助排查错误。
上传图片
参考如下代码
<div id="div1">
<p>欢迎使用 wangEditor 富文本编辑器</p></div>
<script type="text/javascript" src="/wangEditor.min.js"></script><script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
// 配置服务器端地址
editor.customConfig.uploadImgServer = '/upload'
// 进行下文提到的其他配置
// ……
// ……
// ……
editor.create()</script>
其中/upload是上传图片的服务器端接口,接口返回的数据格式如下(实际返回数据时,不要加任何注释!!!)
{
// errno 即错误代码,0 表示没有错误。
// 如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
"errno": 0,
// data 是一个数组,返回若干图片的线上地址
"data": [
"图片1地址",
"图片2地址",
"……"
]}
限制图片大小
默认限制图片大小是 5M
// 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
限制一次最多能传几张图片
默认为 10000 张(即不限制),需要限制可自己配置
// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 5
自定义上传参数
上传图片时可自定义传递一些参数,例如传递验证的token等。参数会被添加到formdata中。
editor.customConfig.uploadImgParams = {
// 如果版本 <=v3.1.0 ,属性值会自动进行 encode ,此处无需 encode
// 如果版本 >=v3.1.1 ,属性值不会自动 encode ,如有需要自己手动 encode
token: 'abcdef12345'}
如果还需要将参数拼接到 url 中,可再加上如下配置
editor.customConfig.uploadImgParamsWithUrl = true
自定义 fileName
上传图片时,可自定义filename,即在使用formdata.append(name, file)添加图片文件时,自定义第一个参数。
editor.customConfig.uploadFileName = 'yourFileName'
自定义 header
上传图片时刻自定义设置 header
editor.customConfig.uploadImgHeaders = {
'Accept': 'text/x-json'}
withCredentials(跨域传递 cookie)
跨域上传中如果需要传递 cookie 需设置 withCredentials
editor.customConfig.withCredentials = true
自定义 timeout 时间
默认的 timeout 时间是 10 秒钟
// 将 timeout 时间改为 3s
editor.customConfig.uploadImgTimeout = 3000
监听函数
可使用监听函数在上传图片的不同阶段做相应处理
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 是服务器端返回的结果
},
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:'....'} 这种格式,即可这样插入图片:
var url = result.url
insertImg(url)
// result 必须是一个 JSON 格式字符串!!!否则报错
}
}}
自定义提示方法
上传图片的错误提示默认使用alert弹出,你也可以自定义用户体验更好的提示方式
editor.customConfig.customAlert = function (info) {
// info 是需要提示的内容
alert('自定义提示:' + info)}
自定义上传图片事件
如果想完全自己控制图片上传的过程,可以使用如下代码
editor.customConfig.customUploadImg = function (files, insert) {
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后,插入到编辑器的方法
// 上传代码返回结果之后,将图片插入到编辑器中
insert(imgUrl)}