前言
WYSIWYG 编辑器是一种具有所见即所得的编辑能力的编辑器，可极大地提高写作效率。在前端开发中，我们可以使用 wysiwyg 编辑器来方便地创建、编辑 HTML 内容。
wysiwyg 是一个基于 React 的编辑器组件库，可快速帮助我们构建自定义 wysiwyg 编辑器。
本文将介绍 wysiwyg 的基本用法，以及如何自定义它以适应您的项目需求。
安装
首先需要安装 wysiwyg 包，可以使用 npm 或 yarn 安装：
npm install @uiw/react-md-editor
或者
yarn add @uiw/react-md-editor
基本用法
在使用 wysiwyg 前，需要先导入文本编辑器组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------------------
----- --- ------- --------------- -
----- - -
------ ---
--
------------ - ------- -- -
--------------- ----- ---
--
-------- -
------ -
-----
------- ------------------------ ---------------------------- --
------
--
-
-
------ ------- ----这样，我们就可以得到一个默认的 wysiwyg 编辑器。当用户写入内容时， handleChange 方法会被调用，将当前编辑器的值设置为输入内容。
我们还可以在 wysiwyg 中添加其他元素，例如标题和工具栏。下面我们将添加一个标题和工具栏：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ - ---- -----------------------
----- --- ------- --------------- -
----- - -
------ ---
--
------------ - ------- -- -
--------------- ----- ---
--
---------- - -- -- -
---------------------------- ------ ------
--
------------ - -- -- -
------------------------------ ------ ------
--
--------------- - -- -- -
--------------------------------- ------ ------
--
-------- -
------ -
-----
------------
-----
------- ---------------------------------------
------- -------------------------------------------
------- -------------------------------------------------
------
------- ------------------------ ---------------------------- --
------
--
-
-
------ ------- ----我们添加了三个按钮以实现加粗、斜体和下划线的效果。
自定义 wysiwyg
wysiwyg 包提供了许多配置选项，可以方便地自定义编辑器。我们可以通过将配置选项传递给 <Editor> 组件来自定义 wysiwyg。
例如，我们可以更改 wysiwyg 的语言，添加插件等，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------------------
------ ---- ---- ----------------------------------------
------ -------------- ---- ---------------------------------------------
----- --- ------- --------------- -
----- - -
------ ---
--
------------ - ------- -- -
--------------- ----- ---
--
-------- -
------ -
-----
-------
------------------------
----------------------------
---------------
--------------------------
--
------
--
-
-
------ ------- ----在上面的代码中，我们将语言设置为 enUS，添加了一个任务列表插件。
我们还可以使用 MarkdownPreview 组件在 wysiwyg 中预览所编辑的内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- --------------- - ---- -----------------------
----- --- ------- --------------- -
----- - -
------ ---
--
------------ - ------- -- -
--------------- ----- ---
--
-------- -
------ -
-----
------- ------------------------ ---------------------------- --
---------------- ------------------------- --
------
--
-
-
------ ------- ----结语
本教程介绍了如何使用 wysiwyg 包来创建 wysiwyg 编辑器，同时也讲解了如何使用配置选项自定义编辑器。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671198dd3466f61ffe784