本文将详细介绍如何在ejs视图中正确渲染由ckeditor生成的html富文本内容，避免其被显示为原始html字符串。核心在于区分ejs模板中“和“的用法，并指导读者如何利用后者实现html的未转义输出，从而确保富文本格式能够被浏览器正确解析和呈现。
引言：富文本内容与视图引擎的挑战
在现代Web应用开发中，富文本编辑器（如CKEditor）被广泛用于允许用户创建带有格式的文本内容，例如新闻博客、文章或产品描述。这些编辑器在用户输入时会生成包含HTML标签的字符串，例如
Hello World!
。当我们将这些HTML字符串存储到数据库并在前端通过视图引擎（如EJS）渲染时，一个常见的问题是内容可能不会按预期显示为格式化的文本，而是以原始HTML字符串的形式呈现，即浏览器直接显示
Hello World!
。
理解EJS中的HTML内容渲染机制
CKEditor等富文本编辑器在提交内容时，会将其转换为包含HTML标签的字符串。例如，用户输入“Lorem ipsum dolor sit amet, Quae maxime”后，CKEditor可能会生成如下HTML字符串：
Lorem ipsum dolor sit amet, Quae maxime dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?
EJS作为一款流行的JavaScript模板引擎，其默认行为是为了安全考虑而对输出内容进行HTML实体转义。这意味着，当你在EJS模板中使用语法来显示一个包含HTML标签的字符串时，EJS会将其中的、&等特殊字符转换为对应的HTML实体（例如，会变成>）。这种机制有效地防止了跨站脚本（XSS）攻击，因为浏览器不会将这些转义后的实体解析为实际的HTML标签，而是将其作为普通文本显示。
立即学习“前端免费学习笔记（深入）”；
然而，对于由CKEditor等富文本编辑器生成的、我们期望浏览器能正确解析和渲染的HTML内容来说，这种默认的转义行为反而成了障碍。如果你的EJS模板中使用了以下代码：
其中content变量存储着CKEditor生成的HTML字符串，那么最终在浏览器中你将看到的是原始的HTML代码，而不是带有粗体、斜体等格式的文本。例如，你可能会看到：
Lorem ipsum dolor sit amet, Quae maxime dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?
而不是期望的：
Lorem ipsum dolor sit amet, Quae maxime dolore necessitatibus iste aliquid dolulum in nostrum repellat rerum atque?
解决方案：使用EJS未转义输出标签
为了解决这个问题，EJS提供了一个特殊的标签用于输出未转义的HTML内容。这个标签就是。
与不同，会直接将变量的值插入到HTML中，而不会进行任何HTML实体转义。这意味着，如果content变量包含HTML标签，浏览器将直接解析并应用这些标签，从而正确显示富文本的格式。
因此，要正确渲染CKEditor生成的富文本内容，你只需将EJS模板中的代码从：
修改为：
这样，当浏览器接收到HTML响应时，它会直接解析并应用content变量中的HTML标签，从而实现预期的富文本显示效果。
集成CKEditor与EJS的完整流程
下面将结合前端CKEditor的设置、后端数据处理以及EJS视图渲染，展示一个完整的集成流程。
前端CKEditor设置
首先，在你的HTML页面中，你需要一个textarea元素来初始化CKEditor，并通过表单将其内容提交到后端。
ClassicEditor .create(document.querySelector('#editor')) .then(editor => { console.log('CKEditor initialized:', editor); }) .catch(error => { console.error('Error initializing CKEditor:', error); });
这段代码会初始化一个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 = "这是从数据库加载的示例内容，由CKEditor生成。
"; // 模拟从数据库获取 res.render('post', { content: postContent });});app.listen(3000, () => { console.log('Server started on port 3000');});
EJS视图渲染
最后，在你的EJS视图文件（例如post.ejs）中，使用来正确显示富文本内容：
文章详情 body { font-family: sans-serif; line-height: 1.6; margin: 20px; } .post-content { border: 1px solid #eee; padding: 15px; background-color: #f9f9f9; }我的文章
通过这种方式，content变量中的HTML标签将被浏览器直接解析，从而呈现出带有粗体、斜体、段落等格式的富文本内容。
重要提示与安全考量
虽然解决了富文本内容的显示问题，但使用它时必须格外小心，因为它会绕过EJS的默认HTML转义机制。这意味着，如果content变量中的内容来自不可信的来源（例如，直接来自未经净化的用户输入），并且其中包含恶意脚本（如alert(‘XSS Attack!’)），那么这些脚本将会在用户的浏览器中执行，从而导致跨站脚本（XSS）攻击。
最佳实践：
信任来源： 仅当您完全信任内容的来源时才使用。例如，如果内容是由您自己的CKEditor实例生成，并且您已经对CKEditor的配置进行了安全加固（例如，限制了允许的HTML标签和属性），那么使用它是相对安全的。后端净化（Sanitization）： 即使内容来自富文本编辑器，也强烈建议在后端存储或显示之前，对用户提交的HTML内容进行严格的净化（sanitization）。这意味着使用专门的库（如DOMPurify或xss）来移除或过滤掉所有潜在的恶意标签和属性，只保留安全的HTML结构和样式。这为您的应用程序提供了额外的安全层。理解风险： 始终理解使用未转义输出标签的潜在安全风险，并采取相应的预防措施。
总结
在EJS模板中正确渲染CKEditor等富文本编辑器生成的HTML内容，关键在于理解EJS的HTML转义机制。当需要显示带有格式的HTML内容时，应使用而非。然而，为了确保应用程序的安全性，尤其是在处理用户生成内容时，务必结合后端净化措施，以防范潜在的XSS攻击。遵循这些指导原则，你将能够安全且有效地在EJS应用中展示丰富的用户内容。
以上就是解决EJS中CKEditor HTML内容显示为原始字符串的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1591121.html
微信扫一扫 
支付宝扫一扫 
