前言
在日常开发中，经常需要在前端编辑器中添加表情符号，此时可以使用 npm 包 tinymce-emoji，它可以方便地将表情符号添加到 TinyMCE 富文本编辑器中。
安装
首先，我们需要使用 npm 进行安装。执行以下命令：
npm install tinymce-emoji
使用
接下来，让我们来看一下如何在 TinyMCE 中使用 tinymce-emoji。
首先，我们需要引入 tinymce、tinymce-emoji 和相关的 CSS 文件：
-- -------------------- ---- -------
------
------
----- ------------------------------------------------------- -----------------
------- -------------------------------------------------------
------- ----------------------------------------------------------
-------
------
--------- -----------------------
-------
-------在页面加载完成后，我们可以使用以下代码初始化 TinyMCE 编辑器，并启用 tinymce-emoji 插件：
-- -------------------- ---- -------
--------------
--------- ----------
-------- --------
-------- --------
------- -
-------- --------
-------- --------
-
---可以看到，我们在 plugins 字段中添加了 emoji，并将其添加到工具栏中。同时，我们也在 mobile 字段中启用了该插件。
指南
在使用 tinymce-emoji 进行开发时，需要注意以下几点：
加载 CSS 文件
为了让表情符号正确显示，我们需要在页面中引入相关的 CSS 文件。可以使用以下代码：
<link href="./node_modules/tinymce-emoji/skins/content/emoji.min.css" rel="stylesheet">
定制表情符号
默认情况下，tinymce-emoji 插件会加载一些常用的表情符号，但我们也可以根据自己的需求进行定制。
我们需要在初始化 TinyMCE 编辑器时，通过 emoji_patterns 字段来定制表情符号。例如，以下代码将添加一个名为 "my-smiley" 的表情符号：
-- -------------------- ---- -------
--------------
--------- ----------
-------- --------
-------- --------
------- -
------------ -------------------------------
--
--------------- -
- ------ ---- ---- ---- ------- ----------- -
-
---可以看到，我们在 emoji_patterns 字段中添加了一个对象，其中 start 和 end 字段表示表情符号的开始和结束字符，format 表示对应的表情符号名称。
同样地，我们还可以通过 emojis 字段来添加表情符号，例如：
-- -------------------- ---- -------
--------------
--------- ----------
-------- --------
-------- --------
------- -
------------ --------------------------------
------------------ -------------------------------------
-
---使用其他 CDN
如果你不想使用 TinyMCE 的官方 CDN，可以使用其他的 CDN。例如，以下代码将加载 tinymce 和 tinymce-emoji：
<head>
<link href="https://cdn.bootcdn.net/ajax/libs/tinymce/5.9.2/tinymce.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/tinymce/5.9.2/tinymce.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tinymce-emoji/skins/content/emoji.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tinymce-emoji/plugin.min.js"></script>
</head>可以看到，我们使用了 BootCDN 和 jsDelivr 两个 CDN 加载了 tinymce 和 tinymce-emoji 相关的文件。
示例
以下是一个简单的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------------------------------------------------------------- -----------------
------- ------------------------------------------------------------------------------
----- ----------------------------------------------------------------------------- -----------------
------- ------------------------------------------------------------------------
-------
------
--------- -----------------------
--------
--------------
--------- ----------
-------- --------
-------- --------
------- -
-------- --------
-------- --------
--
------- -
------------ ------------------------------------------------------------
------------------ -----------------------------------------------------------------
--
--------------- -
- ------ ---- ---- ---- ------- ----------- --
- ------ ----- ------- ----------------- -
-
---
---------
-------
-------结论
使用 tinymce-emoji 可以方便地将表情符号添加到 TinyMCE 编辑器中。在定制表情符号时，我们需要注意设置好 emoji_patterns 字段，并加载相关的 CSS 文件。同时，我们也可以使用其他的 CDN 来加载相关的文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc981e8991b448dd4af