React-Quill项目两大问题求助：列表不显示及公式栏错位

问题1：列表符号/编号在展示时不显示 #

编辑时有序/无序列表正常渲染符号/编号，但通过dangerouslySetInnerHTML展示保存后的内容时，仅显示文本内容，列表符号完全消失。

解决方案 #

Quill生成的列表依赖其自带的CSS样式来渲染符号与编号，展示环节需确保这些样式生效：

1. 引入Quill基础样式：在展示内容的组件（或全局样式文件）中引入Quill的snow.css：

import 'react-quill/dist/quill.snow.css';

若已全局引入可跳过此步骤。

2. 修复样式冲突：如果自定义CSS覆盖了列表默认样式，添加以下样式重置：

.quill-editor ul, .quill-editor ol {
  padding-left: 1.5em;
  margin: 1em 0;
}
.quill-editor ul li {
  list-style-type: disc;
}
.quill-editor ol li {
  list-style-type: decimal;
}

将上述代码添加到全局CSS文件或组件的样式标签中。

问题2：公式编辑栏位置异常（移出Modal） #

点击公式按钮后，公式编辑弹窗脱离当前Modal，位置不固定，有时完全移出可视区域。

解决方案 #

Quill的公式模块默认将弹窗挂载到document.body，而Modal的层级与定位会导致弹窗显示异常，可通过修改模块配置将弹窗挂载到Modal内部：

1. 修改React-Quill的modules配置：
   在QuillEditorTextModal组件中，更新modules配置，为formula模块指定挂载容器：

const modules = {
  toolbar: {
    container: "#toolbar",
  },
  formula: {
    // 将公式弹窗挂载到Modal内部容器
    container: () => document.querySelector('.modal-inner-container')
  }
};

2. 标记Modal内部容器：
   在Modal的子容器上添加指定类名，确保选择器能正确找到目标：

// QuillEditorTextModal组件的return部分
<Modal isVisible={isVisible} onClose={onClose}>
  {/* 添加modal-inner-container类作为公式弹窗的挂载目标 */}
  <div className="p-8 text-center relative modal-inner-container">
    {/* 原有内容保持不变 */}
  </div>
</Modal>

3. 兜底样式调整：
   若上述配置仍不生效，添加CSS确保公式弹窗层级高于Modal：

.ql-formula-container {
  z-index: 1000 !important;
  position: fixed !important;
}

同时提升Modal内部容器的层级：

// Modal组件中修改内部容器的z-index
<div className='relative z-50 bg-white p-6 rounded w-1/2 h-3/4 max-h-[75%] max-w-[50%] overflow-y-auto'>

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