react 如何实现富文本编辑器

 首先先安装react中的react-quill依赖

npm install react-quill --save

在项目的跟文件引入样式

import "react-quill/dist/quill.snow.css";

最简单的reactQuill组件

import React from 'react';
import { useState } from "react";
import ReactQuill from "react-quill";
const App = () => {
  const [value, setValue] = useState("1212");
  const handleChangeValue = (value) => {
    console.log("富文本的值：", value);
    setValue(value);
  };
  return (
    <div>
      <h2 className="title">富文本编辑器</h2>
      <div className="quill-editor-wrap">
        <ReactQuill theme="snow" value={value} onChange={handleChangeValue} />
      </div>
    </div>
  );
}

export default App;

 实现效果：

quill中文文档