quill在react中的使用

Quill是一个跨平台的功能强大的富文本编辑器。开发者可以通过简单的API来控制编辑器的内容。Quill是用DOM元素初始化成编辑器，DOM元素内的内容将成为Quill的初始内容。

安装：

npm i quill

引入样式：

@import 'quill/dist/quill.snow.css';

初始化：

1. import Quill from 'quill';

2. new Quill("#editor2", options);

import React, {useEffect} from "react";
import Quill from "quill";
import "quill/dist/quill.snow.css";

let quill: any = null;

const RichText = () => {
  //富文本modules配置
  const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
    ["blockquote", "code-block"], // 引用，代码块
    [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
    [{ list: "ordered" }, { list: "bullet" }], // 列表
    [{ script: "sub" }, { script: "super" }], // 上下标
    [{ indent: "-1" }, { indent: "+1" }], // 缩进
    [{ direction: "rtl" }], // 文本方向
    [{ size: ["small", false, "large", "huge"] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
    [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
    [{ font: [] }], // 字体
    [{ align: [] }], // 对齐方式
    ["clean"], // 清除字体样式
    ["image", "video"], // 上传图片、上传视频               // remove formatting button
  ];

  //富文本配置
  const options = {
    modules: {
      toolbar: toolbarOptions,
    },
    placeholder: "请输入...",
    theme: "snow",
  };

  
  useEffect(() => {
      quill = new Quill("#editor2", options);
    }
  }, []);

  return (
    <div>
      <div id="editor2" />
    </div>
  );
};

export default RichText;

效果如下：

回显富文本编辑器中的信息

在预览富文本时可以这样用：

//把富文本设置为bubble模式
//并且quill.enable(false);这样在预览的时候可以把quill的气泡卡片关闭
const quill2 = new Quill("#editor4", {
      modules: {
        toolbar: toolbarOptions,
      },
      theme: "bubble",
    });
quill.enable(false);

效果如下：

显示富文本格式内容

quill.pasteHTML();

效果如下：

更多详细方法请看：https://www.kancloud.cn/liuwave/quill/1409423