在前端开发中，实现所见即所得（What You See Is What You Get，简称 WYSIWYG）编辑器的需求是非常常见的。wysiwyg.js 就是一个开源的 Javascript 库，提供了一个简单易用的 WYSIWYG HTML 编辑器组件，可用于 web 应用程序中。
安装
wysiwyg.js 是一个 npm 包，可以使用 npm 来安装：
--- ------- ----------
安装好之后，在你的代码中引入：
------ ------- ---- -------------
或者，也可以在你的 HTML 文件中通过 script 标签引入：
------- -----------------------------------------------------------
使用
初始化
在引入 wysiwyg.js 之后，需要初始化一个 wysiwyg 编辑器实例。可以简单地通过调用 new wysiwyg(options) 来初始化。
----- ------ - --- --------- -------- --------------------------------- ---
上述代码中，我们将 wysiwyg 实例化，并将其初始化到 ID 为 editor 的元素上，使其成为一个富文本编辑器。
配置选项
在初始化 wysiwyg 编辑器实例时，可以传入一个包含各种配置选项的 options 对象。以下是一些比较常见的配置选项：
element：编辑器要绑定的 HTML 元素。autoHeight：是否根据内容自动调整编辑器高度。toolbar：是否显示工具栏。buttons：工具栏上所要显示按钮的数组。placeholder：编辑器为空时显示的占位符。
----- ------ - --- ---------
-------- ----------------------------------
----------- -----
-------- -----
-------- -
------- --------- ------------ ----------------
----
----------- ------------ ------------
----
-------------- ---------------- --------------- --------------
----
-------- ---------------- -------------- --------
----
------- -------- --------
----
------------- ------- ------
--
------------ ----------
---事件监听
wysiwyg 编辑器提供了几个事件，可以用于监听编辑器内部发生的操作，如内容修改、选区变化等等。
------------------- ------- -- - ----------------------- --------------- --- ---------------------------- ------- -- - ------------------------ ----------------- ---
获取和设置内容
通过 getContent() 方法可以获取编辑器中的 HTML 内容。
----- ------- - --------------------
通过 setContent(html) 方法可以设置编辑器中的 HTML 内容。
---------------------------- ------------------------------
示例代码
--------- -----
----- ----------
------
----- ----------------
-------------------------
------- ----------------------------------------------------------------------------------
-------
------
---- ------------------
------- ------------------------------
--------
----- ------ - --- ---------
-------- ----------------------------------
----------- -----
-------- -----
-------- -
------- --------- ------------ ----------------
----
----------- ------------ ------------
----
-------------- ---------------- --------------- --------------
----
-------- ---------------- -------------- --------
----
------- -------- --------
----
------------- ------- ------
--
------------ ----------
---
----- ---------------- - ---------------------------------------
------------------------------------------ -- -- -
----- ------- - --------------------
---------------------
---
---------
-------
-------总结
wysiwyg.js 提供了一个高度可定制化的 WYSIWYG HTML 编辑器组件，可以轻松地在 web 应用程序中实现所见即所得的编辑器。
通过对 wysiwyg.js 提供的事件监听和内容获取/设置方法的学习，我们可以更好地利用这个强大的编辑器组件，并提升我们的开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671198dd3466f61ffe79a