本文将详细介绍如何在ejs视图中正确渲染由ckeditor生成的html富文本内容，避免其被显示为原始html字符串。核心在于区分ejs模板中``和``的用法，并指导读者如何利用后者实现html的未转义输出，从而确保富文本格式能够被浏览器正确解析和呈现。
引言：富文本内容与视图引擎的挑战
在现代Web应用开发中，富文本编辑器（如CKEditor）被广泛用于允许用户创建带有格式的文本内容，例如新闻博客、文章或产品描述。这些编辑器在用户输入时会生成包含HTML标签的字符串，例如<p><strong>Hello</strong> <em>World</em>!</p>。当我们将这些HTML字符串存储到数据库并在前端通过视图引擎（如EJS）渲染时，一个常见的问题是内容可能不会按预期显示为格式化的文本，而是以原始HTML字符串的形式呈现，即浏览器直接显示
Hello World!
。理解EJS中的HTML内容渲染机制
CKEditor等富文本编辑器在提交内容时，会将其转换为包含HTML标签的字符串。例如，用户输入“Lorem ipsum dolor sit amet, Quae maxime”后，CKEditor可能会生成如下HTML字符串：
<p><strong>Lorem ipsum</strong> dolor sit amet, <i>Quae maxime</i> dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?</p>
EJS作为一款流行的JavaScript模板引擎，其默认行为是为了安全考虑而对输出内容进行HTML实体转义。这意味着，当你在EJS模板中使用<%= variable %>语法来显示一个包含HTML标签的字符串时，EJS会将其中的<、>、&等特殊字符转换为对应的HTML实体（例如，<会变成）。这种机制有效地防止了跨站脚本（XSS）攻击，因为浏览器不会将这些转义后的实体解析为实际的HTML标签，而是将其作为普通文本显示。
然而，对于由CKEditor等富文本编辑器生成的、我们期望浏览器能正确解析和渲染的HTML内容来说，这种默认的转义行为反而成了障碍。如果你的EJS模板中使用了以下代码：
立即学习“前端免费学习笔记（深入）”；
<%= content %>
其中content变量存储着CKEditor生成的HTML字符串，那么最终在浏览器中你将看到的是原始的HTML代码，而不是带有粗体、斜体等格式的文本。例如，你可能会看到：
<p><strong>Lorem ipsum</strong> dolor sit amet, <i>Quae maxime</i> dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?</p>
而不是期望的：
Lorem ipsum dolor sit amet, Quae maxime dolore necessitatibus iste aliquid dolulum in nostrum repellat rerum atque?
解决方案：使用EJS未转义输出标签
为了解决这个问题，EJS提供了一个特殊的标签用于输出未转义的HTML内容。这个标签就是<%- variable %>。
与<%= ... %>不同，<%- ... %>会直接将变量的值插入到HTML中，而不会进行任何HTML实体转义。这意味着，如果content变量包含HTML标签，浏览器将直接解析并应用这些标签，从而正确显示富文本的格式。
因此，要正确渲染CKEditor生成的富文本内容，你只需将EJS模板中的代码从：
<%= content %>
修改为：
<%- content %>
这样，当浏览器接收到HTML响应时，它会直接解析并应用content变量中的HTML标签，从而实现预期的富文本显示效果。
集成CKEditor与EJS的完整流程
下面将结合前端CKEditor的设置、后端数据处理以及EJS视图渲染，展示一个完整的集成流程。
前端CKEditor设置
首先，在你的HTML页面中，你需要一个textarea元素来初始化CKEditor，并通过表单将其内容提交到后端。
<form action="/compose" method="post">
<div class="form-group">
<label for="editor">文章内容</label>
<textarea name="postBody" id="editor">在这里开始写作。</textarea>
</div>
<button type="submit" class="btn btn-primary">发布</button>
</form>
<script src="https://cdn.ckeditor.com/ckeditor5/41.3.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create(document.querySelector('#editor'))
.then(editor => {
console.log('CKEditor initialized:', editor);
})
.catch(error => {
console.error('Error initializing CKEditor:', error);
});
</script>这段代码会初始化一个CKEditor实例，当用户在其中输入内容并点击“发布”按钮时，textarea中的HTML内容（由CKEditor生成）将作为postBody字段提交到/compose路由。
后端数据处理
在Node.js/Express.js后端，你需要设置一个路由来接收表单提交的数据，并将postBody（即CKEditor生成的HTML内容）传递给EJS视图进行渲染。
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
// 假设你有一个路由来处理文章提交
app.post('/compose', (req, res) => {
const postContent = req.body.postBody;
// 在这里你可以将 postContent 保存到数据库
// ...
// 然后渲染一个显示文章内容的页面
res.render('post', { content: postContent });
});
// 假设你有一个路由来显示单篇文章
app.get('/post/:id', (req, res) => {
// 从数据库获取文章内容
// const postContent = getPostContentFromDB(req.params.id);
const postContent = "<p>这是从数据库加载的<strong>示例内容</strong>，由<i>CKEditor</i>生成。</p>"; // 模拟从数据库获取
res.render('post', { content: postContent });
});
app.listen(3000, () => {
console.log('Server started on port 3000');
});EJS视图渲染
最后，在你的EJS视图文件（例如post.ejs）中，使用<%- content %>来正确显示富文本内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文章详情</title>
<!-- 可以引入一些CSS样式来美化页面 -->
<style>
body { font-family: sans-serif; line-height: 1.6; margin: 20px; }
.post-content { border: 1px solid #eee; padding: 15px; background-color: #f9f9f9; }
</style>
</head>
<body>
<h1>我的文章</h1>
<div class="post-content">
<%- content %>
</div>
</body>
</html>通过这种方式，content变量中的HTML标签将被浏览器直接解析，从而呈现出带有粗体、斜体、段落等格式的富文本内容。
重要提示与安全考量
虽然<%- ... %>解决了富文本内容的显示问题，但使用它时必须格外小心，因为它会绕过EJS的默认HTML转义机制。这意味着，如果content变量中的内容来自不可信的来源（例如，直接来自未经净化的用户输入），并且其中包含恶意脚本（如<script>alert('XSS Attack!')</script>），那么这些脚本将会在用户的浏览器中执行，从而导致跨站脚本（XSS）攻击。
最佳实践：
- 信任来源： 仅当您完全信任内容的来源时才使用<%- ... %>。例如，如果内容是由您自己的CKEditor实例生成，并且您已经对CKEditor的配置进行了安全加固（例如，限制了允许的HTML标签和属性），那么使用它是相对安全的。
- 后端净化（Sanitization）： 即使内容来自富文本编辑器，也强烈建议在后端存储或显示之前，对用户提交的HTML内容进行严格的净化（sanitization）。这意味着使用专门的库（如DOMPurify或xss）来移除或过滤掉所有潜在的恶意标签和属性，只保留安全的HTML结构和样式。这为您的应用程序提供了额外的安全层。
- 理解风险： 始终理解使用未转义输出标签的潜在安全风险，并采取相应的预防措施。
总结
在EJS模板中正确渲染CKEditor等富文本编辑器生成的HTML内容，关键在于理解EJS的HTML转义机制。当需要显示带有格式的HTML内容时，应使用<%- variable %>而非<%= variable %>。然而，为了确保应用程序的安全性，尤其是在处理用户生成内容时，务必结合后端净化措施，以防范潜在的XSS攻击。遵循这些指导原则，你将能够安全且有效地在EJS应用中展示丰富的用户内容。
