vue+element-ui如何实现聊天如何上传图标

用到的知识点为contenteditable

 contenteditable是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。

首先，在我看来，如果用input作为输入框，图标为<i>标签无法放入input里面，所以我们应该用div+contenteditable把div改成一个输入框，例如一下代码

<div contenteditable="true" ref="inpts" id="inpts" @keyup.enter="getAnswers" spellcheck="false"
  						autofocus style="width: 100%;height: 100px;"></div>

接下来我们把<i>标签放入到输入框的div中，例如一下代码

// 假设这是在一个Vue组件的方法中  
insertEmoji() {  
  // 获取引用和选择对象  
  let inpt = this.$refs.inpts;  
  let selObj = window.getSelection();  
  
  // 选择inpt元素的所有子元素并折叠选择到末尾  
  selObj.selectAllChildren(inpt);  
  selObj.collapseToEnd();  
  
  // 准备要插入的emoji图片HTML  
  let data = "your-emoji-class-here"; // 替换为实际的emoji类名  
  let emojiImg = `<i class='${data}'></i>`;  
  
  // 在选择的末尾插入HTML  
  inpt.insertAdjacentHTML('beforeend', emojiImg);

注意：我们把输入框的文字以及小图标渲染到对话框中应该用v-html才可以渲染出来