You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在flutter_quill中从HTML字符串生成Delta并插入编辑器?

解决flutter_quill导入HTML内容的问题

flutter_quill本身确实没有原生支持直接导入HTML,但可以通过将HTML转换为Delta格式来实现,步骤如下:

  • 首先添加HTML转Delta的依赖包,比如flutter_quill_html_converter,在pubspec.yaml中声明:
    dependencies:
      flutter_quill: ^latest_version
      flutter_quill_html_converter: ^latest_version
    
  • 获取服务器端的HTML内容后,使用包提供的方法转换为Delta:
    import 'package:flutter_quill/flutter_quill.dart';
    import 'package:flutter_quill_html_converter/flutter_quill_html_converter.dart';
    
    // 假设从服务器获取的HTML内容
    String htmlContent = '<p>这是服务器返回的<strong>HTML内容</strong></p>';
    
    // 转换为Delta
    Delta delta = HtmlToDelta().convert(htmlContent);
    
    // 加载到flutter_quill编辑器
    final QuillController controller = QuillController(
      document: Document.fromDelta(delta),
      selection: const TextSelection.collapsed(offset: 0),
    );
    
  • 如果某些HTML标签转换有问题,可以自定义转换规则,或者预处理HTML内容,过滤掉不支持的标签。

另外,也可以自己实现简易的HTML解析逻辑,比如通过正则匹配标签,手动构建Delta,但这种方式适合简单的HTML结构,复杂场景还是推荐用成熟的转换包。

内容的提问来源于stack exchange,提问作者Andrey Abaimov

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.05 15:40:29