react 如何实现富文本编辑器

筱闯~

已于 2023-06-03 09:23:22 修改

阅读量938

点赞数

文章标签： react.js javascript 前端

于 2023-06-03 09:23:20 首次发布

本文链接：https://blog.youkuaiyun.com/m0_64544033/article/details/131017635

版权

文章展示了如何在React项目中安装和使用React-Quill库来创建一个富文本编辑器。首先通过npm安装react-quill，然后引入样式文件。接着，利用useStateHook管理状态，并创建ReactQuill组件，实现编辑器的显示和值的变化监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先先安装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;

实现效果：