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

如何在Flutter Quill(flutter_quill)中获取带下划线格式的HTML内容?

从Quill获取HTML内容的几种方法

直接跳过Delta转Markdown的步骤,用以下方式可以直接获取准确的HTML内容,完美保留下划线这类格式:

  • 直接从Quill编辑器实例获取
    这是最简单的方式,Quill编辑器的内容本身就渲染在DOM节点里,直接取该节点的innerHTML即可:

    // 假设已初始化Quill实例
    const quill = new Quill('#editor', { theme: 'snow' });
    
    // 获取当前编辑器的HTML内容
    const htmlContent = quill.root.innerHTML;
    
    // 后续将htmlContent上传至服务器即可
    
  • 从已有的Delta对象生成HTML
    如果手里只有Delta数据,不想依赖当前编辑器DOM,可以创建一个临时Quill实例来渲染Delta并导出HTML:

    // 假设你已经有了目标Delta对象
    const targetDelta = /* 你的Delta数据 */;
    
    // 创建临时Quill实例(无需挂载到页面)
    const tempEditor = new Quill(document.createElement('div'));
    tempEditor.setContents(targetDelta);
    
    // 导出HTML
    const htmlContent = tempEditor.root.innerHTML;
    

之前转Markdown再转HTML的方式会出问题,是因为Markdown里的下划线会被解析为斜体格式,导致原生的下划线样式丢失,而直接从Quill获取HTML能完整保留编辑器里的所有格式。

内容的提问来源于stack exchange,提问作者sahil khatri

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.13 04:05:40