在前端开发中，富文本编辑器是一个非常重要的工具。wysihtml5是一款基于HTML5的富文本编辑器，它支持多种浏览器，并且易于使用和集成到你的项目中。
安装
你可以通过npm来安装wysihtml5包：
npm install wysihtml5或者你也可以直接将其下载到本地并引入到你的项目中。
使用
HTML结构
首先，在HTML文件中创建一个空白的div用来作为编辑器容器：
<div id="editor" contenteditable="true"></div>
引入Wysihtml5
import wysihtml5 from 'wysihtml5';
初始化编辑器
const editor = new wysihtml5.Editor("editor", { toolbar: "toolbar", parserRules: wysihtml5ParserRules, });
其中，第一个参数为编辑器容器的ID，第二个参数为配置项。
配置项
toolbar- 工具栏的DOM元素ID。parserRules- 解析器规则，用于定义编辑器的内容类型。
工具栏
在HTML文件中创建一个工具栏DOM元素：
<div id="toolbar"> <button data-wysihtml5-command="bold">加粗</button> <button data-wysihtml5-command="italic">斜体</button> <button data-wysihtml5-command="insertUnorderedList">无序列表</button> <button data-wysihtml5-command="insertOrderedList">有序列表</button> <button data-wysihtml5-command="createLink">超链接</button> </div>
其中，按钮元素的data-wysihtml5-command属性用于定义按钮的行为。
解析器规则
在JavaScript文件中定义解析器规则：
-- -------------------- ---- ------- ------ - ------------ - ---- --------------------------------- ----- -------------------- - ----------------- ------------- - ----- - -- ----- --- ----- --- ----- --- ----- --- ----- -- - --------------- - ------- --------- ---- ---------- -- ----------------- - ----- ----- -- --------- -- ----- --- - -- ------- ----- --- ---- - ---展开代码
其中，defaultRules是Wysihtml5提供的默认规则，我们可以修改其中的标签来适应我们的需求。
示例代码
完整的HTML和JavaScript代码示例如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------------- --------------- ------- ------ ---- ----------- ----------------------------- ---- ------------- ------- ----------------------------------------- ------- ------------------------------------------- ------- ---------------------------------------------------------- ------- -------------------------------------------------------- ------- ------------------------------------------------ ------ ------- ---------------------------------------------------------------------------------------- ------- --------------------------------- -------- ----- ------ - --- -------------------------- - -------- ---------- ------------ --------------------- --- --------- ------- -------展开代码
-- -------------------- ---- ------- ------ --------- ---- ------------ ------ - ------------ - ---- --------------------------------- ----- -------------------- - ----------------- ------------- - ----- - -- ----- --- ----- --- ----- --- ----- --- ----- -- - --------------- - ------- --------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
