在前端开发中，经常需要对富文本进行操作和处理。为了便于开发者在富文本中引入常见的功能，例如表格、图片、代码块等，有不少开发者会选择一些常见的富文本编辑器。但是富文本编辑器虽然功能齐全，但是往往复杂、臃肿。如果你只需要引入某个功能，例如图标库，那么就有些大材小用了。
在这种情况下，我们可以借助 wmer 这个 npm 包，实现对富文本的高效处理。接下来就来详细介绍如何使用 wmer。
wmer 基本介绍
wmer 是一个基于纯 JavaScript 编写的 npm 包。通过引入 wmer，你可以实现以下功能：
- 实时预览富文本编辑器。
- 支持快捷键，方便开发者快速添加功能。
- 丰富的插件库，可以通过插件库引入所需的功能，避免臃肿。
- 可拓展性强，可以方便地集成自定义插件。
安装 wmer
使用 npm 安装 wmer。
npm i wmer
引入 wmer
可以通过以下方式，将 wmer 引入到项目中。
import WMEditor from 'wmer'; import 'wmer/lib/wmer.min.css';
然后，我们可以新建一个容器来承载富文本编辑器。
<div id="editor"></div>
之后，我们就可以在 JavaScript 中对编辑器进行初始化，并添加需要的插件。
-- -------------------- ---- -------
----- ------ - --- ----------
---------- ----------------------------------
-------- -
-----------
------------
--
---
----------------其中，container 参数指定了富文本编辑器的容器，plugins 则指定了需要引入的插件库。
wmer 插件库
wmer 提供了较为丰富的插件库，适用于常见的富文本编辑器需求。下面，我们介绍几个常见的插件。
font-size
该插件可以实现富文本编辑器中，设置字体大小。
-- -------------------- ---- ------- ------ - -------- - ---- ------------------- ----- ------- - - ----------- ----- -- ----- ------ - --- ---------- ---------- ---------------------------------- -------- ---
font-color
该插件可以实现富文本编辑器中，设置字体颜色。
-- -------------------- ---- ------- ------ - --------- - ---- ------------------- ----- ------- - - ------------ ----- -- ----- ------ - --- ---------- ---------- ---------------------------------- -------- ---
image-upload
该插件可以实现富文本编辑器中，上传图片的功能。
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
----- ------- - -
-------------
------- --------------------
--------- ----- -- -
-----------------
-
---
-----
--
----- ------ - --- ----------
---------- ----------------------------------
--------
---其中，imageUpload 接受一个参数对象，其中包含 server 表示上传图片的服务器地址，onchange 则表示上传成功后的回调函数。
wmer 快捷键
wmer 内置了常用的快捷键，方便开发者快速添加相应功能。下面，我们介绍几个常见的快捷键。
Ctrl + B
表示加粗当前选中文本。
Ctrl + I
表示斜体当前选中文本。
Ctrl + U
表示下划线当前选中文本。
Ctrl + C
表示复制当前选中文本。
Ctrl + X
表示剪切当前选中文本。
wmer 可拓展性
如果你需要自定义一些功能，那么可以参照 wmer 的模板，来开发自己的插件。下面，我们就以代码高亮插件为例，来介绍如何开发自己的插件。
首先，我们需要安装 highlight.js 这个代码高亮的 npm 包。
npm i highlight.js
我们可以引入 highlight.js 的 css 文件和 js 文件。
import hljs from 'highlight.js'; import 'highlight.js/styles/github.css';
接下来，我们可以定义自己的插件，用于实现代码高亮。
-- -------------------- ---- -------
------ ------- -------- --------------- -
------ -
------------ -
-- ---------
------------------- -- -- -
-- ---------
----- ------- - -------------------------------
----- -------- - ---------------------------------
--- ------ -- -- --------- -
-- ------
----- ---- - -----------------------------
-- ------ -
-- ------
------------ - -------------------- --------------------
-
-
---
-
--
-以上代码，首先通过监听编辑器内容的改变，然后获取编辑器中所有 code 标签，之后获取标签中的语言类型，最后实现代码高亮的效果。
最后，我们可以将自己编写的插件引入到富文本编辑器中，实现对代码高亮的支持。
-- -------------------- ---- ------- ------ ------------- ---- ------ ----- ------- - - ---------------- ----- -- ----- ------ - --- ---------- ---------- ---------------------------------- -------- ---
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----------- ------------
----- ---------------------------------------------------------------------------------- -----------------
-------
------- ------------ -
------- --- ----- -----
------- ------
-
--------
-------
------
---- ------------------
------- --------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------
------- --------------
------ -------- ---- -------------------------------------------
------ ------------------------------------------------------------
------ - --------- ---------- ----------- - ---- -------------------------------------------------------
------ ------------- ---- ----------------------
----------------------------------- --------------------------------
----------------------------- --------------------------
---------------------------- -------------------------
----- ------- - -
-----------
------------
-------------
------- --------------------
--------- ----- -- -
-----------------
-
---
----------------
--
----- ------ - --- ----------
---------- ----------------------------------
--------
---
----------------
---------
-------
-------总结
通过本文，我们学习了 wmer 的使用方法。wmer 提供了丰富的插件库，可以更加方便地添加常用功能，同时具有较高的可拓展性，可以轻松开发自定义插件。笔者希望读者们能够充分利用 wmer，高效地进行富文本编辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710f8dd3466f61ffe2b0