在Node.js生态的Web开发中，EJS是常用的轻量级模板引擎，而CKEditor是热门的富文本编辑器，两者结合使用时，开发者常遇到CKEditor生成的HTML内容无法被正确渲染的问题，核心原因是EJS默认的转义机制会对特殊字符进行处理。
问题产生的原因
EJS模板中，使用<%= %>语法输出变量时，默认会对变量中的HTML特殊字符进行转义，比如把<转成<，>转成>，这样CKEditor生成的<p>、<strong>等标签就会被当成普通文本显示，无法被浏览器解析为HTML元素。
正确的渲染方法
使用非转义输出语法
EJS提供了<%- %>语法，该语法不会对输出内容进行转义，会直接把变量内容作为HTML片段插入到页面中，正好适合渲染CKEditor生成的富文本HTML内容。
以下是基本的Node.js服务端代码示例，展示如何把CKEditor的内容传递给EJS模板：
// 服务端路由代码，以Express框架为例
const express = require('express');
const app = express();
// 配置EJS模板引擎
app.set('view engine', 'ejs');
app.get('/article', (req, res) => {
// 模拟从数据库获取的CKEditor生成的内容，包含HTML标签
const ckeditorContent = '<p>这是一段<strong>加粗</strong>的文本，还有<em>斜体</em>效果</p>';
// 把内容传递给EJS模板
res.render('article', { content: ckeditorContent });
});
app.listen(3000, () => {
console.log('服务运行在3000端口');
});
对应的EJS模板文件article.ejs的渲染代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CKEditor内容展示</title>
</head>
<body>
<h1>文章内容</h1>
<div class="content">
<%- content %>
</div>
</body>
</html>
内容安全处理
直接使用非转义输出会带来XSS（跨站脚本攻击）风险，如果CKEditor的内容是用户提交的，恶意用户可能插入<script>标签执行恶意代码。因此需要在输出前对内容做安全过滤，只保留安全的HTML标签和属性。
可以使用xss模块对内容进行处理，先安装依赖：
npm install xss
修改后的服务端代码如下：
const express = require('express');
const xss = require('xss');
const app = express();
app.set('view engine', 'ejs');
// 配置xss过滤规则，只允许常见的文本格式标签
const xssOptions = {
whiteList: {
p: [],
strong: [],
em: [],
u: [],
h1: [],
h2: [],
h3: [],
ul: [],
li: []
},
stripIgnoreTagBody: ['script', 'style']
};
app.get('/article', (req, res) => {
const rawContent = '<p>正常内容</p><script>alert("恶意代码")</script>';
// 过滤恶意内容
const safeContent = xss(rawContent, xssOptions);
res.render('article', { content: safeContent });
});
app.listen(3000);
常见注意事项
- 确认CKEditor生成的内容本身是合法的HTML片段，避免传递不完整的标签导致页面结构异常。
- 如果页面需要同时支持普通文本和富文本渲染，需要根据内容类型动态选择使用
<%= %>还是<%- %>语法。 - 前端如果需要对CKEditor的内容做二次处理，注意避免重复转义，导致标签再次被当成文本显示。
总结
要让EJS正确渲染CKEditor生成的HTML内容，核心是替换默认的转义输出语法为<%- %>非转义语法，同时必须做好内容的安全过滤，防止XSS攻击。按照上述步骤处理，就能稳定、安全地展示富文本编辑器的所有格式效果。