在前端开发中，文本编辑器是非常常用的工具之一，而 tinymce 是由 Moxiecode Systems AB 开发的一款富文本编辑器，对各类文本格式支持良好，能够满足大部分的文本编辑需求。但是，由于 tinymce 的功能过于强大，因此其代码也十分的庞大而且复杂，如果你只是需要一个外观简洁、易于使用的文本编辑器时，tinymce 显然略显笨重。
因此，Moxiecode Systems AB 开发了 tinymce-light 作为他们官方推荐的 tinymce 精简版本，但是即便如此，tinymce-light 包的大小也超过了 300KB。所以我们需要使用到 tinymce-light-skin。
tinymce-light-skin 是基于 tinymce-light 开发而来，已经从 tinymce-light 的基础上去掉了许多冗余代码，同时拥有着换肤、简洁等特点，非常适合用于快速开发文本编辑器。在本篇文章中，我们将详细介绍如何使用 npm 包 tinymce-light-skin 来快速开发一个简单的文本编辑器。
安装 tinymce-light-skin
你可以在你已有的项目（例如 React 或者 Vue 项目）中直接使用 npm 来通过下面的命令来安装 tinymce-light-skin：
npm install tinymce-light-skin --save
引入 tinymce-light-skin
在安装完成后，我们需要将 tinymce-light-skin 引入到我们所需的项目中。因为 tinymce-light-skin 是基于 tinymce-light 开发而来的，因此我们需要先引入 tinymce-light 的 JavaScript 和 CSS 文件。我们可以通过如下代码来完成：
<!-- 引入 tinymce-light 的 JavaScript 文件 --> <script src="/path/to/tinymce-light/tinymce.min.js"></script> <!-- 引入 tinymce-light 的样式 --> <link href="/path/to/tinymce-light/skins/content/default/content.min.css" rel="stylesheet">
然后，我们需要在项目中引入 tinymce-light-skin 的文件。使用如下代码：
<!-- 引入 tinymce-light-skin 的样式 --> <link href="/node_modules/tinymce-light-skin/dist/skins/content/default/content.min.css" rel="stylesheet">
创建 tinymce-light-skin 编辑器
在引入 tinymce-light-skin 之后，我们需要在项目中创建一个编辑器，并配置其一些参数来满足我们所需的功能，具体如下：
-- -------------------- ---- -------
-- -- ------- - ------------------
------ -------------------------
------ ---------------------
-- -- ------------------ ---
--------------
--------- ----------
----- ------ -- -- ------------- ---
------------ ------ -- -- ------------- -----
----------- ---- -- ----------
-------- -
-------- -------- ----- ---- ----- ------- ----- ------- --------
-------------- ------------ ---- ------------
--------------- ----- ----- ----- ---- ---- ----------
-- -- --
-------- ----- ---- - ------------ - - -
----- ------ --------- - --------- ----------- - -
----------- ------------ - ------- ------- ------- ------ - - -
------------- - ----- -- -----
---上述代码中，我们首先引入了 tinymce 和 tinymce-light-skin。接着，我们通过 tinymce.init() 方法来创建 tinymce-light-skin 编辑器，并进行参数配置：
selector：指定编辑器所在的文档元素 ID。skin：设置为false，关闭 tinymce-light 的皮肤。content_css：设置为false，关闭 tinymce-light 的默认样式。min_height：定义编辑器的最小高度。plugins：插件配置，可以根据自己的需求来添加或者删除插件。toolbar：工具栏设置，可以指定需要添加的按钮。
tinymce-light-skin 示例代码
最后，我们可以通过下面的示例代码来进一步熟悉如何使用 tinymce-light-skin:
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------- ------------
---- -- ------- - ---------- --- ---
------- -----------------------------------------------------
----- ------------------------------------------------------------------- -----------------
---- -- ------------------ --- ---
----- ---------------------------------------------------------------------------------- -----------------
-------
------
--------- -----------------------
--------
-- -- ------- - ------------------
------ -------------------------
------ ---------------------
-- -- ------------------ ---
--------------
--------- ----------
----- ------ -- -- ------------- ---
------------ ------ -- -- ------------- -----
----------- ---- -- ----------
-------- -
-------- -------- ----- ---- ----- ------- ----- ------- --------
-------------- ------------ ---- ------------
--------------- ----- ----- ----- ---- ---- ----------
--
-------- ----- ---- - ------------ - - -
----- ------ --------- - --------- ----------- - -
----------- ------------ - ------- ------- ------- ------ - - -
------------- - ----- -- -----
---
---------
-------
-------结论
通过上述的使用教程，相信大家已经可以非常快速地掌握如何使用 npm 包 tinymce-light-skin 来创建一个简洁、易于使用的文本编辑器。希望文章对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c0281e8991b448d9a0b