【前端】Twemoji(Twitter Emoji)

目錄

  • 注意
  • 使用
    • Vue / React 項目
  • 驗證

  • Twemoji 的作用:
    Twemoji 會把你網頁/應用中的 Emoji 字符(如 😄)自動替換為 Twitter 風格的圖片(SVG/PNG);
    它不依賴系統字體,因此在 Android、Windows、macOS、iOS 等系統上都能顯示統一的視覺效果;但顯示出來的 不是 Apple emoji的風格,而是 Twitter 的風格。
場景是否能解決
安卓顯示蘋果風格 Emoji無法使用 Apple 的圖形?
安卓系統不支持新 Emoji,無法顯示用圖像替代,兼容所有新舊設備
各系統 Emoji 風格不統一Twemoji 保證所有平臺一致
不依賴用戶系統字體?
可自定義大小、樣式、加載策略?

注意

npm 包用的也是maxcdn的地址,但是maxcdn已經崩潰了。
之后所有的twemoji.parse都應該修改base

import twemoji from 'twemoji';export default {install(app: any) {app.directive('twemoji', {mounted(el: HTMLElement) {twemoji.parse(el, {base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/'});},updated(el: HTMLElement) {twemoji.parse(el,{base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/'});}});}
};
//這樣就可以正常加載了

國內源https://cdn.jsdmirror.com/gh/twitter/twemoji@14.0.2/assets/
cdn.jsdmirror.com

  • emoji顯示大小調整
    Twemoji 默認插入的 <img> 標簽沒有限制尺寸,導致顯示時占用過多空間。
/* 全局限制 twemoji img 大小 */
img.emoji, img.emoji-svg {display:inline-block;width: 1em;height: 1em;vertical-align: -0.1em; /* 調整與文字基線對齊 */
}

使用

  1. CDN引入
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"></script>
  1. 在頁面加載后執行解析
<script>document.addEventListener('DOMContentLoaded', function () {twemoji.parse(document.body, {folder: 'svg', // svg 或 72x72(PNG 圖片)ext: '.svg'    // 或 '.png'});});
</script>

Vue / React 項目

  • 安裝
npm install twemoji
  • 全局應用 Twemoji(也就是全站的 Emoji 都自動替換為 Twemoji 風格)方案:
框架推薦方式說明
Vue 3創建自定義指令 / 全局組件自動處理所有含 Emoji 的元素
React使用全局解析函數(如 HOC 或 Layout hook)在渲染后全局替換 DOM 中 Emoji
//vue 全局應用 
//(用于 layout組件 或 app.vue)
<script setup>
import { onMounted } from 'vue';
import twemoji from 'twemoji';onMounted(() => {twemoji.parse(document.body, {folder: 'svg',ext: '.svg'});
});
</script>//react全局應用
//方法1 在 Layout / App.jsx 中統一解析
import React, { useEffect } from 'react';
import twemoji from 'twemoji';function App() {useEffect(() => {twemoji.parse(document.body, {folder: 'svg',ext: '.svg'});}, []);//只會在組件首次渲染(掛載)到 DOM 之后執行一次,return (<div><h1>Hello React 😄??🎉</h1>{/* 其他頁面組件 */}</div>);
}
export default App;//方法2 創建高階組件(HOC)包裹需要解析的組件
//接收組件 返回包裝好的新組件
import twemoji from 'twemoji';
import { useEffect, useRef } from 'react';export function withTwemoji(Component) {return function Wrapped(props) {const ref = useRef();useEffect(() => {if (ref.current) {//ref.current 指的就是 useRef 返回的 ref 對象所實際引用的值twemoji.parse(ref.current, {folder: 'svg',ext: '.svg'});}}, []);return (<div ref={ref}><Component {...props} /></div>);};
}
//需要使用的組件直接使用:
const TwemojiPage = withTwemoji(MyPageComponent);

twemoji.parse() 的作用是:它會掃描傳入的 DOM 元素(在這里是 ref.current 所引用的元素)內部的文本內容,找到其中的 Unicode Emoji 字符,然后將這些字符替換成 <img> 標簽,而<img>標簽的 src 屬性指向 Twemoji 的 SVG 圖片。ref.current 這個變量本身(它存儲的內存地址)沒有改變,它依然指向同一個 div 元素。但這個 div 元素內部的子節點和內容被 twemoji.parse 方法修改了。

  • 但vue全局應用的方法可能出現問題:沒有生效
    解析時 DOM 內容還沒真正渲染完,App.vue 的 onMounted() 僅保證 Vue 根組件掛載,但此時子組件內容可能尚未完全渲染進 DOM;
    解決方法有兩種
  1. 用 Layout 頁面來做解析(推薦用于中大型項目)
    不要在 App.vue 直接解析,而是把解析放到頁面 Layout 或頁面組件(如 MainLayout.vue 或 HomePage.vue)中的 onMounted() 中,這樣確保 Emoji 渲染后再替換
    推薦在主頁面區域加個 id=“main-content” 來明確定位,不要直接操作整個 document.body。
    保證這個區域包裹需要解析的區域
import { onMounted, ref } from 'vue';
import twemoji from 'twemoji';onMounted(() => {const el = document.getElementById('main-content'); // 指定 DOM 區域if (el) {twemoji.parse(el, { folder: 'svg', ext: '.svg' });}
});//最好是使用nextTick 保證獲取到的是最新內容
onMounted(() => {nextTick(() => {//等待 Vue 完成本輪 DOM 更新后再執行代碼,確保你訪問到的是已經渲染進 DOM 的最終結果。if (contentRef.value) {twemoji.parse(contentRef.value, {folder: 'svg',ext: '.svg'});}});//如果帶emoji的內容是通過異步加載或父組件傳入,也可能不會生效
//Vue 渲染晚于 onMounted,那 Twemoji 在執行時內容還沒出現在 DOM。
//解決方法:用 watch 監聽變化后再解析
import { watch } from 'vue';
watch(content, () => {nextTick(() => {twemoji.parse(emojiBox.value, { folder: 'svg', ext: '.svg' });});
});//如果內容使用了 v-html,Vue 不會觸發 DOM 更新鉤子,
// 則twemoji.parse 不會自動處理
  1. 封裝成全局自定義指令(最推薦)
    使用 v-twemoji 指令來保證解析的是已經渲染完的 DOM 元素
// plugins/twemoji.js
import twemoji from 'twemoji';export default {install(app) {app.directive('twemoji', {mounted(el) {twemoji.parse(el, { folder: 'svg', ext: '.svg' });},updated(el) {twemoji.parse(el, { folder: 'svg', ext: '.svg' });}});}
};
//在 App.vue、Layout.vue 或任意組件這樣使用
<template><div v-twemoji>Hello 😊🎉</div>
</template>
  • 部分應用
//部分應用
//vue
<template><div ref="emojiContainer">{{ message }}</div>
</template><script setup>
import { onMounted, ref } from 'vue';
import twemoji from 'twemoji';const emojiContainer = ref(null);
const message = '你好 Vue 😊??🎉';onMounted(() => {twemoji.parse(emojiContainer.value, {folder: 'svg',ext: '.svg'});
});
</script>//react
import React, { useEffect, useRef } from 'react';
import twemoji from 'twemoji';const EmojiText = ({ text }) => {const ref = useRef();useEffect(() => {twemoji.parse(ref.current, {folder: 'svg',ext: '.svg'});}, []);return <div ref={ref}>{text}</div>;
};export default function App() {return <EmojiText text="Hello 😄🎉 from React!" />;
}

驗證

使用瀏覽器開發者工具,檢查是否 emoji 被替換為<img>,src來自twemoji…cdn…地址

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/82976.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/82976.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/82976.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

GCN圖神經網絡的光伏功率預測

一、GCN圖神經網絡的核心優勢 圖結構建模能力 GCN通過鄰接矩陣&#xff08;表示節點間關系&#xff09;和節點特征矩陣&#xff08;如氣象數據、歷史功率&#xff09;進行特征傳播&#xff0c;能夠有效捕捉光伏電站間的空間相關性。其核心公式為&#xff1a; H ( l 1 ) σ (…

按照狀態實現自定義排序的方法

方法一&#xff1a;使用 MyBatis-Plus 的 QueryWrapper 自定義排序 在查詢時動態構建排序規則&#xff0c;通過 CASE WHEN 語句實現優先級排序&#xff1a; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import org.springframework.stereotype.Ser…

【計算機網絡】IPv6和NAT網絡地址轉換

IPv6 IPv6協議使用由單/雙冒號分隔一組數字和字母&#xff0c;例如2001:0db8:85a3:0000:0000:8a2e:0370:7334&#xff0c;分成8段。IPv6 使用 128 位互聯網地址&#xff0c;有 2 128 2^{128} 2128個IP地址無狀態地址自動配置&#xff0c;主機可以通過接口標識和網絡前綴生成全…

【Redis】string

String 字符串 字符串類型是 Redis 最基礎的數據類型&#xff0c;關于字符串需要特別注意&#xff1a; 首先 Redis 中所有的鍵的類型都是字符串類型&#xff0c;而且其他幾種數據結構也都是在字符串的基礎上構建的。字符串類型的值實際可以是字符串&#xff0c;包含一般格式的…

基于ELK的分布式日志實時分析與可視化系統設計

目錄 一、ELK平臺介紹 1.ELK概述 2.Elasticsearch 3.Logstash 4.Kibana 二、部署ES群集 1.資源清單 2.基本配置 3.安裝Elasticsearch&#xff08;elk1上、elk2上、elk3上&#xff09; 4.安裝logstash&#xff08;elk1上&#xff09; 5.Filebeat 6.安裝Kibana&#x…

電機控制選 STM32 還是 DSP?技術選型背后的現實博弈

現在搞電機控制&#xff0c;圈里人都門兒清 —— 主流方案早就被 STM32 這些 Cortex-M 單片機給拿捏了。可要是撞上系統里的老甲方&#xff0c;技術認知還停留在諾基亞砸核桃的年代&#xff0c;非揪著 DSP 不放&#xff0c;咱也只能賠笑臉&#xff1a;“您老說的對&#xff0c;…

【案例分享】藍牙紅外線影音遙控鍵盤:瑞昱RTL8752CJF

藍牙紅外線影音遙控鍵盤 Remotec的無線控制鍵盤采用瑞昱藍牙RTL8752CJF解決方案&#xff0c;透過藍牙5.0與手機配對后&#xff0c;連線至 Remotec 紅外 code server 取得對應影音視覺設備的紅外 code后&#xff0c;即可控制多達2個以上的影音視覺設備&#xff0c;像是智能電視…

PostgreSQL如何更新和刪除表數據

這節說下怎樣更新和刪除表數據&#xff0c;當然認識命令了&#xff0c;可以問AI幫忙寫。 接上節先看下天氣表weather的數據&#xff0c;增加了杭州和西安的數據&#xff1a; 一.UPDATE更新命令 用UPDATE命令更新現有的行。 假設所有 杭州 5月12日的溫度低了兩度&#xff0c;用…

簡單三步FastAdmin 開源框架的安裝

簡單三步FastAdmin 開源框架的安裝 第一步&#xff1a;新建站點1&#xff0c;在寶塔面板中&#xff0c;創建一個新的站點&#xff0c;并填寫項目域名。 第二步&#xff1a;上傳框架1&#xff0c;框架下載2&#xff0c;上傳解壓縮 第三步&#xff1a;配置并安裝1&#xff0c;進入…

使用 pytesseract 構建一個簡單 OCR demo

簡介 pytesseract 庫是 Google Tesseract OCR &#xff08;光學字符識別&#xff09;引擎的一個 Python 封裝庫&#xff0c;使用廣泛且功能強大。 構建 使用 pytesseract 構建一個簡單 OCR demo。 步驟一&#xff1a;安裝必要的庫 您需要在您的 Python 環境中安裝 pytessera…

十三: 神經網絡的學習

這里所說的“學習”是指從訓練數據中自動獲取最優權重參數的過程。為了使神經網絡能進行學習&#xff0c;將導入損失函數這一指標。而學習的目的就是以該損失函數為基準&#xff0c;找出能使它的值達到最小的權重參數。為了找出盡可能小的損失函數的值&#xff0c;我們將介紹利…

AWS 創建VPC 并且添加權限控制

AWS 創建VPC 并且添加權限控制 以下是完整的從0到1在AWS中創建VPC并配置權限的步驟&#xff08;包含網絡配置、安全組權限和實例訪問&#xff09;&#xff1a; 1. 創建VPC 步驟&#xff1a; 登錄AWS控制臺 訪問 AWS VPC控制臺&#xff0c;點擊 創建VPC。 配置基礎信息 名稱…

ICASSP2025丨融合語音停頓信息與語言模型的阿爾茲海默病檢測

阿爾茲海默病&#xff08;Alzheimers Disease, AD&#xff09;是一種以認知能力下降和記憶喪失為特征的漸進性神經退行性疾病&#xff0c;及早發現對于其干預和治療至關重要。近期&#xff0c;清華大學語音與音頻技術實驗室&#xff08;SATLab&#xff09;提出了一種將停頓信息…

C# 導出word 插入公式問題

最近遇到了一個問題&#xff0c;下載一個文檔時需要下載word可編輯的公式。找了很久終于找到了一種解決辦法。下面是以C#代碼來實現在Word中插入公式的功能。 目錄 一、引入dll程序集文件1、通過 NuGet 引入dll&#xff08;2種方法&#xff09;的方法&#xff1a;2、手動添加d…

智匯云舟攜最新無人機2D地圖快速重建技術亮相廣西國際礦業展覽會

5月22至25日&#xff0c;廣西國際礦業展覽會&#xff08;以下簡稱 “礦業展”&#xff09;在南寧國際會展中心成功舉辦。智匯云舟與合作伙伴廣西空馭數智信息技術有限公司攜無人機 2D地圖快速重建技術&#xff0c;以及視頻孿生智慧礦山解決方案參會&#xff0c;為礦山行業數字化…

OpenSSL 簽名驗證詳解:PKCS7* p7、cafile 與 RSA 驗簽實現

OpenSSL 簽名驗證詳解&#xff1a;PKCS7* p7、cafile 與 RSA 驗簽實現 摘要 本文深入剖析 OpenSSL 中 PKCS7* p7 數據結構和 cafile 的作用及相互關系&#xff0c;詳細講解基于 OpenSSL 的 RSA 驗簽字符串的 C 語言實現&#xff0c;涵蓋簽名解析、證書加載、驗證流程及關鍵要…

9:OpenCV—模板匹配

模版匹配 1、模板匹配概念 模板匹配是一項在一副圖像中尋找與另一幅模板圖像最匹配&#xff08;相似&#xff09;部分的技術。模板匹配不是基于直方圖的&#xff0c;而是通過在輸入圖像上滑動圖像塊&#xff08;模板&#xff09;同時對比相似度&#xff0c;來對模板和輸入圖像…

Composer 常規操作說明與問題處理

目錄 一、 Composer 簡介&#xff0c;安裝二、全局配置三、項目配置&#xff08;composer.json&#xff09;3.1 composer.json 文件1. 基礎字段信息2. **require&#xff08;生產環境依賴&#xff09;**3. **require-dev&#xff08;開發環境依賴&#xff09;** 3.2 composer.l…

Spring Boot 3.0與Java 17:企業級應用開發的新范式

引言 隨著Spring Boot 3.0和Java 17的正式發布&#xff0c;企業級應用開發迎來了新的技術范式。這兩項技術的結合不僅帶來了性能提升&#xff0c;還引入了眾多現代化的編程特性&#xff0c;為開發者提供了更強大、更高效的開發體驗。本文將深入探討Spring Boot 3.0與Java 17的…

Vue 組件 - 指令

Vue 漸進式JavaScript 框架 基于Vue2的學習筆記 - Vue指令 目錄 指令寫法 自定義指令 簡單封裝指令 指令傳遞字符串 update事件 指令應用 指令實現輪播 指令函數簡寫 指令函數列表 bind inserted update componentUpdated unbind Vue3指令輪播 nextick 總結 指…