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"
}]