可视化编辑器

Visual Editor 是一个 Flutter 富文本编辑器，最初是 Flutter Quill 的一个分支。该编辑器围绕由 QuillJs 最初开发的强大的 Delta 文档格式构建。Delta 文档可以轻松转换为 JSON，该编码易于阅读和修改，并提供了许多扩展选项。

我们分支 Quill 的核心动机是文档和测试严重缺乏，并且在获得技术支持方面缺乏维护者的支持。考虑到我们计划发布更多开源 Flutter 小部件，从富文本编辑器开始是理所当然的。

计划功能

  • 改进的、易于理解的架构
  • 完整的文档
  • 完整的测试覆盖率
  • 亮点
  • 代码示例
  • 表格
  • 嵌套列表
  • 布局
  • 样式化块
  • 源代码着色
  • 主题
  • Search
  • 错误修复

可视化编码 – 关于 Visual Editor 和软件架构的教程

FlutterQuill – 我们分支的原始仓库

如何开始

最小示例，具有共享控制器的工具栏和编辑器

QuillController _controller = QuillController.basic();


Column(
  children: [
    QuillToolbar.basic(controller: _controller),
    Expanded(
      child: Container(
        child: QuillEditor.basic(
          controller: _controller,
          readOnly: false,
        ),
      ),
    )
  ],
)

输入/输出

此库使用 Quill 作为内部数据格式。

  • _controller.document.toDelta() – 提取 Delta。
  • _controller.document.toPlainText() – 提取纯文本。

将文档保存为 JSON

保存文档

var json = jsonEncode(_controller.document.toDelta().toJson());

检索文档

const blogPost = jsonDecode(response);

_controller = QuillController(
  document: Document.fromJson(blogPost),
  selection: TextSelection.collapsed(offset: 0)
);

此自述文件将扩展有关如何使用 Visual Editor 的详细说明。目前我们正在进行深入的清理工作。

GitHub

查看 Github