如何在未安装Quill Editor的环境下渲染其HTML输出并保留样式？

我们在B2B端使用Quill Editor允许用户编辑自定义文本，导出的HTML带有Quill专属自定义类，但在未部署Quill Editor的B2C端通过[innerHtml]="<some HTML from quill editor>"渲染时，无法完全呈现预期样式。以下是无需安装完整Quill Editor的解决方案：

• 提取Quill核心样式文件引入
  不需要安装完整Quill包，仅提取对应主题的CSS文件（如quill.snow.css）引入到B2C端项目中即可。Quill的所有自定义类样式都定义在这些CSS文件里，引入后就能让带Quill类的HTML正常渲染。如果担心体积过大，可以按需裁剪CSS，只保留实际用到的样式规则（比如文本格式、对齐、列表类）。

• 转换Quill自定义HTML为标准HTML
  在B2B端导出HTML时，将Quill生成的自定义类转换为标准HTML标签或通用样式：

  • 把.ql-bold替换为<strong>/<b>标签，.ql-italic替换为<em>/<i>标签；
  • 将对齐类（如.ql-align-center）转换为内联样式style="text-align:center"；
  • 列表类（如.ql-list-checked）转换为标准<ul>/<ol>+<li>结构，搭配通用列表样式。
    实现时可以用正则批量替换，或者借助Quill的自定义渲染扩展在导出环节完成转换。

• 在B2C端编写匹配Quill类的自定义样式
  直接在B2C端样式文件中，手动编写与Quill自定义类对应的样式规则，模拟Quill的渲染效果。例如：

  .ql-bold { font-weight: 700; }
  .ql-italic { font-style: italic; }
  .ql-align-center { text-align: center; }
  .ql-list-checked { list-style-type: disc; margin-left: 1.5em; }
  /* 按需补充其他样式类 */
  

  这种方式灵活性高，可根据实际显示需求调整样式，完全不依赖Quill原始CSS。

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