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