HTML 跨平台使用同一套 emoji (twemoji) + 实现 emoji 选择

🕗 发布于 2024-07-26 13:16 html 前端 javascript

背景:

网页需要显示和发送带 emoji 表情的文本消息(为方便理解, 以 whatsapp 为例, 实际开发中待定)
同时, 要求不同系统打开网页时, 看到的都是同一套 emoji , 避免同一个 emoji 在不同电脑上显示不同

概述:

引入 twemoji 库文件
把网页版 wa 的 emoji 全部复制下来
新增 emoji 组件, 点击表情图标弹出表情框, 框内显示与 wa 一致
点选框中表情, 根据点击前光标在输入框(contentEditable 的 div)的位置, 插入 twemoji.parse 转换过的表情(图片)
给各处可能显示 twemoji 的 div 加上特定 class(比如 twemoji-convert), 在程序主界面(Main.vue)新增 MutationObserver , 在 DOM 变化时选取此类 class 元素, 使用 twemoji.parse 转换元素, 使显示 emoji

实现过程:

引入 twemoji

<!-- Start twemoji 库文件 -->
<script src="https://twemoji.maxcdn.com/v/13.1.0/twemoji.min.js" integrity="sha384-gPMUf7aEYa6qc3MgqTrigJqf4gzeO6v11iPCKv+AP2S4iWRWCoWyiR+Z7rWHM/hU" crossorigin="anonymous"></script>
<!-- End twemoji 库文件 -->

复制 wa emoji

在网页版 whatsapp 上聊天, 一栏栏地点选表情, 发送, 复制下来, 此时接收到的内容已经是字符了, 把这些字符按顺序提取为数组;

这个需要耐心, 这些个字符千奇百怪, 有的字符电脑系统不支持不能渲染出来, 有的字符后面需要接一个空格, 有的字符看上去只有一位但实际占了多位, 最多的还是由多种字符组合显示成一个表情的(字符人, 可加修饰字符: 性别, 发型, 职业, with another one …), 千万别弄错了

新增 emoji 组件

渲染表情部分由全局的 MutationObserver 负责(twemoji.parse)

选中表情部分如下:

// 点击选中 emoji
handleClickEmoji(e) {
    // 取选中的 emoji DOM 标签
    let emojiImg;
    if (e.target.classList.contains('emoji-item')) {
        emojiImg = e.target.querySelector('img.emoji');
    } else if (e.target.classList.contains('emoji')) {
        emojiImg = e.target;
    }

    // 取标签上的 alt (实体字符, twemoji 转换后自带)传给外部
    if (emojiImg) {
        this.$emit('checkEmoji', emojiImg.getAttribute('alt'));
    }
}

输入框接收选中表情, 加入到输入框中

输入框 div

<!-- 因为正常 textarea 无法显示 emoji img , 现在将输入框改为 contentEditable div -->
<div :contentEditable="true"
     ref="sendMsg"
     @click="save_range"
     @keyup="save_range"
     @keydown="inputOnKeyDown"
     @paste="handlePaste"
     :placeholder="$t('chat.inputbox')"
     :class="{'waInputDiv__disabled': inputDisabled}"
     class="waInputDiv"></div>

输入框 div 相关事件

// inputOnKeyDown 处理回车, ctrl 等事件, 与表情主逻辑无关, 略过

// 离开焦点时先保存状态(光标等信息)
save_range() {
    let range = null;
    if (window.getSelection) {
        const sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
    }
    this.lastEditRange = range;
}

// 粘贴内容到可编辑 div (参考 https://www.zhangxinxu.com/wordpress/2016/01/contenteditable-plaintext-only/)
handlePaste(e) {
    e.preventDefault();
    let text;

    if (window.clipboardData && window.clipboardData.setData) {
        // IE
        text = window.clipboardData.getData('text');
    } else {
        text = (e.originalEvent || e).clipboardData.getData('text/plain');
    }
    if (document.body.createTextRange) {
        let textRange;
        if (document.selection) {
            textRange = document.selection.createRange();
        } else if (window.getSelection) {
            const sel = window.getSelection();
            const range = sel.getRangeAt(0);

            // 创建临时元素，使得TextRange可以移动到正确的位置
            const tempEl = document.createElement('span');
            tempEl.innerHTML = '&#FEFF;';
            range.deleteContents();
            range.insertNode(tempEl);
            textRange = document.body.createTextRange();
            textRange.moveToElementText(tempEl);
            tempEl.parentNode.removeChild(tempEl);
        }
        textRange.text = text;
        textRange.collapse(false);
        textRange.select();
    } else {
        // Chrome之类浏览器
        document.execCommand('insertText', false, text);
    }
}

选中表情相关事件

// 接收"选中 emoji 表情"事件
handleCheckEmoji(val) {
    // 获取待插入表情 Node
    let dom_insert = document.createElement('span');
    dom_insert.innerHTML = twemoji.parse(val);
    dom_insert = dom_insert.childNodes[0];

    // 插入 Node 到输入框
    this.insertInputMsg(dom_insert);
}

// 插入 emoji 表情到输入框
insertInputMsg(val) {
    // 获取待插入结点
    let dom_insert;
    if (val instanceof Node) {
        // 是 Node 结点, 不用做处理

        dom_insert = val;
    } else {
        // 否则当做文本结点处理

        dom_insert = document.createTextNode(String(val || ''));
    }

    // 获取编辑框对象
    const dom_input = this.$refs.sendMsg;

    // 编辑框设置焦点
    dom_input.focus();

    // 获取选定对象
    let selection = null;
    if (window.getSelection) {
        selection = window.getSelection();
    } else if (window.document.getSelection) {
        selection = window.document.getSelection();
    } else if (window.document.selection) {
        selection = window.document.selection.createRange().text;
    }
    // 如果获取不到, 退出流程
    if (!selection) {
        this.$Message.error(this.$t('whatsapp_manage.browserError'));
        return false;
    }

    // 判断是否有最后光标对象存在
    if (this.lastEditRange) {
        // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
        selection.removeAllRanges();
        selection.addRange(this.lastEditRange);
    }

    // 根据所在位置的不同以不同的方式插入结点
    if (this.lastEditRange) {
        // 有光标对象, 直接插入
        this.lastEditRange.insertNode(dom_insert);
    } else if (selection.anchorNode == dom_input) {
        // 焦点就在文本框, 则直接 append node 到最后
        dom_input.appendChild(dom_insert);
    } else if (selection.anchorNode.nodeName != '#text') {
        // 焦点在非文本结点, 则插入到焦点节点后面
        dom_input.insertBefore(dom_insert, selection.anchorNode.nextSibling);
    }

    // 创建新的光标对象
    const range = document.createRange();
    // 光标对象的范围界定为新建的内容节点
    range.setStartAfter(dom_insert);
    // 插入空格, 否则光标可能不显示
    // dom_input.insertBefore(document.createTextNode(' '), dom_insert.nextSibling);
    // range.setStart(dom_insert.nextSibling, 1);
    // 使光标开始和光标结束重叠
    range.collapse(true);
    // 清除选定对象的所有光标对象
    selection.removeAllRanges();
    // 插入新的光标对象
    selection.addRange(range);
    // 无论如何都要记录最后光标对象
    this.lastEditRange = selection.getRangeAt(0);
}

主界面监听 DOM 变动, twemoji.parse 转化指定 class 元素内部的实体字符为表情

mounted() {
    // 监听 DOM 变化, 变化时使用 twemoji 库转化 emoji 实体字符为 twemoji emoji
    this.observer = new MutationObserver(function(mutations, observe) {
        const domList = document.querySelectorAll('.twemoji-convert');
        for (let i = 0; i < domList.length; i++) {
            twemoji.parse(domList[i]);
        }
    });
    this.observer.observe(document.body, {
        'childList': true,
        'characterData': true,
        'subtree': true
    });
}

补充:

配合 Vue 使用时, 表情和 emoji 混杂的文本, 使用 twemoji.parse 后会破坏 vue 的响应式监听, 导致视图不随数据的更新而更新; 解决方法 — 给需要更新的地方加上 key , key 上绑定原数据, 这样, 当原数据变化时, 组件会重新渲染
另外, 如果使用虚拟滚动表格, 表格内有 emoji 文字, 仍然有问题, 滚动后其他纯文字单元格也显示成了带 emoji 的那个单元格内容, 暂未解决

原文地址：https://blog.csdn.net/u013836242/article/details/140686149

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：子组件不能直接改变父组件传递的“道具”值
下一篇：SpringBoot添加密码安全配置以及Jwt配置

linux线程cp模型，posix信号量，线程池，线程封装，单例模型，懒汉饿汉实现方式，自旋锁，读者写者模型
前面的同步，我们并没有一个很好的场景来模拟同步，只是简单的将有序的现象输出出来；现在我们来讲解一个比较合理且常见的模型——生产者消费者模型；
阅读更多2024-09-07
Qt/C++开源项目 TCP服务器调试助手（源码分享+发布链接下载）
该TCP服务器调试助手是用于测试和监控基于TCP协议的网络通信工具，能够帮助开发者便捷地进行网络通信调试。通过简洁的界面设计，用户可以轻松配置、管理TCP端口的连接，收发消息并进行数据监控分析。123
阅读更多2024-09-07
vue3整合antv x6实现图编辑器快速入门
例如：在上面节点基础上，我们有一个新的需求：给节点加上右键菜单。X6 支持使用 SVG、HTML 来渲染节点内容，在此基础上，我们还可以使用 React、Vue 组件来渲染节点，这样在开发过程中会非常
阅读更多2024-09-07
linux使用samba共享目录，其他虚拟机和windows都可以访问
linux使用samba共享目录，其他虚拟机和windows都可以访问
阅读更多2024-09-07
Linux系统编程实现ls -l | wc -l指令
由于该指令是通过管道的形式实现的，所以我们要使用系统函数pipe。ls -l |wc -l的作用就是统计当前目录有多少文件。由于父子间通过管道实现，所以存在读写阻塞问题，不用担心僵尸进程的产生，所以可
阅读更多2024-09-07
MySQL表操作及约束
MySQL表操作及约束
阅读更多2024-09-07
1.2CubeMAX创建FREERTOS入门示例
内核参数设置，用户根据自己的实际应用来裁剪定制。：相关宏的定义，可以自建一些常量在工程中使用。User Constants（用户常量）：定时器和信号量的创建。：用于查看堆使用情况。：任务与队列
阅读更多2024-09-07
YOLOv9改进策略【注意力机制篇】| PSA极化自我关注：实现高质量像素回归
本文记录的是基于PSA注意力模块的YOLOv9目标检测方法研究。PSA模块。本文将其应用到YOLOv9的检测任务中，使模型能够更好地捕捉图像中的细节信息，以实现目标检测任务中准确识别和定位。
阅读更多2024-09-07
爆改YOLOv8|利用yolov10的SCDown改进yolov8-下采样
yolov8改进，yolov10, 下采样SCDown, 即插即用
阅读更多2024-09-07
PDF样本图册转换为一个链接，随时打开无需印刷
想象一下，您手中有一本厚重的样本图册，里面包含了丰富多样的内容，如产品介绍、项目方案、学术论文等。在过去，您需要逐一翻阅、筛选，甚至为了便于查看，不得不将其印刷出来。如今，借助先进的数字化技术，还能实
阅读更多2024-09-07

HTML 跨平台使用同一套 emoji (twemoji) + 实现 emoji 选择

相关文章