Angular 13项目中Ngx-Quill 16.2.1列表回显异常问题求助

我之前在项目里也碰到过类似的Ngx-Quill列表渲染异常的情况，结合你描述的场景——创建时正常、innerHTML能显示但编辑器里只出p标签，大概率是以下几个原因，给你逐个排查的方向：

1. 先检查版本兼容性（最可能的核心问题） #

你用的是Angular 13，但Ngx-Quill 16.2.1的官方适配版本是Angular 14+！版本不匹配很容易导致编辑器内部模块解析异常，尤其是列表这类依赖Quill核心模块的功能。

建议你降级Ngx-Quill到适配Angular 13的版本，比如15.x系列：

npm uninstall ngx-quill
npm install ngx-quill@15.2.0 --save

重新安装依赖后重启项目，先测试这个点，很多时候版本问题解决了，其他异常也跟着消失。

2. 确认Quill列表模块已正确加载 #

如果版本没问题，那要检查Ngx-Quill的配置是否遗漏了列表模块。虽然Ngx-Quill默认包含基础模块，但如果自定义了toolbar或者modules配置，可能不小心漏掉了列表相关的设置：

在你的根模块（比如AppModule）里，确保QuillModule的配置包含列表工具栏选项：

import { QuillModule } from 'ngx-quill';

@NgModule({
  imports: [
    QuillModule.forRoot({
      modules: {
        toolbar: [
          // 必须包含有序/无序列表的配置
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
          // 其他你需要的工具栏按钮...
        ]
      }
    })
  ]
})
export class AppModule { }

如果是局部组件里配置的工具栏，也要确保包含这两个选项。

3. 转换HTML为Quill Delta格式再传入 #

虽然innerHTML能正常显示，但Quill对HTML的解析有自己的规则——它更倾向于使用Delta格式来处理内容，而非原始HTML。如果数据库里存储的HTML结构和Quill生成的格式不一致（比如缺少ql-list、ql-bullet这类Quill专属类名），编辑器可能无法识别列表，会把内容转成普通p标签。

你可以尝试把从数据库获取的HTML转换成Delta格式后再传给编辑器：

import Quill from 'quill';

// 假设从数据库获取的HTML是dbHtmlContent
this.quillContent = Quill.clipboard.convert({ html: dbHtmlContent });

然后在模板里使用Delta格式的内容：

<quill-editor [content]="quillContent"></quill-editor>

这样Quill能更精准地解析并还原列表结构。

4. 最后确认Quill样式是否正确引入 #

虽然你提到已经引入了CSS，但还是要确认一下quill.snow.css（或者你用的主题样式）是否正确加载到项目里。在angular.json的styles数组里检查：

"styles": [
  "src/styles.scss",
  "node_modules/quill/dist/quill.snow.css"
]

不过这个点导致列表DOM完全消失的概率很低，但也可以快速排查一下。

先从版本兼容性开始排查，这个是最常见的原因，解决后应该就能正常显示列表了。

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