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