在前端开发中，文本编辑器是必不可少的工具之一。其中，summernote 是一个强大的富文本编辑器，支持各种常见的文本处理功能，如加粗、斜体、列表等等。而 summernote-ext-github-emojis 是一个 npm 包，可以为 summernote 添加 GitHub 表情的功能，方便开发者在写作时快速插入表情。
本篇文章将详细介绍 summernote-ext-github-emojis 的使用方法，从 npm 安装到在 summernote 中使用，以及注意事项和示例代码，希望能够帮助大家快速掌握这个工具的使用。
安装
首先，我们需要在终端中使用 npm 命令安装 summernote-ext-github-emojis。
--- ------- ----------------------------
完成安装后，我们就可以在 summernote 中使用这个插件了。
使用
为了在 summernote 中使用 summernote-ext-github-emojis，我们需要先引入相应的依赖文件。具体来说，我们需要引入 jquery、summernote 和 summernote-ext-github-emojis 三个文件。
---- --------- ---
------- -----------------------------------------------------------
----- -------------------------------------------------------------------------------------- -----------------
------- ----------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------------
---- --- ---------- ---
--------
------------ -
-----------------------------
------- ----
-------- -
---------- ----------
--
---------- -
------- ---------- -
-- -----
----------------------------
--------------- -----
---
-
-
---
---
---------
---- - ---- --- ---------- --- ---
---- ----------------------以上代码中，我们在 HTML 中添加了一个 id 为 summernote 的 div 元素，用于显示 summernote 编辑器。在初始化 summernote 之前，我们依次引入 jquery、summernote 和 summernote-ext-github-emojis 三个文件，并设置了 summernote 的一些参数，如高度、工具栏和回调函数等。
需要注意的是，在 callbacks 的 onInit 函数中，我们使用了 emojioneArea 插件初始化了 textarea 元素，这个 textarea 元素是 summernote 的一个内部元素。这个插件是 summernote-ext-github-emojis 的一个依赖，用于实现表情选择器的功能。
示例代码
以下是一个完整的代码示例，大家可以在本地运行，自行体验 summernote-ext-github-emojis 的功能。
--------- -----
----- ----------
------
----- ----------------
----------------------------------- ------------
----- ------------------------------------------------------------------------------- -----------------
-------
------
---- - ---- --- ---------- --- ---
---- ----------------------
---- --------- ---
------- -----------------------------------------------------------
----- -------------------------------------------------------------------------------------- -----------------
------- ----------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------------
---- --- ---------- ---
--------
------------ -
-----------------------------
------- ----
-------- -
---------- ----------
--
---------- -
------- ---------- -
-- -----
----------------------------
--------------- -----
---
-
-
---
---
---------
-------
-------注意事项
最后，需要注意的是，使用 summernote-ext-github-emojis 的过程中，我们需要将 summernote 的工具栏中添加 emoji 这个按钮。如果没有这个按钮，是无法在 summernote 中添加表情的。当然了，这个按钮必须是在 summernote 初始化之前添加的。
以上就是关于 summernote-ext-github-emojis 的使用教程。虽然这个 npm 包的使用方法相对简单，但是对于那些对 summernote 不太熟悉的开发者来说，可能还是有一些困难。希望这篇文章能够提供帮助，让大家能够更加轻松地使用 summernote 编辑器。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005576281e8991b448d45cb