ReactQuill富文本编辑器的字体、大小和标题等格式无法正常工作。 -相关文档
- 确认React Quill的版本是否与相关依赖的版本相匹配。例如,如果您的React版本为16.x,则应该使用React Quill的版本为1.0或更高版本。
- 确认您是否正确设置了Quill的modules。检查是否添加了Quill提供的相关模块,例如toolbar、link等。以下是一个简单的示例:
- 检查样式表是否正确加载。在使用Quill编辑器之前,确保正确引入了Quill的CSS样式表。
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; //引入样式表
const modules = {
toolbar: [
[{ 'header': [1, 2, 3, false] }],
[{ 'font': [] }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'color': [] }, { 'background': [] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'align': [] }],
['link', 'image'],
['clean']
class QuillEditor 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={modules} />
通过上述方法,您应该可以解决React Quill编辑器格式无法正常工作的问题。