Jodit 是一个适用于浏览器和 Node.js 的轻量级富文本编辑器。它提供了许多功能，包括但不限于 Markdown 支持、拖放图像上传、多语言支持等。本文将介绍如何使用 npm 包 Jodit。
安装
使用 npm 命令安装 Jodit：
npm install jodit
使用
在 HTML 中引入 Jodit 相关文件：
<link rel="stylesheet" href="path/to/jodit.min.css"> <script src="path/to/jodit.min.js"></script>
然后在 JavaScript 中实例化 Jodit 编辑器：
const editor = new Jodit("#editor");其中 #editor 是你想要添加编辑器的 DOM 元素的 CSS 选择器。
基本设置
以下是一些基本的设置：
const editor = new Jodit("#editor", {
buttons: "bold,italic,underline,strikethrough|ul,ol",
spellcheck: false,
toolbarSticky: false,
});buttons 设置工具栏上显示的按钮。spellcheck 禁用拼写检查。toolbarSticky 禁用工具栏粘性。
获取和设置内容
获取编辑器的内容：
const content = editor.value;
设置编辑器的内容：
editor.value = "Hello, world!";
自定义配置项
可以通过 setOptions 方法自定义配置项。以下是一些常用的自定义配置：
editor.setOptions({
toolbarAdaptive: false,
height: "400px",
minHeight: "200px",
maxHeight: "600px",
iframeStyle:
"body { font-family: 'Arial'; font-size: 16px; color: #333; }",
});toolbarAdaptive 禁用自适应工具栏。height，minHeight 和 maxHeight 分别设置编辑器的高度、最小高度和最大高度。iframeStyle 自定义编辑器中的样式。
事件监听
可以通过 on 方法监听编辑器的事件。以下是一些常用的事件：
-- -------------------- ---- ------- ------------------- ------------ -- - ------------------------ --- ------------------ -- -- - ------------------- ---------- --- ----------------- -- -- - ------------------- ---------- ---
change 在编辑器内容发生改变时触发。focus 在编辑器获得焦点时触发。blur 在编辑器失去焦点时触发。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
------------ ---------------
----- --------------- --
----- ---------------- ---------------------------- --
-------
------
--------- -----------------------
------- ------------------------------------
--------
----- ------ - --- ---------------- -
-------- --------------------------------------------
----------- ------
-------------- ------
---
-------------------
---------------- ------
------- --------
---------- --------
---------- --------
------------
----- - ------------ -------- ---------- ----- ------ ----- ---
---
------------------- ------------ -- -
------------------------
---
---------
-------
-------结论
使用 Jodit 可以轻松地在网站或应用程序中添加富文本编辑器。本文介绍了如何使用 npm 包 Jodit，包括安装、基本设置、自定义配置项和事件监听等内容。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38875