简介
@jigsaw/react-quill 是一款基于 Quill.js 实现的 React 富文本编辑器包。Quill.js 是一款非常优秀的富文本编辑器，但它不是一个 React 组件。@jigsaw/react-quill 这个包用于封装了 Quill.js，使其可以以 React 组件的形式使用。
安装
你可以使用 npm 安装该包：
npm install @jigsaw/react-quill --save
使用
要使用 @jigsaw/react-quill，你首先需要导入它：
import ReactQuill from '@jigsaw/react-quill';
然后你可以将它用作 React 的一个普通组件：
<ReactQuill />
@jigsaw/react-quill 可以以很多种形式进行配置，下面我们将对一些常用的选项进行详细讲解。
基本用法
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ ---------- ---- ---------------------- ------ ---------------------------------- -------- ----- - ----- ------- --------- - ------------- ----- ------------ - ---------- -- - ------------------- -- ------ - ----------- ------------- ----------------------- -- -- - ------ ------- ----展开代码
在这个例子中，我们将 ReactQuill 的 value 属性绑定到了一个 React state 变量上，然后通过 onChange 属性将改变的值更新到了该 React state 变量上。
自定义工具栏
在 ReactQuill 中，你可以自定义编辑器的工具栏。以下是一个示例：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ ---------- ---- ---------------------- ------ ---------------------------------- ----- ------- - - -------- - -- --------- --- -- ------ --- -------- --------- ------------ --------- -------------- --------- ----------- -------- ---------- ---------- ------ ---------- ------- -------- --------- --------- - -- -------- ----- - ----- ------- --------- - ------------- ----- ------------ - ---------- -- - ------------------- -- ------ - ----------- ------------- ----------------------- ----------------- -- -- - ------ ------- ----展开代码
我们定义了 modules 对象，其中 toolbar 用于定制工具栏。这里的工具栏的结构非常清晰：它包含了一些数组，每个数组包含了几个字符串。这些字符串表示了各种不同的工具栏按钮。按钮的种类和行为在 Quill.js 的文档中有相应的说明。
一旦你定义了 modules，你只需将其作为 ReactQuill 的 modules 属性值传入即可。
总结
在这篇文章中，我们通过研究 @jigsaw/react-quill 的使用，学习了如何将 Quill.js 当做 React 组件使用，并定制了编辑器的工具栏。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc4967216659e24431d
