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