编辑器是基于 Quill 的富文本编辑器组件。
import { Editor } from 'primereact/editor';
编辑器底层使用 Quill 编辑器,因此需要将其作为依赖项安装。
npm install quill
编辑器用作受控组件,具有 value 和 onTextChange 属性。
<Editor value={text} onTextChange={(e) => setText(e.htmlValue)} style={{ height: '320px' }} />
当存在 readOnly 时,该值不能被编辑。
<Editor value="Always bet on Prime!" readOnly style={{ height: '320px' }} />
工具栏使用 headerTemplate 属性进行自定义。有关可用控件,请参阅 Quill 文档。
<Editor value={text} onTextChange={(e) => setText(e.htmlValue)} headerTemplate={header} style={{ height: '320px' }} />
Quill 在可访问性方面表现良好。工具栏中的元素可以使用 Tab 键进行切换,并具有屏幕阅读器所需的 ARIA 角色/属性。