Strapi 富文本内容转 HTML 页面显示：基于 marked.js 的完整实现方案
如何将Strapi富文本编辑器内容在HTML页面中完美展示
在前后端分离项目开发中，Strapi作为常用的无头CMS，其富文本编辑器能让内容管理者便捷地编辑文章、新闻等内容。但前端HTML页面如何获取并正确解析展示这些富文本内容，却成了不少开发者初期会遇到的小难题。本文就将详细介绍一种简单高效的解决方案，通过引入Markdown.js工具，轻松实现Strapi富文本内容到HTML页面的转换与展示。
一、需求背景与核心思路
在实际项目开发中，我们使用Strapi搭建后端内容管理系统，其中富文本编辑器（如下图所示）用于编辑新闻、文章等内容。前端HTML页面需要调用Strapi提供的接口，获取这些富文本内容并展示给用户。但接口返回的富文本内容格式并非HTML可直接识别的格式，因此需要借助工具进行格式转换。
核心解决思路是：引入Markdown.js库，该库能将Markdown格式的文本转换为HTML格式。由于Strapi富文本编辑器的内容本质上是Markdown格式，我们只需在前端获取接口返回的富文本内容后，利用Markdown.js的marked.parse()方法进行格式转换，再将转换后的HTML内容插入到页面指定元素中，即可实现内容的正常展示。
二、具体实现步骤
（一）引入Markdown.js资源
要使用Markdown.js的转换功能，首先需要在HTML页面中引入该库的资源。这里推荐使用阿里云CDN提供的Markdown.js资源，不仅加载速度快，还能避免本地资源引入可能出现的路径问题。当然，也可以将资源下载到本地项目中，再通过相对路径引入。
通过CDN引入的代码如下，将其添加到HTML页面的<head>标签内或<body>标签结束前均可（建议放在<head>标签内，确保在使用前已加载完成）：
<script src="https://cdn.staticfile.org/marked/4.0.2/marked.min.js"></script>
如果选择下载到本地引入，只需将上述代码中的CDN地址替换为本地资源的相对路径，例如：
<script src="./js/marked.min.js"></script>
（二）调用接口并处理富文本内容
前端通过接口调用获取Strapi中的富文本内容后，需要进行格式转换处理。这里假设我们已经封装好了调用Strapi新闻接口的方法（newsApi.getById(id)），通过新闻ID（id）获取单条新闻的详细数据，其中newsContent字段即为Strapi富文本编辑器对应的内容字段。
具体处理代码如下，我们会先获取接口返回的新闻数据，提取出富文本内容（newsContent），再使用marked.parse()方法将其转换为HTML格式，最后将转换后的HTML内容插入到页面指定的容器中：
// 异步调用接口，根据新闻ID获取单条新闻数据
const getNewsDetail = async (id) => {try {// 调用封装好的接口方法，获取新闻详情const response = await newsApi.getById(id);// 从响应数据中提取新闻信息const news = response.data;// 处理富文本内容：获取Strapi中的富文本字段（newsContent），若为空则赋值为空字符串const rawMarkdown = news.newsContent || '';// 关键步骤：将Markdown格式的富文本内容转换为HTML格式const htmlContent = marked.parse(rawMarkdown);// 获取页面中用于展示新闻详情的容器元素const detailContainer = document.getElementById('news-detail-container');// 将转换后的HTML内容插入到容器中，同时添加基础样式detailContainer.innerHTML = `<div class="h-full flex flex-col"><!-- prose和prose-lg是Tailwind CSS中的样式类，用于美化文本内容，可根据实际需求调整 --><div class="prose prose-lg flex-grow overflow-y-auto max-h-[400px]">${htmlContent}</div></div>`;} catch (error) {// 捕获接口调用或内容处理过程中的错误，避免页面崩溃console.error('获取新闻详情并处理内容失败：', error);// 可添加错误提示，提升用户体验const detailContainer = document.getElementById('news-detail-container');detailContainer.innerHTML = '<div class="text-red-500">新闻内容加载失败，请稍后重试</div>';}
};// 调用方法，传入具体的新闻ID（例如1），获取并展示对应新闻详情
getNewsDetail(1);
上述代码中，有几个关键点需要注意：
- 接口调用使用
async/await语法，确保异步操作的顺序执行，避免出现内容未获取到就进行转换的问题； - 提取富文本内容时，通过
news.newsContent || ''进行空值处理，防止内容为空时marked.parse()方法报错； - 插入HTML内容时，使用了Tailwind CSS的
prose、prose-lg等样式类，用于美化文本（如段落间距、标题样式等），若项目未使用Tailwind CSS，可自行添加自定义CSS样式； - 添加了错误捕获（
try/catch），当接口调用失败或内容处理出错时，会在控制台打印错误信息，并向用户展示友好的错误提示，提升用户体验。
三、最终展示效果
按照上述步骤实现后，Strapi富文本编辑器中的内容就能在HTML页面中正常展示，展示效果如下图所示。可以看到，富文本中的标题、段落、图片等元素都能正确解析并显示，且通过添加的样式类，文本排版更加美观，整体展示效果符合预期。
四、注意事项与拓展方向
（一）注意事项
- Markdown.js版本选择：本文使用的是4.0.2版本，不同版本的方法可能存在差异，若使用其他版本，需参考对应版本的官方文档，确保方法调用正确；
- 样式适配：若项目未使用Tailwind CSS，需自行编写CSS样式，对转换后的HTML内容进行美化，避免出现排版混乱的问题；
- 安全问题：使用
innerHTML插入内容存在XSS攻击风险，若富文本内容来自不可信的用户输入，需先对内容进行过滤处理（可使用DOMPurify等工具），确保页面安全； - 图片路径问题：若Strapi富文本中的图片使用的是相对路径，需确保前端页面能正确访问到图片资源，必要时可在转换前对图片路径进行处理（如拼接基础URL）。
（二）拓展方向
- 内容格式化优化：可根据实际需求，对转换后的HTML内容进行进一步格式化，例如自定义标题样式、添加代码高亮（结合
highlight.js）等； - 响应式适配：针对不同设备（电脑、手机、平板），优化内容展示样式，确保在各种屏幕尺寸下都有良好的展示效果；
- 内容加载优化：若富文本内容较多（如长文章），可添加加载动画，提升用户等待时的体验；
- 多字段处理：若Strapi中除了
newsContent，还有其他富文本字段（如summary、authorIntro等），可按照相同的思路进行处理，实现多字段的HTML展示。
五、总结
本文详细介绍了如何通过引入Markdown.js工具，将Strapi富文本编辑器中的内容转换为HTML格式并在页面中展示。整个实现过程步骤清晰、代码简洁，核心是利用Markdown.js的格式转换能力，解决了Strapi富文本内容前端展示的关键问题。同时，文中还补充了注意事项和拓展方向，帮助开发者在实际项目中规避风险、优化功能。按照本文的方法，即使是前端新手，也能快速实现Strapi富文本内容的HTML展示，提升项目开发效率。