Visual Editor：Flutter 富文本编辑器的未来

昌寒庆Quillan

于 2024-09-11 07:39:13 发布

阅读量734

点赞数 11

本文链接：https://blog.csdn.net/gitblog_00832/article/details/142116166

版权

Visual Editor：Flutter 富文本编辑器的未来

visual-editor Rich text editor for Flutter based on Delta format (Quill fork) 项目地址: https://gitcode.com/gh_mirrors/vi/visual-editor

项目介绍

Visual Editor 是一款基于 Flutter 的富文本编辑器，最初从 Flutter Quill 分叉而来。它围绕强大的 Quilljs Delta 文档格式构建，这种格式最初由 QuillJs 开发。Delta 文档可以轻松转换为 JSON，编码易于阅读和修改，并提供了许多可扩展性选项。项目详细解释了为什么我们分叉了 Flill 以及所做的改进。

项目技术分析

Visual Editor 的核心技术基于 Quilljs Delta 文档格式，这种格式非常适合富文本编辑器的复杂需求。Delta 文档的 JSON 表示形式不仅易于读写，还支持丰富的扩展性，使得开发者可以轻松实现自定义功能。此外，Visual Editor 在 Flutter 框架上构建，充分利用了 Flutter 的跨平台优势，确保在不同设备上都能提供一致的用户体验。

项目及技术应用场景

Visual Editor 适用于各种需要富文本编辑功能的应用场景，包括但不限于：

博客平台：用户可以轻松编辑和发布格式丰富的文章。
文档编辑器：企业内部文档管理系统，支持复杂的文本格式和嵌入内容。
教育应用：学生和教师可以创建和编辑包含多媒体内容的作业和课程材料。
协作工具：支持多人实时协作编辑，提升团队工作效率。

项目特点

1. 高亮显示

Visual Editor 支持自定义文本区域的高亮显示，这些高亮标记对点击和悬停敏感，但不会存储在 Delta 文档中。这对于临时展示特定文本范围非常有用。

2. 标记功能

标记功能类似于高亮显示，但它们永久存储在文档中，可以根据需要启用或禁用。

3. 标记附件

标记可以附加自定义数据，Visual Editor 提供了必要的钩子来实现标记附件，开发者可以轻松定制所有行为和渲染。

4. 快速菜单

快速菜单可以在当前文本选择、高亮或标记上方显示，或者在任意文本区域显示。Visual Editor 提供了必要的钩子来实现自定义菜单。

5. 跳转到标题

文档索引功能允许用户点击标题直接跳转到文档的相应位置，提升阅读体验。

6. 标题验证

支持自定义标题长度的验证，并显示高亮提示，帮助用户快速发现和修正问题。

7. 自定义嵌入

在 Delta 文档中可以插入任何类型的自定义嵌入内容，Visual Editor 提供了必要的钩子来实现自定义嵌入的渲染。

8. 链接菜单

点击链接文本时，会弹出链接菜单，显示链接的 URL，并提供打开链接、编辑链接和复制链接的功能。

未来计划

Visual Editor 的开发团队正在积极推进以下功能：

更好的链接编辑 UI
标签功能（Hashtags）
提及功能（At notation）
斜杠命令（Slash commands）
协作编辑（Coop editing）
数学公式支持

快速开始

Visual Editor 即将在 pub.dev 上发布，目前可以通过 GitHub 直接使用：

dependencies:
  visual_editor:
    git: https://github.com/visual-space/visual-editor.git

最小示例：

final _controller = EditorController();

Column(
  children: [
    EditorToolbar(
      controller: _controller,
    ),
    VisualEditor(
      controller: _controller,
    ),
  ],
)

确保不要在 setState() 中创建新的 EditorController 实例，以免影响性能和文档编辑历史。