解决EJS中CKEditor HTML内容显示为原始字符串的问题-html教程-PHP中文网

解决EJS中CKEditor HTML内容显示为原始字符串的问题

花韻仙語

发布： 2025-11-02 10:39:43

原创

382人浏览过

解决EJS中CKEditor HTML内容显示为原始字符串的问题

本文将详细介绍如何在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模板中的代码从：

Trae国内版

国内首款AI原生IDE，专为中国开发者打造

815

查看详情

<%= 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应用中展示丰富的用户内容。

以上就是解决EJS中CKEditor HTML内容显示为原始字符串的问题的详细内容，更多请关注php中文网其它相关文章！