如何在Wagtail富文本字段中执行JavaScript脚本？

核心结论 #

Wagtail默认会过滤富文本中的<script>标签及JS相关内容——这是内置的安全防护机制，用于防范XSS攻击。要让JS在富文本中生效，需要修改Wagtail的富文本清理规则，但强烈不建议直接在富文本字段中嵌入JS，这会带来极高的安全风险。如果要实现类似“展开/收起”的功能，更合理的方案是把JS逻辑放到前端模板的全局代码中，而非通过富文本字段传递。

为什么你的脚本无法运行 #

Wagtail的RichTextField/RichTextBlock依赖bleach库清理HTML内容，默认会移除所有<script>标签、javascript:伪协议以及事件属性（如onclick）。即使你在后台输入了脚本，保存时也会被自动过滤，前端根本接收不到这些JS代码。

正确的实现方式（替代方案） #

不要把JS嵌入富文本，而是将展开/收起的逻辑写到页面模板的全局JS中，同时在模板里处理内容截断：

1. 模板中的HTML结构（保留原逻辑，但无需富文本包含JS）：

{% with text=page.intro %}
    {% if text|wordcount > 10 %}
        <p class="half-content" id="half-{{ page.id }}">
            {{ text|richtext|truncatewords:10 }}
            <a data-id="{{ page.id }}" href="#" class="show-hide-btn"><br>阅读更多</a>
        </p>
        <p class="full-content" id="full-{{ page.id }}" style="display: none;">
            {{ text|richtext }}
            <a data-id="{{ page.id }}" href="#" class="show-hide-btn">收起</a>
        </p>
    {% else %}
        <p>{{ text|richtext }}</p>
    {% endif %}
{% endwith %}

2. 全局JS文件（放到项目静态资源目录，比如static/js/expand-content.js）：

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.show-hide-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault(); // 阻止默认跳转行为
            const id = this.dataset.id;
            document.getElementById(`half-${id}`).classList.toggle('hidden');
            document.getElementById(`full-${id}`).classList.toggle('hidden');
        });
    });
});

3. 在模板中引入全局JS：

{% load static %}
<script src="{% static 'js/expand-content.js' %}"></script>

如果非要在富文本中允许JS（不推荐） #

若你确定场景绝对安全（比如只有超级管理员能编辑内容），可以修改Wagtail的富文本配置，允许<script>标签：

在项目的settings.py中添加：

from wagtail.core.richtext import WagtailRichTextConfig

WAGTAILRICHTEXT_CONFIG = {
    'allowed_tags': ['script', 'a', 'p', 'br'] + WagtailRichTextConfig.DEFAULT['allowed_tags'],
    'allowed_attributes': {
        'script': ['src'],
        'a': ['href', 'data-id', 'class'],
    }
}

注意：此操作会大幅降低系统安全性，仅在完全可控的环境下使用。

总结 #

直接在富文本中嵌入JS既不安全也不符合Wagtail的设计理念，建议采用全局JS+模板逻辑的方案实现功能，既安全又便于维护。

内容的提问来源于stack exchange，提问作者donbonbon