如何实现Flutter与Web间格式化文本双向转换（基于flutter_quill）

一、Quill Delta 转 HTML #

flutter_quill 的核心数据结构是 Delta，要转成 Web 端兼容的 HTML 可通过以下方式实现：

• 使用现成转换工具：借助 quill_html_converter 这类工具包，直接将 Delta 对象转为 HTML 字符串。
  示例代码：

  // 获取编辑器的Delta数据
  final Delta delta = _quillController.document.toDelta();
  // 转换为HTML
  final String htmlOutput = convertDeltaToHtml(delta);
  

• 自定义转换逻辑：如果默认转换无法满足业务需求，可遍历 Delta 的每个操作，将 Quill 格式映射为对应 HTML 标签。比如把加粗格式映射为 <strong>，有序列表映射为 <ol>，无序列表映射为 <ul>。

二、HTML 转 Quill Delta #

将 Web 端的 HTML 转为 Flutter Quill 可识别的 Delta，保证编辑器能正确渲染：

• 利用 HTML 解析工具：使用 html_to_delta 类库，解析 HTML 结构并转为 Delta 对象。
  示例代码：

  // 解析HTML内容为Delta
  final Delta delta = convertHtmlToDelta(webHtmlContent);
  // 加载到Quill编辑器
  _quillController.document = Document.fromDelta(delta);
  

• 自定义解析逻辑：如果 HTML 包含复杂自定义标签，可使用 Dart 的 html 包解析节点树，逐个将 HTML 标签转换为 Quill 支持的格式。比如解析 <h2> 转为 Quill 的二级标题格式，<img> 标签提取 src 属性转为 Quill 的图片插入操作。

三、关键注意事项 #

• 格式对齐：提前和 Web 端约定好双向兼容的格式范围，避免使用 Quill 不支持的 HTML 样式（比如复杂 CSS 布局），减少转换异常。
• 资源同步：图片、附件等资源要使用两端可访问的公共路径，转换时仅传递资源标识，不要使用本地路径。
• 测试验证：针对常用格式组合（如加粗+斜体、嵌套列表、带链接文本）做双向转换测试，确保内容一致性。

内容的提问来源于stack exchange，提问作者Amer Al Haj Ali