基于Quill的文档编辑器开发日志（上）——前端核心功能实现与本地存储管理

目录

二、技术选型与架构设计

三、核心功能实现

1. Quill编辑器集成

2. 本地存储管理（DocStorage类）

3. 文档树渲染与事件绑定

四、效果演示与问题总结

一、项目背景

在开发 Taskflow智能Todo系统 的过程中，文档管理模块是核心功能之一。用户需要能够创建技术文档、编写项目笔记，并与任务流程图（基于Mermaid）无缝集成。本篇将分享 文档编辑组件的前端实现，涵盖富文本编辑、本地存储、撤销/重做等核心功能。

二、技术选型与架构设计

1. 核心工具：

   • Quill富文本编辑器：轻量级且高度可定制，支持Markdown语法、代码块、图片上传等。

   • html-docx-js：将HTML内容转换为Word文档，实现一键导出。

   • LocalStorage：临时存储用户文档数据，为后续迁移至后端数据库（如MySQL）做准备。

   • 前端架构：

     - 组件化设计：侧边栏（文档树） + 编辑器主体  
     - 状态管理：通过LocalStorage实现文档的增删改查（未来替换为Spring Boot API）  
     - 功能模块：撤销/重做、导出Word、快捷键支持  

三、核心功能实现

1. Quill编辑器集成

代码片段：初始化Quill并配置工具栏

const quill = new Quill('#editor', {
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline'],
      ['code-block', 'blockquote'],
      ['link', 'image'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }]
    ],
    history: { delay: 1000, maxStack: 100 } // 支持撤销/重做
  },
  theme: 'snow'
});

2. 本地存储管理（DocStorage类）

功能点：

• 文档的增删改查

  
  （图片来源网络，侵删）

• 当前文档状态持久化

  关键代码：

  
  （图片来源网络，侵删）

  class DocStorage {
    static getDocs() {
      return JSON.parse(localStorage.getItem('user_docs')) || [];
    }
    
    static saveDoc(doc) {
      const docs = this.getDocs();
      const existing = docs.find(d => d.id === doc.id);
      // 更新或新增逻辑...
      localStorage.setItem('user_docs', JSON.stringify(docs));
    }
  }

  3. 文档树渲染与事件绑定

  实现效果：

  • 动态加载文档列表

    
    （图片来源网络，侵删）

  • 支持右键菜单（重命名、删除）

    技术细节：

    function renderDocTree() {
      const docs = DocStorage.getDocs();
      const treeContainer = document.querySelector('.doc-tree');
      // 生成DOM结构并绑定点击事件...
    }

    ---

    四、效果演示与问题总结

    1. 运行效果：

    2. 遇到的问题与解决方案：

       • 问题1：Quill编辑器内容与LocalStorage同步延迟

         • 解决：通过text-change事件监听实时保存

         • 问题2：导出Word时样式丢失

           • 解决：使用html-docx-js内联CSS样式

    屏幕录制 2025-04-23 225036