Angular14中ngx-quill公式存储生成冗余HTML问题咨询

• 这是Quill（含ngx-quill）的正常默认行为。Quill在将Delta格式转为HTML时，会为数学公式生成包含自定义类名、渲染依赖标签的完整包裹结构，确保前端能正确解析展示公式，因此会产生冗余代码。

优化方案 #

• 存储原始LaTeX代码而非HTML
  不需要存储编辑器生成的HTML，直接提取用户输入的原始LaTeX公式文本：

  • 监听编辑器的公式插入事件，或者遍历Quill Delta的ops数组，找到insert类型为formula的项，提取其中的value字段（即原始LaTeX代码）。
  • 示例代码片段：

    // 从Quill实例中获取Delta
    const delta = this.quillEditorInstance.getContents();
    // 提取所有公式的LaTeX代码
    const formulas = delta.ops.filter(op => op.insert?.formula).map(op => op.insert.formula);
    // 存储formulas或拼接后的文本即可
    

• 精简HTML输出结构

  • 配置Quill的公式模块，自定义渲染模板，只保留必要的标签与属性，移除冗余的嵌套和类名。
  • 存储前对生成的HTML进行清洗：用正则表达式去除不必要的属性（如多余的class、style），但需注意避免破坏公式的渲染依赖结构。

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