vue使用wangeditor自定义表情替换QQ表情

wangEditor的使用手册https://www.kancloud.cn/wangfupeng/wangeditor3/342612

npm 安装就不说了，不指定版本就是最新的，现在是3

ps: 每个版本的使用都不太一样，我现在用的是3,这款编辑器主要是用了这个属性contenteditable="true"，不懂得话自行百度

效果图：

vue 页面：

<template><div><div ref="editorElem" style="text-align:left"></div></div>
</template><script>
import E from 'wangeditor'
import emojiJSON from '@/constants/emoji.json'
export default {name: 'EditorElem',data () {return {editor: '',editorContent: '',emojiList: emojiJSON}},mounted () {this.editor = new E(this.$refs.editorElem)this.editor.customConfig.emotions = [{title: '默认',type: 'image',content: this.emojiList}]this.editor.customConfig.onchange = function (html) {console.log(html)}this.editor.customConfig.menus = ['emoticon']this.editor.create()},methods: {getContent () {console.log(this.editor)// console.log(this.editor.$txt.html())// console.log(this.editor.$txt.formatText())}}
}
</script>

json文件：

[{"alt": "[微笑]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/0.gif"
}, {"alt": "[撇嘴]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/1.gif"
}, {"alt": "[色]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/2.gif"
}, {"alt": "[发呆]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/3.gif"
}, {"alt": "[得意]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/4.gif"
}, {"alt": "[流泪]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/5.gif"
}, {"alt": "[害羞]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/6.gif"
}, {"alt": "[闭嘴]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/7.gif"
}, {"alt": "[睡]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/8.gif"
}, {"alt": "[大哭]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/9.gif"
}, {"alt": "[尴尬]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/10.gif"
}, {"alt": "[发怒]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/11.gif"
}, {"alt": "[调皮]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/12.gif"
}, {"alt": "[呲牙]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/13.gif"
}, {"alt": "[惊讶]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/14.gif"
}, {"alt": "[难过]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/15.gif"
}, {"alt": "[酷]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/16.gif"
}, {"alt": "[冷汗]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/17.gif"
}, {"alt": "[抓狂]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/18.gif"
}, {"alt": "[吐]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/19.gif"
}, {"alt": "[偷笑]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/20.gif"
}, {"alt": "[愉快]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/21.gif"
}, {"alt": "[白眼]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/22.gif"
}, {"alt": "[傲慢]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/23.gif"
}, {"alt": "[饥饿]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/24.gif"
}, {"alt": "[困]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/25.gif"
}, {"alt": "[惊恐]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/26.gif"
}, {"alt": "[流汗]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/27.gif"
}, {"alt": "[憨笑]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/28.gif"
}, {"alt": "[悠闲]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/29.gif"
}, {"alt": "[奋斗]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/30.gif"
}, {"alt": "[咒骂]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/31.gif"
}, {"alt": "[疑问]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/32.gif"
}, {"alt": "[嘘]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/33.gif"
}, {"alt": "[晕]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/34.gif"
}, {"alt": "[疯了]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/35.gif"
}, {"alt": "[哀]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/36.gif"
}, {"alt": "[骷髅]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/37.gif"
}, {"alt": "[敲打]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/38.gif"
}, {"alt": "[再见]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/39.gif"
}, {"alt": "[擦汗]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/40.gif"
}, {"alt": "[抠鼻]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/41.gif"
}, {"alt": "[鼓掌]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/42.gif"
}, {"alt": "[糗大了]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/43.gif"
}, {"alt": "[坏笑]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/44.gif"
}, {"alt": "[左哼哼]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/45.gif"
}, {"alt": "[右哼哼]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/46.gif"
}, {"alt": "[哈欠]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/47.gif"
}, {"alt": "[鄙视]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/48.gif"
}, {"alt": "[委屈]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/49.gif"
}, {"alt": "[快哭了]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/50.gif"
}, {"alt": "[阴险]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/51.gif"
}, {"alt": "[亲亲]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/52.gif"
}, {"alt": "[吓]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/53.gif"
}, {"alt": "[可怜]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/54.gif"
}, {"alt": "[菜刀]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/55.gif"
}, {"alt": "[西瓜]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/56.gif"
}, {"alt": "[啤酒]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/57.gif"
}, {"alt": "[篮球]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/58.gif"
}, {"alt": "[乒乓]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/59.gif"
}, {"alt": "[咖啡]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/60.gif"
}, {"alt": "[饭]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/61.gif"
}, {"alt": "[猪头]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/62.gif"
}, {"alt": "[玫瑰]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/63.gif"
}, {"alt": "[凋谢]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/64.gif"
}, {"alt": "[嘴唇]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/65.gif"
}, {"alt": "[爱心]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/66.gif"
}, {"alt": "[心碎]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/67.gif"
}, {"alt": "[蛋糕]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/68.gif"
}, {"alt": "[闪电]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/69.gif"
}, {"alt": "[炸弹]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/70.gif"
}, {"alt": "[刀]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/71.gif"
}, {"alt": "[足球]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/72.gif"
}, {"alt": "[瓢虫]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/73.gif"
}, {"alt": "[便便]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/74.gif"
}, {"alt": "[月亮]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/75.gif"
}, {"alt": "[太阳]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/76.gif"
}, {"alt": "[礼物]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/77.gif"
}, {"alt": "[拥抱]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/78.gif"
}, {"alt": "[强]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/79.gif"
}, {"alt": "[弱]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/80.gif"
}, {"alt": "[握手]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/81.gif"
}, {"alt": "[胜利]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/82.gif"
}, {"alt": "[抱拳]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/83.gif"
}, {"alt": "[勾引]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/84.gif"
}, {"alt": "[拳头]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/85.gif"
}, {"alt": "[差劲]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/86.gif"
}, {"alt": "[爱你]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/87.gif"
}, {"alt": "[NO]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/88.gif"
}, {"alt": "[OK]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/89.gif"
}, {"alt": "[爱情]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/90.gif"
}, {"alt": "[飞吻]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/91.gif"
}, {"alt": "[跳跳]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/92.gif"
}, {"alt": "[发抖]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/93.gif"
}, {"alt": "[怄火]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/94.gif"
}, {"alt": "[转圈]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/95.gif"
}, {"alt": "[磕头]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/96.gif"
}, {"alt": "[回头]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/97.gif"
}, {"alt": "[跳绳]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/98.gif"
}, {"alt": "[投降]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/99.gif"
}, {"alt": "[激动]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/100.gif"
}, {"alt": "[乱舞]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/101.gif"
}, {"alt": "[献吻]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/102.gif"
}, {"alt": "[左太极]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/103.gif"
}, {"alt": "[右太极]","src": "https://btsstatic.oss-cn-shanghai.aliyuncs.com/admin/emoji/104.gif"
}]

vue使用wangeditor自定义表情替换QQ表情相关推荐

jquery表情 juqery qq表情适用jQuery QQ表情插件jquery.qqFace
解决jquery 1.9.0 以上版本 jquery去掉了对 $.browser 的支持,采用$.support 来判断浏览器类型.导致之前的很多插件报错的问题选择后的表情转义为和QQ表情一样的汉字 ...
php如何处理腾讯的表情,jquery QQ 表情插件分享
最近因项目的要求需要在输入留言的文本框中支持输入QQ表情,这种效果已经很常见了,下面将自己在网上找到的一个使用jquery实现的qq表情插件做一下分享. 首先看一下这个qq表情插件的效果图吧! 下面是 ...
Android项目匹配Text里面的Emoji 和 QQ表情
吐槽:第一次写博客,新手一枚.写这个博客为了共享一下资源,大家相互学习,最主要目的是抛砖引玉,引大婶指高见. 前言:需求是这样的,搞聊天,而且是在一个字库里面没有emoji的android系统里面搞. ...
微信公众帐号开发教程第9篇-QQ表情的发送与接收
我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...
微信公众号最佳实践（ 10.2）回复QQ表情和Emoji表情
回复QQ表情和Emoji表情微信的的文字发送方有一个笑脸表情等表情符,单击该表情后,我们可以发送这些表情,这些表情包括QQ表情和Emoji表情(也叫符号表情) 如图示: 微信用户和微信公众号都能直接 ...
[033] 微信公众帐号开发教程第9篇-QQ表情的发送与接收
我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...
9991阴魂不散！多多QQ表情病毒奥秘(转)
9991阴魂不散!多多QQ表情病毒奥秘(转) QQ表情本来是广受用户欢迎的一个实用工具,然而,最近有人却利用人们对QQ表情的喜爱,将其变成了一种恶性病毒.最近,笔者不断接到求助电话,受到一款名叫多多Q ...
android 微博字体高亮,安卓开发札记——高仿新浪微博文字处理（实现关键字高亮，自定义表情替换并加入点击事件实现）...
安卓开发笔记--高仿新浪微博文字处理(实现关键字高亮,自定义表情替换并加入点击事件实现) 先让大家看下效果图,这个是我自己在闲暇时间仿写的新浪微博客户端: 今天来讲讲如何实现上图的效果,这里需要用到S ...
显示自定义表情图片（replace将文字表情替换为图片）
显示自定义表情图片(replace将文字表情替换为图片) <div id="moment"></div>var face = { '[哎呀]': '< ...
Enjoy! 多达400多万的动态搞笑，爱情，友情。。。。表情下载　表情表情自定义表情表情图片下载自定义QQ表情使用方法完全图解
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 多达40 ...

vue使用wangeditor自定义表情替换QQ表情

vue使用wangeditor自定义表情替换QQ表情相关推荐

最新文章

热门文章