当前位置：首页 > news >正文

ReactQuill企业级编辑器开发：从定制到性能优化全攻略

news 2026/8/18 20:35:15

ReactQuill企业级编辑器开发：从定制到性能优化全攻略

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

引言：企业级编辑器的技术挑战与解决方案

在现代Web应用开发中，富文本编辑器作为内容创作的核心工具，其功能完整性、性能表现和用户体验直接影响产品竞争力。ReactQuill作为基于Quill内核的React组件，凭借其模块化架构和灵活的定制能力，成为构建企业级编辑器的理想选择。本文将系统讲解如何基于ReactQuill打造满足复杂业务需求的编辑器解决方案，从基础定制到深度性能优化，全面覆盖企业级应用开发的关键技术点。

一、ReactQuill核心架构解析

学习目标

理解Quill内核与React组件的通信机制
掌握ReactQuill的模块化设计原理
熟悉编辑器初始化流程与配置项

1.1 Quill与React的桥接机制

ReactQuill本质上是Quill编辑器的React封装，其核心在于建立了React组件与Quill实例之间的双向通信通道。这种通信通过以下机制实现：

import React, { useRef, useEffect } from 'react'; import ReactQuill from 'react-quill'; import 'react-quill/dist/quill.snow.css'; function EditorComponent() { const reactQuillRef = useRef(null); // 获取Quill实例 useEffect(() => { if (reactQuillRef.current) { const quillInstance = reactQuillRef.current.getEditor(); console.log('Quill实例初始化完成', quillInstance); // 监听Quill事件 quillInstance.on('text-change', (delta, oldContents, source) => { if (source !== 'user') return; console.log('用户输入触发文本变化', delta); }); } }, []); return ( <ReactQuill ref={reactQuillRef} theme="snow" value="" onChange={(content, delta, source, editor) => { // React状态更新 console.log('编辑器内容变化', content); }} /> ); }

实现原理：ReactQuill通过ref暴露Quill实例，使开发者能够直接操作底层API。同时通过onChange等props将Quill的内部状态变化同步到React组件中，形成双向数据流。

1.2 核心模块与依赖关系

ReactQuill的功能由以下核心模块构成：

编辑器核心(Editor)：基于Quill实现的富文本编辑引擎
工具栏(Toolbar)：提供格式化操作界面
格式系统(Formats)：定义文本样式和结构的渲染规则
模块系统(Modules)：可扩展的功能模块架构

这些模块通过依赖注入的方式组合，形成完整的编辑器功能。理解这种模块化设计有助于我们进行深度定制。

二、企业级工具栏定制实战

学习目标

掌握工具栏的两种定制方式
实现复杂交互的自定义工具按钮
理解工具栏事件处理机制

2.1 声明式工具栏配置

对于简单的工具栏需求，可以通过数组配置快速实现：

const toolbarOptions = [ // 标题 [{ 'header': [1, 2, 3, 4, 5, 6, false] }], // 文本样式 ['bold', 'italic', 'underline', 'strike'], // 列表 [{ 'list': 'ordered'}, { 'list': 'bullet' }], // 对齐方式 [{ 'align': [] }], // 链接和图片 ['link', 'image'], // 清除格式 ['clean'] ]; function BasicToolbarEditor() { return ( <ReactQuill theme="snow" modules={{ toolbar: toolbarOptions }} placeholder="开始编辑..." /> ); }

应用场景：适用于需求明确、功能固定的编辑器场景，如博客后台、内容管理系统等。

2.2 自定义HTML工具栏

对于复杂交互需求，HTML工具栏提供更大的灵活性：

// 自定义工具栏组件 const CustomToolbar = () => ( <div className="custom-toolbar"> <select className="ql-header" defaultValue=""> <option value="1">标题 1</option> <option value="2">标题 2</option> <option value="">正文</option> </select> <button className="ql-bold">加粗</button> <button className="ql-italic">斜体</button> {/* 自定义表情按钮 */} <button className="ql-emoji" title="插入表情">😊</button> {/* 自定义代码块按钮 */} <button className="ql-code-block" title="代码块"> <code>&lt;/&gt;</code> </button> </div> ); // 编辑器组件 function AdvancedToolbarEditor() { // 处理自定义按钮事件 const handleToolbar = () => ({ emoji: () => { const quill = reactQuillRef.current.getEditor(); const position = quill.getSelection().index; // 插入表情 quill.insertText(position, '😊'); // 移动光标 quill.setSelection(position + 1); }, 'code-block': () => { const quill = reactQuillRef.current.getEditor(); const format = quill.getFormat(); // 切换代码块格式 quill.format('code-block', !format['code-block']); } }); const reactQuillRef = useRef(null); return ( <div className="editor-container"> <CustomToolbar /> <ReactQuill ref={reactQuillRef} theme="snow" modules={{ toolbar: { container: '.custom-toolbar', handlers: handleToolbar() } }} /> </div> ); }

应用场景：适用于需要高度定制化工具栏的企业级应用，如在线文档协作工具、专业内容创作平台等。

三、自定义格式开发详解

学习目标

掌握Quill格式系统的工作原理
开发自定义行内格式和块级格式
解决格式之间的冲突问题

3.1 行内格式开发

行内格式用于修饰文本片段，如高亮、自定义颜色等：

import ReactQuill, { Quill } from 'react-quill'; // 1. 导入基础格式类 const Inline = Quill.import('blots/inline'); // 2. 定义自定义格式类 class HighlightBlot extends Inline { // 静态属性定义格式名称、标签和样式类 static blotName = 'highlight'; // 格式名称，用于toolbar配置 static tagName = 'span'; // 对应的HTML标签 static className = 'text-highlight'; // CSS类名 // 构造函数 constructor(domNode) { super(domNode); // 可以在这里处理DOM节点初始化 } // 静态方法：从DOM节点创建 blot static create(value) { const node = super.create(); // 根据传入的值设置样式 node.style.backgroundColor = value; return node; } // 返回当前格式的值 value() { return this.domNode.style.backgroundColor; } } // 3. 注册自定义格式 Quill.register('formats/highlight', HighlightBlot); // 4. 使用自定义格式 function HighlightEditor() { return ( <ReactQuill theme="snow" formats={[ 'header', 'bold', 'italic', 'underline', 'highlight' // 添加自定义格式 ]} modules={{ toolbar: [ [{ 'header': [1, 2, false] }], ['bold', 'italic', 'underline'], // 自定义格式配置 [{ 'highlight': ['yellow', 'green', 'blue', 'pink'] }] ] }} /> ); }

实现原理：自定义格式通过继承Quill的Blot类实现，每个Blot对应一种HTML元素，通过静态属性定义格式行为，通过实例方法处理格式操作。

3.2 块级格式开发

块级格式用于定义段落级别的样式，如自定义引用、代码块等：

// 1. 导入块级格式基类 const Block = Quill.import('blots/block'); // 2. 定义自定义块级格式 class CustomQuoteBlot extends Block { static blotName = 'custom-quote'; static tagName = 'blockquote'; static className = 'custom-quote'; // 静态方法：格式化值处理 static formats(domNode) { // 可以从DOM节点提取格式信息 return { author: domNode.getAttribute('data-author') || null, source: domNode.getAttribute('data-source') || null }; } // 应用格式 format(name, value) { if (name === 'custom-quote' && value) { // 设置自定义属性 this.domNode.setAttribute('data-author', value.author || ''); this.domNode.setAttribute('data-source', value.source || ''); } else { super.format(name, value); } } } // 3. 注册格式 Quill.register('formats/custom-quote', CustomQuoteBlot); // 4. 使用自定义块级格式 function CustomBlockEditor() { const insertCustomQuote = () => { const quill = reactQuillRef.current.getEditor(); const selection = quill.getSelection(); if (selection) { // 保存选中内容 const selectedContent = quill.getContents(selection.index, selection.length); // 删除选中内容 quill.deleteText(selection.index, selection.length); // 插入自定义引用块 quill.insertEmbed(selection.index, 'custom-quote', { author: '张三', source: '企业内部文档' }); // 在引用块内插入内容 quill.insertText(selection.index + 1, '\n'); quill.setContents(selection.index + 1, selectedContent); quill.setSelection(selection.index + 1 + selectedContent.length); } }; const reactQuillRef = useRef(null); return ( <div> <button onClick={insertCustomQuote}>插入引用</button> <ReactQuill ref={reactQuillRef} theme="snow" formats={[...ReactQuill.defaultFormats, 'custom-quote']} modules={{ toolbar: [ [{ 'header': [1, 2, false] }], ['bold', 'italic', 'underline'] ] }} /> </div> ); }

应用场景：企业文档系统中需要特殊排版的内容块，如法律条款引用、数据来源标注、专业术语解释等。

四、高级模块开发全流程

学习目标

掌握模块开发的完整工作流
实现具有复杂交互的自定义模块
理解模块间通信机制

4.1 模块开发工作流

企业级模块开发应遵循以下工作流程：

4.1.1 需求分析与API设计

以"字数统计模块"为例：

需求：

实时统计中文字符、英文字符、单词数
显示剩余可输入字数
超过限制时给出警告

API设计：

// 模块配置 const wordCounterConfig = { limit: 1000, // 字数限制 showChars: true, // 显示字符数 showWords: true, // 显示单词数 warningPercentage: 0.9 // 警告阈值 }; // 模块接口 class WordCounter { constructor(quill, options) {} // 构造函数 init() {} // 初始化 updateCounter() {} // 更新计数器 destroy() {} // 销毁清理 }

4.1.2 模块实现

import Quill from 'quill'; class WordCounter { constructor(quill, options) { // 保存Quill实例和配置 this.quill = quill; this.options = { limit: 1000, showChars: true, showWords: true, warningPercentage: 0.9, ...options }; // 创建计数器DOM元素 this.container = document.createElement('div'); this.container.className = 'ql-word-counter'; this.quill.container.parentNode.appendChild(this.container); // 绑定事件 this.onTextChange = this.onTextChange.bind(this); this.quill.on('text-change', this.onTextChange); // 初始化 this.onTextChange(); } // 文本变化处理 onTextChange() { const text = this.quill.getText(); const stats = this.calculateStats(text); this.updateDisplay(stats); } // 计算统计数据 calculateStats(text) { // 中文字符统计 const chineseChars = (text.match(/[\u4e00-\u9fa5]/g) || []).length; // 英文字符统计 const englishChars = text.replace(/[\u4e00-\u9fa5]/g, '').length; // 单词统计（简单实现） const words = text.trim() === '' ? 0 : text.trim().split(/\s+/).length; return { totalChars: text.length, chineseChars, englishChars, words, remaining: Math.max(0, this.options.limit - text.length), percentage: text.length / this.options.limit }; } // 更新显示 updateDisplay(stats) { let html = []; if (this.options.showChars) { html.push(`字符: ${stats.totalChars}`); } if (this.options.showWords) { html.push(`单词: ${stats.words}`); } html.push(`剩余: ${stats.remaining}/${this.options.limit}`); this.container.innerHTML = html.join(' | '); // 警告样式 if (stats.percentage >= this.options.warningPercentage) { this.container.classList.add('ql-word-counter-warning'); if (stats.percentage >= 1) { this.container.classList.add('ql-word-counter-overflow'); } else { this.container.classList.remove('ql-word-counter-overflow'); } } else { this.container.classList.remove('ql-word-counter-warning', 'ql-word-counter-overflow'); } } // 销毁清理 destroy() { this.quill.off('text-change', this.onTextChange); if (this.container && this.container.parentNode) { this.container.parentNode.removeChild(this.container); } } } // 注册模块 Quill.register('modules/wordCounter', WordCounter); // 使用模块 function EditorWithWordCounter() { return ( <ReactQuill theme="snow" modules={{ toolbar: [['bold', 'italic', 'underline']], wordCounter: { limit: 500, warningPercentage: 0.8 } }} /> ); }

4.1.3 模块测试与优化

模块开发完成后，需要进行全面测试：

功能测试：验证字数统计准确性
性能测试：在大数据量下测试性能影响
兼容性测试：在不同浏览器中验证表现

针对性能问题，可以进行如下优化：

// 优化：使用防抖处理频繁文本变化 onTextChange() { if (this.debounceTimer) clearTimeout(this.debounceTimer); this.debounceTimer = setTimeout(() => { const text = this.quill.getText(); const stats = this.calculateStats(text); this.updateDisplay(stats); }, 200); // 200ms防抖延迟 }

五、企业级实战案例

学习目标

掌握协作编辑功能的实现方法
理解内容审核系统的集成方案
学习复杂编辑器场景的架构设计

5.1 实战案例一：富文本协作编辑

实现多人实时协作编辑功能：

import React, { useState, useEffect, useRef } from 'react'; import ReactQuill from 'react-quill'; import QuillCursors from 'quill-cursors'; // 第三方光标插件 import io from 'socket.io-client'; // WebSocket客户端 // 注册光标插件 Quill.register('modules/cursors', QuillCursors); function CollaborativeEditor({ documentId, userId, userName }) { const [content, setContent] = useState(''); const reactQuillRef = useRef(null); const socketRef = useRef(null); const isConnected = useRef(false); const isInitialLoad = useRef(true); // 初始化WebSocket连接 useEffect(() => { // 连接到协作服务器 socketRef.current = io('https://your-collab-server.com'); // 监听连接事件 socketRef.current.on('connect', () => { console.log('Connected to collaboration server'); isConnected.current = true; // 加入文档编辑会话 socketRef.current.emit('join-document', { documentId, userId, userName }); }); // 监听文档数据 socketRef.current.on('document-data', (data) => { if (isInitialLoad.current) { isInitialLoad.current = false; setContent(data.content); } }); // 监听远程变更 socketRef.current.on('remote-change', (data) => { if (data.userId !== userId && reactQuillRef.current) { const quill = reactQuillRef.current.getEditor(); // 暂停本地变更发送 quill.off('text-change', handleLocalTextChange); // 应用远程变更 quill.updateContents(data.delta); // 更新远程用户光标 if (data.cursor) { quill.getModule('cursors').setCursor(data.userId, data.cursor, data.userName); } // 恢复本地变更发送 setTimeout(() => { quill.on('text-change', handleLocalTextChange); }, 0); } }); // 监听用户加入 socketRef.current.on('user-joined', (user) => { console.log(`${user.userName} joined the document`); }); // 清理函数 return () => { if (socketRef.current) { socketRef.current.disconnect(); } }; }, [documentId, userId, userName]); // 处理本地文本变化 const handleLocalTextChange = (delta, oldContents, source) => { if (source !== 'user' || !isConnected.current || isInitialLoad.current) return; // 获取光标位置 const quill = reactQuillRef.current.getEditor(); const selection = quill.getSelection(); // 发送变更到服务器 socketRef.current.emit('local-change', { documentId, userId, userName, delta, cursor: selection }); }; // 处理选择变化（光标移动） const handleSelectionChange = (range, source) => { if (source !== 'user' || !isConnected.current) return; // 发送光标位置更新 socketRef.current.emit('cursor-update', { documentId, userId, userName, cursor: range }); }; return ( <div className="collaborative-editor"> <h3>协作编辑文档: {documentId}</h3> <ReactQuill ref={reactQuillRef} theme="snow" value={content} onChange={(content, delta, source, editor) => { if (source === 'user') { setContent(content); } }} modules={{ toolbar: [ [{ 'header': [1, 2, false] }], ['bold', 'italic', 'underline', 'strike'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['link', 'image'], ['clean'] ], cursors: true // 启用光标插件 }} onTextChange={handleLocalTextChange} onChangeSelection={handleSelectionChange} /> </div> ); }

实现原理：通过WebSocket实现用户间的实时通信，使用Quill的Delta格式表示文档变更，采用OT(Operational Transformation)算法处理并发编辑冲突。

5.2 实战案例二：内容审核系统集成

将编辑器与企业内容审核流程集成：

import React, { useState, useRef } from 'react'; import ReactQuill from 'react-quill'; import axios from 'axios'; // HTTP客户端 function EditorWithContentReview() { const [content, setContent] = useState(''); const [reviewStatus, setReviewStatus] = useState('draft'); // draft, reviewing, approved, rejected const [reviewComments, setReviewComments] = useState([]); const [activeComment, setActiveComment] = useState(null); const reactQuillRef = useRef(null); // 提交审核 const submitForReview = async () => { if (!content.trim()) { alert('内容不能为空'); return; } setReviewStatus('reviewing'); try { await axios.post('/api/content/review', { content, contentType: 'html' }); // 轮询审核状态 startReviewPolling(); } catch (error) { console.error('提交审核失败', error); setReviewStatus('draft'); } }; // 轮询审核状态 const startReviewPolling = () => { const interval = setInterval(async () => { try { const response = await axios.get('/api/content/review/status'); const { status, comments } = response.data; setReviewStatus(status); if (comments && comments.length > 0) { setReviewComments(comments); } // 如果审核完成，停止轮询 if (status === 'approved' || status === 'rejected') { clearInterval(interval); } } catch (error) { console.error('获取审核状态失败', error); clearInterval(interval); } }, 5000); // 每5秒轮询一次 }; // 跳转到评论位置 const jumpToComment = (comment) => { if (!reactQuillRef.current || !comment.position) return; const quill = reactQuillRef.current.getEditor(); const { index, length } = comment.position; // 设置选区 quill.setSelection(index, length); // 滚动到选区 const bounds = quill.getBounds(index, length); const container = quill.container; container.scrollTop = bounds.top - 100; // 滚动到选中区域上方100px setActiveComment(comment); }; // 应用审核建议 const applyCommentSuggestion = (comment) => { if (!reactQuillRef.current || !comment.suggestion) return; const quill = reactQuillRef.current.getEditor(); const { index, length } = comment.position; // 替换文本 quill.deleteText(index, length); quill.insertText(index, comment.suggestion); // 更新内容状态 setContent(quill.root.innerHTML); }; return ( <div className="editor-with-review"> <div className="editor-toolbar"> <button onClick={submitForReview} disabled={reviewStatus === 'reviewing'} className={reviewStatus === 'reviewing' ? 'disabled' : ''} > {reviewStatus === 'reviewing' ? '审核中...' : '提交审核'} </button> <div className="review-status"> 状态: { reviewStatus === 'draft' && '草稿' || reviewStatus === 'reviewing' && '审核中' || reviewStatus === 'approved' && <span className="status-approved">已通过</span> || reviewStatus === 'rejected' && <span className="status-rejected">已拒绝</span> } </div> </div> <ReactQuill ref={reactQuillRef} theme="snow" value={content} onChange={setContent} modules={{ toolbar: [ [{ 'header': [1, 2, false] }], ['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['link', 'image'] ] }} readOnly={reviewStatus === 'reviewing'} /> {reviewComments.length > 0 && ( <div className="review-comments"> <h4>审核意见 ({reviewComments.length})</h4> <ul> {reviewComments.map((comment, index) => ( <li key={index} className={activeComment === comment ? 'active' : ''} > <div className="comment-author"> {comment.reviewer}: </div> <div className="comment-text">{comment.text}</div> {comment.suggestion && ( <div className="comment-suggestion"> 建议: "{comment.suggestion}" <button onClick={() => applyCommentSuggestion(comment)}>应用</button> </div> )} <button onClick={() => jumpToComment(comment)}>查看位置</button> </li> ))} </ul> </div> )} </div> ); }

应用场景：企业内容发布流程中的编辑-审核环节，如新闻稿发布、产品文档审核、营销内容审批等场景。

六、性能优化策略

学习目标

掌握大数据量编辑的优化方法
理解编辑器渲染性能优化技巧
学习事件处理与资源加载优化

6.1 大数据量编辑优化

处理超过10万字的大型文档时，需要特殊优化：

function BigDocumentEditor() { const [content, setContent] = useState(''); const [isLoading, setIsLoading] = useState(false); const reactQuillRef = useRef(null); // 优化1: 延迟加载大型文档 const loadLargeDocument = async () => { setIsLoading(true); try { const response = await axios.get('/api/large-document'); const largeContent = response.data.content; // 分段加载内容，避免一次性渲染过多DOM const chunkSize = 10000; // 每次加载10000字符 let currentPosition = 0; // 获取编辑器实例 const quill = reactQuillRef.current.getEditor(); // 清空现有内容 quill.setText(''); // 分段插入内容 const insertChunks = () => { if (currentPosition >= largeContent.length) { setIsLoading(false); return; } const chunk = largeContent.substring(currentPosition, currentPosition + chunkSize); quill.insertText(currentPosition, chunk); currentPosition += chunkSize; // 使用requestAnimationFrame避免UI阻塞 requestAnimationFrame(insertChunks); }; insertChunks(); } catch (error) { console.error('加载大型文档失败', error); setIsLoading(false); } }; // 优化2: 禁用不必要的格式和模块 const modules = { toolbar: [['bold', 'italic']], // 只保留必要工具 // 禁用可能影响性能的模块 history: { delay: 1000, // 增加历史记录保存间隔 maxStack: 50, // 减少历史记录栈大小 userOnly: true } }; // 优化3: 实现虚拟滚动（需要配合第三方库） // 实际项目中可考虑使用react-virtualized或react-window实现 return ( <div className="big-document-editor"> <button onClick={loadLargeDocument} disabled={isLoading}> {isLoading ? '加载中...' : '加载大型文档'} </button> <ReactQuill ref={reactQuillRef} theme="snow" value={content} onChange={setContent} modules={modules} formats={['bold', 'italic']} // 只加载必要格式 /> </div> ); }

6.2 事件处理优化

优化编辑器的事件处理，提升响应速度：

function OptimizedEventEditor() { const reactQuillRef = useRef(null); const [content, setContent] = useState(''); const [debouncedContent, setDebouncedContent] = useState(''); // 优化1: 使用防抖处理内容变化事件 useEffect(() => { const debounceTimer = setTimeout(() => { setDebouncedContent(content); // 这里可以进行保存或其他耗时操作 saveContent(content); }, 500); // 500ms防抖延迟 return () => clearTimeout(debounceTimer); }, [content]); // 优化2: 避免在onChange中执行耗时操作 const handleChange = (content) => { setContent(content); // 只做状态更新，不做其他处理 }; // 优化3: 事件委托处理大量元素事件 useEffect(() => { if (!reactQuillRef.current) return; const quillContainer = reactQuillRef.current.getEditor().container; // 使用事件委托处理编辑器内部元素事件 const handleContainerClick = (e) => { if (e.target.matches('.ql-image')) { // 处理图片点击 handleImageClick(e.target); } else if (e.target.matches('.ql-link')) { // 处理链接点击 handleLinkClick(e.target); } }; quillContainer.addEventListener('click', handleContainerClick); return () => { quillContainer.removeEventListener('click', handleContainerClick); }; }, []); // 模拟保存操作 const saveContent = async (content) => { try { await axios.post('/api/save-content', { content }); console.log('内容已保存'); } catch (error) { console.error('保存失败', error); } }; return ( <ReactQuill ref={reactQuillRef} theme="snow" value={content} onChange={handleChange} /> ); }

七、常见问题解决方案

学习目标

掌握光标定位异常的解决方法
学会处理格式冲突问题
理解编辑器在不同环境下的兼容性处理

7.1 光标定位异常问题

光标定位问题是富文本编辑器常见挑战，以下是解决方案：

function CursorIssueEditor() { const reactQuillRef = useRef(null); const [content, setContent] = useState(''); // 问题1: 组件重渲染导致光标丢失 // 解决方案: 使用useCallback稳定事件处理函数 const handleChange = useCallback((content) => { setContent(content); }, []); // 问题2: 自定义格式后光标位置错误 const insertCustomElement = () => { const quill = reactQuillRef.current.getEditor(); const selection = quill.getSelection(); if (!selection) return; const { index } = selection; // 保存当前选区 const range = quill.getSelection(); // 插入自定义元素 quill.insertEmbed(index, 'custom-element', { id: 'custom-' + Date.now(), content: '自定义内容' }); // 显式设置光标位置 quill.setSelection(index + 1); }; // 问题3: 粘贴内容后光标位置异常 useEffect(() => { if (!reactQuillRef.current) return; const quill = reactQuillRef.current.getEditor(); // 监听粘贴事件 quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => { // 处理粘贴内容 const text = node.innerText || ''; // 返回处理后的delta return new Quill.Delta().insert(text); }); // 粘贴完成后调整光标 quill.on('text-change', (delta, oldContents, source) => { if (source === 'user') return; // 粘贴操作后强制设置光标位置 const length = quill.getLength(); quill.setSelection(length); }); }, []); return ( <div> <button onClick={insertCustomElement}>插入自定义元素</button> <ReactQuill ref={reactQuillRef} theme="snow" value={content} onChange={handleChange} /> </div> ); }

7.2 格式冲突处理

当多种格式同时应用于同一文本时，可能导致冲突：

function FormatConflictEditor() { const [content, setContent] = useState(''); // 解决方案1: 定义格式优先级 useEffect(() => { // 在注册格式时定义优先级 const Block = Quill.import('blots/block'); class CustomBlock extends Block { static priority = 100; // 较高优先级 } // 优先级高的格式会覆盖优先级低的格式 Quill.register('formats/custom-block', CustomBlock); }, []); // 解决方案2: 检测并处理格式冲突 const handleFormatConflict = () => { const quill = reactQuillRef.current.getEditor(); const selection = quill.getSelection(); if (!selection) return; const formats = quill.getFormat(selection.index, selection.length); // 检查冲突格式 if (formats.code && formats['custom-block']) { // 解决冲突：保留代码格式，移除自定义块格式 quill.format('custom-block', false); alert('检测到格式冲突，已自动解决'); } }; const reactQuillRef = useRef(null); return ( <div> <button onClick={handleFormatConflict}>检测格式冲突</button> <ReactQuill ref={reactQuillRef} theme="snow" value={content} onChange={setContent} modules={{ toolbar: [ [{ 'header': [1, 2, false] }], ['bold', 'italic', 'code'], [{ 'custom-block': ['quote', 'warning'] }] ] }} formats={[ 'header', 'bold', 'italic', 'code', 'custom-block' ]} /> </div> ); }