<%= post.title %>
<%- DOMPurify.sanitize(post.content) %>
悠悠楠杉
网站页面
EJS模板中渲染CKEditor内容的完整实践指南
12/05
![]()
正文：
在Web开发中，富文本编辑器与模板引擎的配合使用是个常见需求。当使用CKEditor这样的所见即所得编辑器时，如何在后端通过EJS模板正确渲染用户提交的HTML内容，需要特别注意以下几个关键点：
- HTML内容的安全处理
直接渲染用户提交的HTML存在XSS风险，推荐使用DOMPurify等库进行过滤：
html
<%- DOMPurify.sanitize(editorContent) %>
- 保留编辑器样式
CKEditor生成的HTML通常包含内联样式，需要在EJS中启用原始HTML输出：
ejs
<%- content %>
- 代码块的特殊处理
当内容包含代码片段时，建议使用highlight.js实现语法高亮：
html
// 示例代码
const express = require('express');
app.set('view engine', 'ejs');
- 完整的EJS模板示例
ejs
- Node.js后端处理
在Express路由中需要设置正确的Content-Type：
javascript
router.get('/post/:id', async (req, res) => {
const post = await Post.findById(req.params.id);
res.render('post', {
post,
title: post.title
});
});
- 常见问题解决方案
- 样式丢失问题：确保CKEditor的CSS文件被正确引入
- 图片显示问题：处理相对路径转绝对路径
- 移动端适配：添加viewport meta标签
通过以上方法，可以确保CKEditor生成的内容在各种设备上都能正确显示，同时保持代码的可读性和安全性。实际项目中还需要根据具体需求调整白名单规则和样式覆盖方案。
