react实现富文本编译器

下载插件

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;

实现效果

利用方法来解析html标签

function createEvent() {
        return { __html: value };
    }
    <div style={{ width: '50%' }} dangerouslySetInnerHTML={createEvent()}></div>
                    </div>