自定义表情
最后更新于:2022-04-01 23:41:33
从v2.1.0
版本开始,wangEditor支持使用表情包的方式来配置表情图片。此前需要一个一个配置表情图片的方式,我自己都觉得很难受,好在现在已经OK了。
第一,表情包是什么鬼?
这里的表情包,其实就是一段js
代码,总体看来是一个数组,数组内的每个元素都是一个对象,格式如下:
// 整体看来是一个数组,数组每个元素都是一个对象
[
{
// icon 的属性值时该表情的图片地址,'icon'这个属性名,也可以用'url'来代替
'icon': 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif',
// value 的属性值是表情的『值』,即通过这个『值』即可对应到某个特定的表情
'value': '[草泥马]'
},
{
'icon': '......',
'value': '...'
},
{
'icon': '......',
'value': '...'
}
]
你还可以参考一下新浪的表情包:https://api.weibo.com/2/emotions.json?source=1362404091 ,还有这个:http://yuncode.net/code/c_524ba520e58ce30
下文中所说的『表情包』需要的就是上述的一段js代码而已。
第二,通过 editor.config.emotions
自定义配置表情
代码如下,注意看注释
var editor = new wangEditor('editor-trigger');
// 配置自定义表情,在 create() 之前配置
editor.config.emotions = {
// 支持多组表情
// 第一组,id叫做 'default'
'default': {
title: '默认', // 组名称
data: './emotions.data' // 服务器的一个json文件url,例如官网这里配置的是 http://www.wangeditor.com/wangEditor/test/emotions.data
},
// 第二组,id叫做'weibo'
'weibo': {
title: '微博表情', // 组名称
data: [ // data 还可以直接赋值为一个表情包数组
// 第一个表情
{
'icon': 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/7a/shenshou_thumb.gif',
'value': '[草泥马]'
},
// 第二个表情
{
'icon': 'http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/60/horse2_thumb.gif',
'value': '[神马]'
}
// 下面还可以继续,第三个、第四个、第N个表情。。。
]
}
// 下面还可以继续,第三组、第四组、、、
};
editor.create();
第三,可以使用 editor.config.emotionsShow
来配置显示方式
编辑器默认情况下将editor.config.emotionsShow
赋值为icon
,你也可以将该配置修改为value
,如下代码:
var editor = new wangEditor('editor-trigger');
// 将显示方式改为 value ,要在 create() 之前修改
editor.config.emotionsShow = 'value';
editor.create();
两者有何区别呢?
当editor.config.emotionsShow = 'icon'
时,插入的表情会显示真正的图片,获取编辑器的源码时,也会是一个图片,如下图:
当editor.config.emotionsShow = 'value'
时,插入的表情会显示value
,获取编辑器的源码时,也会是value
值,如下图:
如果配置的表情图标取不到图片,浏览器的控制台会有错误提示,注意查看。