reacr富文本编辑器

目标：能够富文本编辑器

步骤：

安装富文本编辑器：yarn add react-quill 导入富文本编辑器组件以及样式文件 渲染富文本编辑器组件 通过 Form 组件的
initialValues 为富文本编辑器设置初始值，否则会报错 调整富文本编辑器的样式

+ import ReactQuill from 'react-quill'
+ import 'react-quill/dist/quill.snow.css'

const Publish = () => {
  return (
    // ...
    <Form
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 16 }}
-      // 注意：此处需要为富文本编辑表示的 content 文章内容设置默认值（报错）
+      initialValues={{ content: '' }}
    >
      <Form.Item
        label="内容"
        name="content"
        rules={[{ required: true, message: '请输入文章内容' }]}
      >
+        <ReactQuill
+          className="publish-quill"
+          theme="snow"
+         placeholder="请输入文章内容"
+       />
      </Form.Item>
    </Form>
  )
}
:global {
  .publish-quill {
    .ql-editor {
      height: 300px;
    }
  }
}