EJS正确渲染CKEditor生成HTML内容的指南-html教程-PHP中文网

EJS正确渲染CKEditor生成HTML内容的指南

DDD

发布： 2025-11-03 10:54:01

原创

780人浏览过

EJS正确渲染CKEditor生成HTML内容的指南

当在node.js express应用中使用ejs作为视图引擎并集成ckeditor生成富文本内容时，一个常见问题是ejs的默认`<%= %>`语法会转义html标签，导致页面显示原始html代码而非渲染后的内容。本教程将详细阐述如何利用ejs的非转义输出语法`<%- %>`来正确渲染ckeditor生成的html内容，确保所有格式和样式都能按预期呈现。

理解问题：CKEditor与EJS的HTML渲染挑战

在使用富文本编辑器如CKEditor时，用户输入的内容会被转换为包含各种HTML标签（如, , 等）的字符串。例如，用户输入“Lorem ipsum dolor sit amet”，CKEditor会将其转换为Lorem ipsum dolor sit amet。

在基于Node.js和Express框架构建的网站中，如果选择EJS作为视图引擎来渲染这些HTML字符串，开发者可能会遇到一个普遍的问题：EJS的默认输出机制会将这些HTML标签作为普通文本进行转义。这意味着，当页面加载时，用户看到的是带有尖括号的原始HTML代码，而不是经过浏览器解析和渲染的富文本内容。

例如，期望的输出是： Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae maxime dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?

但实际输出却是： Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae maxime dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?

这种现象的根本原因在于EJS为了安全考虑，默认对通过<%= %>输出的所有内容进行HTML实体转义，以防止跨站脚本攻击（XSS）。

EJS的输出语法：转义与非转义

EJS提供了两种主要的输出标签，用于控制内容是否被转义：

立即学习“前端免费学习笔记（深入）”；

<%= variable %> (带转义的输出) 这是EJS的默认行为。它会将variable中的所有HTML特殊字符（如<, >, &, ", '）转换为对应的HTML实体（如, &）。这种机制旨在提高安全性，防止恶意用户通过注入HTML或JavaScript代码来攻击网站。
<%- variable %> (不带转义的原始输出) 这个标签告诉EJS直接输出variable的原始值，不进行任何HTML实体转义。当确定内容是安全且需要作为HTML结构进行渲染时，应使用此标签。例如，当从CKEditor接收到的内容就是预期要渲染的HTML时，就需要使用<%- %>。

问题复现与解决方案

为了更清晰地说明，我们来看一个典型的场景，包括客户端的CKEditor集成、服务端的数据处理以及视图层的渲染。

客户端（CKEditor集成）

在前端页面中，通常会有一个表单，其中包含一个textarea元素，并由CKEditor进行初始化。

<form action="/compose" method="post">
    <div class="form-group">
        <label>文章内容</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.2.0/classic/ckeditor.js"></script>
<script>
    ClassicEditor
        .create(document.querySelector('#editor'))
        .then(editor => {
            console.log('CKEditor initialized', editor);
        })
        .catch(error => {
            console.error('CKEditor initialization failed:', error);
        });
</script>

登录后复制

当用户在CKEditor中输入内容并提交表单时，postBody字段将包含由CKEditor生成的HTML字符串。

服务端（Node.js Express）

在Express应用中，服务端会接收到这个HTML字符串，并将其存储或直接传递给EJS模板进行渲染。

// 假设这是Express路由文件中的一部分
const express = require('express');
const router = express.Router();

router.post('/compose', (req, res) => {
    const postContent = req.body.postBody; // 获取CKEditor提交的HTML内容
    // 在这里通常会将postContent保存到数据库
    // ...

    // 然后，将内容传递给一个展示页面
    res.render('postPage', { content: postContent });
});

router.get('/post/:id', (req, res) => {
    // 假设从数据库获取了文章内容
    const fetchedContent = "<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit.<i> Quae maxime</i> dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?</p>"; // 示例数据
    res.render('postPage', { content: fetchedContent });
});

module.exports = router;

登录后复制

视图层（EJS模板）

现在，关键在于EJS模板如何渲染这个content变量。

错误示例：使用<%= content %>

如果使用默认的转义输出，页面将显示原始HTML标签：

<!-- postPage.ejs -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文章详情</title>
</head>
<body>
    <h1>我的文章</h1>
    <div>
        <%= content %>
    </div>
</body>
</html>

登录后复制

渲染结果：

<div>
    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit.<i> Quae maxime</i> dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1225">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680125789371.png" alt="uBrand Logo生成器">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1225">uBrand Logo生成器</a>
                            <p>uBrand Logo生成器是一款强大的AI智能LOGO设计工具。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="uBrand Logo生成器">
                                <span>57</span>
                            </div>
                        </div>
                        <a href="/ai/1225" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="uBrand Logo生成器">
                        </a>
                    </div>
                
</div>

登录后复制

浏览器会直接显示这些转义后的字符，而不是渲染它们。

正确示例：使用<%- content %>

要正确渲染CKEditor生成的HTML内容，必须使用非转义输出标签：

<!-- postPage.ejs -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文章详情</title>
</head>
<body>
    <h1>我的文章</h1>
    <div>
        <%- content %>
    </div>
</body>
</html>

登录后复制

渲染结果：

<div>
    <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit.<i> Quae maxime</i> dolore necessitatibus iste aliquid dolorum in nostrum repellat rerum atque?</p>
</div>

登录后复制

此时，浏览器会正确解析并显示加粗、斜体等格式，达到预期的富文本效果。

注意事项与安全考量

虽然<%- %>解决了HTML渲染问题，但使用它时务必谨慎，因为它直接输出了原始HTML，这引入了潜在的安全风险，特别是跨站脚本攻击（XSS）。

XSS风险： 如果content变量来自不受信任的用户输入，恶意用户可能会注入<script>标签或其他HTML代码，从而在其他用户浏览器中执行恶意脚本。
内容来源信任度： 在本教程的场景中，CKEditor内容通常由博客作者或管理员撰写，他们是网站的“信任”用户。在这种情况下，使用<%- %>的风险相对较低，因为内容是受控的。
HTML净化： 即使内容来自“信任”用户，或者在任何可能接收用户生成HTML的场景中，强烈建议在将HTML内容保存到数据库之前或渲染到页面之前，对其进行HTML净化（Sanitization）。HTML净化库（如DOMPurify）可以帮助移除潜在的恶意标签和属性，只保留安全的HTML结构。

例如，在服务端可以这样处理：
```
const DOMPurify = require('dompurify')(require('jsdom').JSDOM); // 需要jsdom环境

router.post('/compose', (req, res) => {
 const rawContent = req.body.postBody;
 const cleanContent = DOMPurify.sanitize(rawContent); // 净化HTML
 res.render('postPage', { content: cleanContent });
});
```
登录后复制
通过净化，可以确保即使使用<%- %>，输出的HTML也是安全的。

总结

在Node.js Express应用中使用EJS渲染CKEditor生成的HTML内容时，核心解决方案是理解EJS的两种输出语法：<%= %>用于带转义的安全输出，而<%- %>用于不带转义的原始HTML输出。为了正确显示富文本内容，应将EJS模板中的<%= content %>替换为<%- content %>。同时，务必牢记使用原始HTML输出可能带来的XSS安全风险，并根据内容来源的信任度，考虑实施HTML净化措施以增强应用的安全性。

以上就是EJS正确渲染CKEditor生成HTML内容的指南的详细内容，更多请关注php中文网其它相关文章！