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

秋英之空

于 2022-02-13 14:04:29 发布

阅读量2.5k

点赞数

分类专栏： vue 文章标签： vue contenteditable emoji

本文链接：https://blog.youkuaiyun.com/qq_38152997/article/details/122908286

版权

这篇博客展示了如何在Vue项目中使用contenteditable属性创建富文本编辑器，并支持emoji表情的插入。编辑器功能包括点击员工名称插入文本以及通过表情图标选择emoji。需要注意的是，该实现存在IE浏览器的兼容性问题，主要是由于IE不支持insertText方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先看下实现效果
在这里插入图片描述
选择表情

主要功能是插入表情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"
        ref="box"
        :contenteditable="contenteditable"
        @keyup="keyupFn"
        @keydown="keydownFn"
        @mouseup=

最低0.47元/天解锁文章