在前端开发中，富文本编辑器是一个非常重要的工具。wysihtml5是一款基于HTML5的富文本编辑器，它支持多种浏览器，并且易于使用和集成到你的项目中。
安装
你可以通过npm来安装wysihtml5包：
--- ------- ---------
或者你也可以直接将其下载到本地并引入到你的项目中。
使用
HTML结构
首先，在HTML文件中创建一个空白的div用来作为编辑器容器：
---- ----------- -----------------------------
引入Wysihtml5
------ --------- ---- ------------
初始化编辑器
----- ------ - --- -------------------------- - -------- ---------- ------------ --------------------- ---
其中，第一个参数为编辑器容器的ID，第二个参数为配置项。
配置项
toolbar- 工具栏的DOM元素ID。parserRules- 解析器规则，用于定义编辑器的内容类型。
工具栏
在HTML文件中创建一个工具栏DOM元素：
---- ------------- ------- ----------------------------------------- ------- ------------------------------------------- ------- ---------------------------------------------------------- ------- -------------------------------------------------------- ------- ------------------------------------------------ ------
其中，按钮元素的data-wysihtml5-command属性用于定义按钮的行为。
解析器规则
在JavaScript文件中定义解析器规则：
------ - ------------ - ---- ---------------------------------
----- -------------------- - ----------------- ------------- -
----- -
-- -----
--- -----
--- -----
--- -----
--- -----
-- -
--------------- -
------- ---------
---- ----------
--
----------------- -
----- ----- -- --------- -- ----- ---
-
--
------- -----
--- ----
-
---其中，defaultRules是Wysihtml5提供的默认规则，我们可以修改其中的标签来适应我们的需求。
示例代码
完整的HTML和JavaScript代码示例如下：
--------- -----
----- ----------
------
----- ----------------
---------------- ---------------
-------
------
---- ----------- -----------------------------
---- -------------
------- -----------------------------------------
------- -------------------------------------------
------- ----------------------------------------------------------
------- --------------------------------------------------------
------- ------------------------------------------------
------
------- ----------------------------------------------------------------------------------------
------- ---------------------------------
--------
----- ------ - --- -------------------------- -
-------- ----------
------------ ---------------------
---
---------
-------
------------- --------- ---- ------------
------ - ------------ - ---- ---------------------------------
----- -------------------- - ----------------- ------------- -
----- -
-- -----
--- -----
--- -----
--- -----
--- -----
-- -
--------------- -
------- ---------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------