Angular4中Quill富文本保存后样式类无法生效问题

我之前也踩过这个坑！你遇到的问题本质是：你存储的HTML里虽然带有Quill的专属样式类（比如ql-align-center、ql-size-large），但展示这些内容时，页面并没有加载Quill对应的样式文件，而且普通的div容器也不匹配Quill的样式选择器规则，所以浏览器不知道该怎么渲染这些样式。

下面给你几个简单有效的解决办法：

1. 引入Quill的主题样式文件 #

Quill的样式是和主题绑定的（比如常用的Snow或Bubble主题），你需要把对应的CSS文件引入到你的Angular项目中：

• 方法一：在angular.json中全局引入
  找到architect -> build -> options -> styles数组，添加Quill的样式路径：

  "styles": [
    "src/styles.css",
    "node_modules/quill/dist/quill.snow.css" // 如果你用的是Snow主题
    // "node_modules/quill/dist/quill.bubble.css" // 如果你用的是Bubble主题
  ]
  

• 方法二：在组件中局部引入
  在你的展示组件的styles或styleUrls里导入样式：

  @import '~quill/dist/quill.snow.css';
  

2. 用Quill的专属容器包裹展示内容 #

Quill的样式规则都是基于.ql-editor这个父类写的（比如.ql-editor .ql-align-center），所以你不能直接把HTML渲染到普通div里，必须在外层加上这个类：

<!-- 错误的方式：普通div无法触发Quill样式 -->
<div [innerHTML]="savedContent"></div>

<!-- 正确的方式：用.ql-editor容器包裹 -->
<div class="ql-editor" [innerHTML]="savedContent"></div>

3. 可选：将样式类转换为内联样式（不推荐） #

如果不想依赖Quill的样式文件，你可以在保存内容前，把Quill的样式类转换成内联CSS。比如写一个简单的转换器：

convertQuillClassesToInline(html: string): string {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = html;

  // 处理对齐类
  tempDiv.querySelectorAll('.ql-align-center').forEach(el => {
    (el as HTMLElement).style.textAlign = 'center';
    el.classList.remove('ql-align-center');
  });
  // 处理字号类
  tempDiv.querySelectorAll('.ql-size-large').forEach(el => {
    (el as HTMLElement).style.fontSize = '1.5em';
    el.classList.remove('ql-size-large');
  });
  // 可以继续添加其他需要处理的样式类...

  return tempDiv.innerHTML;
}

不过这个方法需要你手动处理所有可能的Quill样式类，维护起来比较麻烦，所以更推荐前两种方法。

按照上面的步骤操作后，你存储的HTML内容就能正确展示出Quill编辑时的样式了！

内容的提问来源于stack exchange，提问作者fariba.j