打造企业级编辑器：ReactQuill 自定义格式与模块开发实战

打造企业级编辑器：ReactQuill 自定义格式与模块开发实战

【免费下载链接】react-quill A Quill component for React. 项目地址: https://gitcode.com/gh_mirrors/re/react-quill

项目概述

ReactQuill 是一个基于 Quill 编辑器的 React 组件，提供了丰富的文本编辑功能和灵活的定制选项。本教程将深入探讨如何利用 ReactQuill 构建企业级编辑器，重点介绍自定义格式与模块开发的实战技巧。

官方文档：README.md 演示示例：demo/index.html

快速开始

安装与基础使用

要开始使用 ReactQuill，首先需要安装依赖包。使用 npm 或 yarn 进行安装：

npm install react-quill --save
# 或
yarn add react-quill

基础使用示例：

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

function MyComponent() {
  const [value, setValue] = useState('');

  return <ReactQuill theme="snow" value={value} onChange={setValue} />;
}

浏览器直接引入

如果不使用构建工具，也可以通过 CDN 直接在浏览器中引入 ReactQuill：

<link rel="stylesheet" href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css" />
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/react-quill@1.3.3/dist/react-quill.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

核心功能定制

自定义工具栏

ReactQuill 提供了两种自定义工具栏的方式：使用默认工具栏元素数组或自定义 HTML 工具栏。

默认工具栏元素

通过 modules 属性配置工具栏：

modules = {
  toolbar: [
    [{ 'header': [1, 2, false] }],
    ['bold', 'italic', 'underline','strike', 'blockquote'],
    [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
    ['link', 'image'],
    ['clean']
  ],
}

formats = [
  'header',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'image'
]

HTML 工具栏

创建自定义 HTML 工具栏组件：

const CustomToolbar = () => (
  <div id="toolbar">
    <select className="ql-header" defaultValue="">
      <option value="1"></option>
      <option value="2"></option>
      <option selected></option>
    </select>
    <button className="ql-bold"></button>
    <button className="ql-italic"></button>
    <select className="ql-color">
      <option value="red"></option>
      <option value="green"></option>
      <option value="blue"></option>
      <option value="orange"></option>
      <option value="violet"></option>
      <option value="#d0d1d2"></option>
      <option selected></option>
    </select>
    <button className="ql-insertStar">★</button>
  </div>
);

然后在编辑器中使用自定义工具栏：

<ReactQuill
  modules={{
    toolbar: {
      container: '#toolbar',
      handlers: {
        insertStar: () => {
          const cursorPosition = this.quill.getSelection().index;
          this.quill.insertText(cursorPosition, '★');
          this.quill.setSelection(cursorPosition + 1);
        }
      }
    }
  }}
/>

自定义格式

ReactQuill 允许创建自定义格式，通过 Parchment 库扩展 Quill 的功能。以下是创建自定义格式的示例：

import ReactQuill, { Quill } from 'react-quill';

// 创建自定义格式
const Inline = Quill.import('blots/inline');
class HighlightBlot extends Inline { }
HighlightBlot.blotName = 'highlight';
HighlightBlot.tagName = 'span';
HighlightBlot.className = 'highlight';
Quill.register('formats/highlight', HighlightBlot);

// 在编辑器中使用
<ReactQuill
  formats={['highlight', 'bold', 'italic']}
  modules={{
    toolbar: [
      [{ 'highlight': ['yellow', 'green', 'blue'] }],
      ['bold', 'italic']
    ]
  }}
/>

自定义模块

ReactQuill 支持自定义模块，以扩展编辑器功能。以下是创建自定义模块的基本步骤：

1. 创建模块类
2. 注册模块
3. 在编辑器中配置使用

// 自定义模块示例
class CustomModule {
  constructor(quill, options) {
    this.quill = quill;
    this.options = options;
    this.quill.on('text-change', this.handleTextChange.bind(this));
  }

  handleTextChange() {
    console.log('Text changed:', this.quill.getText());
  }
}

// 注册模块
Quill.register('modules/customModule', CustomModule);

// 在编辑器中使用
<ReactQuill
  modules={{
    customModule: true,
    toolbar: [['bold', 'italic']]
  }}
/>

高级应用

使用 Delta 格式

ReactQuill 支持使用 Quill Delta 格式处理编辑器内容，Delta 提供了比 HTML 更强大的内容表示方式：

import { Delta } from 'quill';

function MyComponent() {
  const [delta, setDelta] = useState(new Delta());

  return (
    <ReactQuill
      value={delta}
      onChange={(content, delta, source, editor) => {
        setDelta(editor.getContents());
      }}
    />
  );
}

编辑器事件处理

ReactQuill 提供了丰富的事件处理函数，可以监听编辑器的各种状态变化：

<ReactQuill
  onFocus={(range, source, editor) => console.log('Focused:', range)}
  onBlur={(range, source, editor) => console.log('Blurred:', range)}
  onChangeSelection={(range, source, editor) => console.log('Selection changed:', range)}
  onKeyPress={(event) => console.log('Key pressed:', event.key)}
/>

获取编辑器实例

通过 ref 获取编辑器实例，以便调用 Quill 的 API：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.quillRef = null;
    this.reactQuillRef = null;
  }

  componentDidMount() {
    this.quillRef = this.reactQuillRef.getEditor();
  }

  insertText = () => {
    this.quillRef.insertText(this.quillRef.getSelection().index, '插入的文本');
  };

  render() {
    return (
      <div>
        <ReactQuill
          ref={(el) => { this.reactQuillRef = el; }}
        />
        <button onClick={this.insertText}>插入文本</button>
      </div>
    );
  }
}

项目结构与资源

项目文件结构

ReactQuill 项目的主要文件结构如下：

• 源代码：src/
• 演示文件：demo/
• 测试文件：test/
• 配置文件：webpack.config.js, tsconfig.json

开发与构建

项目提供了多种 npm 脚本用于开发和构建：

# 构建项目
npm run build

# 开发模式，监听文件变化
npm run watch

# 运行测试
npm run test

# 启动演示应用
npm run demo

总结与展望

通过本教程，我们学习了如何使用 ReactQuill 构建企业级编辑器，包括自定义格式、模块开发等高级功能。ReactQuill 提供了灵活的扩展机制，可以满足各种复杂的编辑需求。

未来，ReactQuill 将继续改进性能，增加更多实用功能，并提供更好的开发体验。我们鼓励开发者积极参与项目贡献，共同推动 ReactQuill 的发展。

贡献指南：CONTRIBUTING.md 变更日志：CHANGELOG.md

【免费下载链接】react-quill A Quill component for React. 项目地址: https://gitcode.com/gh_mirrors/re/react-quill