React项目中Ckeditor有序列表显示异常问题如何解决？

两类异常表现：

• 输入框内不展示有序列表序号
• 最终渲染结果中序号显示在结果框外部
  

根因说明 #

该问题是项目全局CSS重置规则（如reset.css、第三方组件库全局样式）清除了<ol>、<li>的默认列表样式和左内边距导致，属于前端富文本组件接入的常见样式冲突问题。

修复方案 #

1. 修复编辑器输入框序号不显示问题 #

给CKEditor内容区添加专属样式，优先级需高于全局重置规则：

/* 适配CKEditor 5经典编辑器 */
.ck.ck-content ol {
  list-style-type: decimal;
  padding-inline-start: 40px;
}
.ck.ck-content ol li {
  list-style: inherit;
}

如果项目使用了CSS Modules、React scoped CSS等样式私有化方案，需要用:global修饰符包裹上述样式规则，避免样式失效。

2. 修复渲染结果序号溢出容器问题 #

给展示富文本内容的容器添加专属样式：

/* 替换为你项目中富文本渲染容器的类名 */
.rich-content-wrapper ol {
  list-style-type: decimal;
  padding-inline-start: 40px;
}
.rich-content-wrapper ol li {
  list-style: inherit;
  /* 仍有溢出的情况下添加该行，强制序号显示在元素内部 */
  list-style-position: inside;
}

注意事项 #

不要直接全局修改<ol>、<li>的默认样式，仅针对CKEditor编辑器和富文本渲染容器添加规则即可，避免影响项目其他组件的正常展示。

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