首页react-quill 自定义行高

react-quill 自定义行高

时间: 2023-06-29 21:19:40 浏览: 505

要在 React-Quill 编辑器中自定义行高，可以使用 Quill 自带的 line-height 模块。首先需要在 React-Quill 的配置中添加 line-height 模块，然后在需要自定义行高的地方调用该模块的 API。以下是一个示例代码： ```javascript import ReactQuill, { Quill } from 'react-quill'; import 'react-quill/dist/quill.snow.css'; // 添加 line-height 模块 var lineHeight = Quill.import('attributors/style/line-height'); lineHeight.whitelist = ['1', '1.5', '2', '2.5', '3']; Quill.register(lineHeight, true); class Editor extends React.Component { constructor(props) { super(props); this.state = { text: '' }; this.handleChange = this.handleChange.bind(this); } handleChange(value) { this.setState({ text: value }); } render() { return ( <ReactQuill value={this.state.text} onChange={this.handleChange} modules={{ toolbar: [ ['bold', 'italic', 'underline', 'strike'], // 文字样式 [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 标题 [{ 'list': 'ordered'}, { 'list': 'bullet' }], // 列表 [{ 'align': [] }], // 对齐方式 [{ 'color': [] }, { 'background': [] }], // 文字颜色和背景色 ['clean'] // 清除格式 ], 'line-height': {} // 添加 line-height 模块 }} /> ); } } ``` 要注意的是，使用 line-height 模块设置行高时，需要在模块的 whitelist 中指定可用的行高选项，这里示例中设置了五个选项，分别为 1、1.5、2、2.5 和 3。在调用模块的 API 时，需要使用字符串形式的行高值，例如 `'1.5'`。

阅读全文