[JavaScript知识库]react富文本编辑器 quill

npm install react-quill

	"react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-quill": "^1.3.5",

hook封装

import React, { useEffect, useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const MyComponent = (props) => {
  const { setContent,} = props;
  const [value, setValue] = useState('');
  useEffect(() => {
    if (value) {
      setContent(value);
    }
  }, [value]);


  const modules = {
    toolbar: {
      container: [
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ align: [] }],
        [{ color: [] }, { background: [] }],
        ['link', 'image'],
        ['clean'],
      ],
    },
    //如果不自定义上传下面的可以不要
    //   handlers: {
    //     image() {
    //       imageHandler.call(this, props.action);
    //     },
    //   },
  };

  return (
    <ReactQuill
      style={{ height: 400 }}
      theme="snow"
      value={value}
      onChange={setValue}
      modules={modules}
      className=" ql-editor"
    />
  );
};

export default MyComponent;

设置
style={{ height: 400 }}
否则 富文本编辑只有一行

设置
const { setContent,} = props;
为了给父组件传值
监听value，如果变化，给父组件传值

 useEffect(() => {
    if (value) {
      setContent(value);
    }
  }, [value]);

父组件

...
import ReactQuill from '../../../components/ReactQuill';
...
const App = (props) => {
  const [content, setContent] = useState();
  ...
<ReactQuill setContent={setContent} />
...

quill不太好用，可以用wangEditor，
https://www.wangeditor.com/
文档很详细

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖