vue2实现带表情输入框

通过HTML标签的contenteditorable属性实现一个带表情图片输入的输入框

• 实现效果如下
  
• 这里主要是通过contenteditorable属性操作dom，在点击表情的时候往对应位置添加img标签
• 主要实现代码如下（vue2）

<template>
  <div class="o-input">
    <div class="head">
      <i class="emoji-btn iconfont icon-xiaolian" title="表情">
        <div class="emoji-box">
          <img
            v-for="(item, index) in emojiList"
            :key="index"
            :src="item.src"
            :title="item.name"
            @click.stop="handleEmoji(item)"
          />
        </div>
      </i>
      <i class="iconfont icon-tupian" title="图片"></i>
      <i class="iconfont icon-wenjianjia" title="文件"></i>
    </div>
    <div
      @click="clickInput"
      @input="inputHandle"
      @keyup="keydownEvent"
      class="input-box"
      ref="inputBox"
      contenteditable="true"
    ></div>
    <div class="send-btn">
      <button>发送</button>
    </div>
  </div>
</template>

<script>
import {
      emojiList } from "./emoji";
import {
      parseToText } from './util';
export default {
     
  name: "o-input",
  data() {
     
    return {
     
      emojiList: emojiList,
    };
  },
  methods: {
     
    keydownEvent(e){
     
      if(e.keyCode === 13) {
     
        let range = window.getSelection().getRangeAt(0);
        range.endContainer.setAttribute("name", "o-input-div---")
      }
    },
    handleEmoji(emoji) {
     
      var selection = window.getSelection(); // 获取光标
      if ( // 如果没有焦点或者焦点不在输入框内，聚焦到输入框
        selection.anchorNode !== this.$refs.inputBox &&
        !this.$refs.inputBox.contains(selection.anchorNode)
      ) {
     
        // 聚焦到输入框
        selection.removeAllRanges();
        this.$refs.inputBox.focus();
        if (this.$refs.inputBox.lastChild)
          selection.getRangeAt(0).setStartAfter(this.$refs.inputBox.lastChild);
        selection.collapseToEnd();
      }
      // 创建节点
      let img = document.createElement("img");
      img.src = emoji.src;
      img.className = "in-img";
      img.setAttribute("name", emoji.regName);

      let range = selection.getRangeAt(0);
      range.deleteContents();

      range.insertNode(img);
      range = range.cloneRange();
      range.setStartAfter(img);
      range.collapse();
      selection.removeAllRanges();
      selection.addRange(range);
      this.inputHandle();
    },
    // 点击输入框内的图标时，移动光标到对应位置
    clickInput(e) {
     
      // 如果点击的不是HTML标签，无需处理
      if (!(e.target instanceof HTMLImageElement)) {
     
        return;
      }
      let target = e.target;
      // 获取点击图片的中心位置
      let targetX = target.x + Math.floor(target.width / 2);

      let selection = window.getSelection(); // 获取光标
      let range = selection.getRangeAt(0);

      range = range.cloneRange();
      range.setStartBefore(target);
      if (e.x < targetX) {
     
        range.setEndBefore(target);
      } else {
     
        range.setEndAfter(target);
      }

      range.collapse();
      selection.removeAllRanges();
      selection.addRange(range);
    },

    inputHandle(){
     
      let html = this.$refs.inputBox.innerHTML;
      let text = parseToText(html);
      console.log(text);
    }
  },
};
</script>