React Quill WYSIWYG编辑器所见非所得 保存后对齐缩进等格式丢失求助

问题原因 #

你遇到的排版丢失问题是两个常见原因导致的：

1. 内容展示页没有引入Quill的内置样式，Quill生成的列表、对齐、缩进、引用等特殊格式的样式都绑定在专属类名下，编辑页因为引入了quill.snow.css所以显示正常，但展示页没有对应样式支撑。
2. 如果你项目中使用了Tailwind CSS这类带全局样式重置的框架，其预重置规则会默认清除ul、ol的缩进、列表标记等原生样式，进一步覆盖Quill的格式表现。

解决方案 #

按以下步骤修改即可解决：

1. 在ShowBlog.jsx中引入Quill核心样式
   在ShowBlog.jsx的导入区域添加样式引入：

import 'react-quill/dist/quill.core.css'

不需要全量引入snow主题的样式，核心样式已经包含所有内容格式的规则。

2. 给渲染富文本的容器添加ql-editor类名
   Quill的所有内容样式都是基于.ql-editor选择器生效的，修改你渲染解析后HTML的容器代码：

<div className="ql-editor">
  {parse(blogDetails.body)} 
</div>

3. （可选，适配Tailwind等重置样式场景）补充专属样式规则
   如果添加上述配置后仍有部分样式丢失，可以在全局CSS中补充以下规则覆盖框架的重置效果：

/* 列表样式 */
.ql-editor ul {
  list-style-type: disc;
  padding-left: 1.5em;
}
.ql-editor ol {
  list-style-type: decimal;
  padding-left: 1.5em;
}
/* 对齐样式 */
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
/* 缩进样式 */
.ql-editor .ql-indent-1 { padding-left: 3em; }
.ql-editor .ql-indent-2 { padding-left: 6em; }
.ql-editor .ql-indent-3 { padding-left: 9em; }
/* 引用样式 */
.ql-editor blockquote {
  border-left: 4px solid #ccc;
  padding-left: 1em;
  color: #666;
  font-style: italic;
}

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