Flutter Web端如何创建可返回HTML结果的富文本编辑器？

一、让flutter_quill输出HTML的方法 #

可以借助quill_delta_to_html包将flutter_quill生成的Delta格式转为HTML，具体步骤如下：

1. 在pubspec.yaml中添加依赖：

dependencies:
  quill_delta_to_html: ^1.0.0 # 使用最新版本即可

2. 在代码中执行转换逻辑：

import 'package:quill_delta_to_html/quill_delta_to_html.dart';

// 获取编辑器的Delta数据
final deltaJson = _controller.document.toDelta().toJson();
// 初始化转换器，可配置自定义选项
final converter = QuillDeltaToHtmlConverter(
  deltaJson,
  ConverterOptions(encodeHtml: false),
);
// 生成最终HTML字符串
final htmlResult = converter.convert();

注意：如果用到了flutter_quill的自定义格式（比如自定义块、嵌入内容），需要额外编写自定义转换器处理这些特殊节点。

二、替代的富文本编辑器推荐 #

如果不想处理格式转换，可以试试以下支持直接输出HTML的编辑器：

• flutter_tinymce：基于TinyMCE的Flutter封装，Web端兼容性优异，支持全量富文本功能，可直接通过API获取HTML内容，需注意配置TinyMCE的资源路径。
• html_editor_pro：相较于你之前使用的html_editor_enhanced，这个包在Web端的交互问题更少，支持颜色选择、格式化等常用功能，能直接输出HTML。
• flutter_quill_html：flutter_quill的衍生包，内置Delta转HTML功能，用法和原生flutter_quill一致，无需额外引入转换包。

内容的提问来源于stack exchange，提问作者My Car