contenteditable富文本编辑器支持emoji插入表情

首先看下实现效果

主要功能是插入表情emoji 点击顶部员工名称 可以插入员工名称到tetxarea中 ，点击face小图标可以展开表情选择
注 IE有兼容性问题 不支持IE 主要是ie不持支insertText兼容问题
字数限制我没有做完 方法已经提供

实现

<template>
  <div class="test">
    <!-- caidan -->
    <div class="rich-text-area">
      <div class="menu">
        <div class="emoji">
          <img :src="totalEmoji" @click="ishowFaceArea" />
          <div class="faceNav" v-if="showFace">
            <img
              v-for="item in emojiArr"
              :key="item.icon"
              :src="item.icon"
              @click="clickFace(item)"
            />
          </div>
        </div>
        <div class="emp-name wel-text" @click="insertName('员工姓名')">
          【员工姓名】
        </div>
        <div class="emp-no wel-text" @click="insertName('员工工号')">
          【员工工号】
        </div>
      </div>
      <div
        id="box"
        r