在使用Tailwind的Next.js中如何正确展示富文本内容？

核心原因 #

CKEditor生成的富文本依赖其自带的样式体系（类名、内联样式），而Next.js项目默认未加载这些样式，或者全局样式（如Tailwind Preflight）重置了基础样式，导致加粗、列表、链接等格式无法正常渲染。

解决方案 #

1. 引入CKEditor官方基础样式

CKEditor的构建包自带完整的富文本样式，直接导入即可还原大部分格式：

• 安装CKEditor经典版构建包：

npm install @ckeditor/ckeditor5-build-classic

• 在Next.js页面或全局样式文件中导入样式：

import '@ckeditor/ckeditor5-build-classic/build/ckeditor.css';

• 将富文本放在带有.ck-content类的容器中渲染：

<div className="ck-content" dangerouslySetInnerHTML={{ __html: htmlString }} />

2. 适配自定义CKEditor样式（后端有自定义配置时）

如果Laravel端使用了自定义CKEditor配置（比如自定义字体、颜色），需同步样式：

1. 从Laravel项目中找到CKEditor的自定义CSS文件（通常在public/ckeditor/目录下）
2. 将文件复制到Next.js的public/或styles/目录
3. 在Next.js中全局引入该样式文件

3. 修复全局样式重置冲突

若使用Tailwind等CSS框架，其默认的preflight会重置基础HTML标签样式，需为富文本容器添加样式隔离：

• 添加自定义CSS覆盖重置样式：

.ck-content {
  all: revert; /* 恢复浏览器默认样式，避免被全局重置覆盖 */
}

.ck-content strong {
  font-weight: 700;
}

.ck-content ul,
.ck-content ol {
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.ck-content a {
  color: #0066cc;
  text-decoration: underline;
}

.ck-content ol {
  list-style-type: decimal;
}

• 若用Tailwind，需在tailwind.config.js中添加safelist防止样式被 purge：

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  safelist: [
    'ck-content',
    'ck-content strong',
    'ck-content ul',
    'ck-content ol',
    'ck-content a',
  ],
};

4. 确保HTML内容未被转义

检查后端返回的htmlString是否为原始HTML，若存在转义字符（如<strong>），需先解码：

const decodedHtml = decodeURIComponent(htmlString);

// 处理复杂转义的备选方案
const parser = new DOMParser();
const doc = parser.parseFromString(htmlString, 'text/html');
const decodedHtml = doc.body.innerHTML;

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