Wagtail模板中插入非div包裹文本的最佳方法咨询

嘿，这个问题我之前帮不少开发者解决过——Wagtail默认的文本字段确实容易自带外层div，一不小心就打乱了现有模板的布局。结合你的需求（DraftTail暂不用于生产），给你分享几个亲测有效的方案，按推荐优先级排序：

1. 自定义无包裹文本Block（最推荐） #

从源头避免生成外层div，直接创建一个只返回纯文本的自定义Block，干净又可控。

步骤1：定义自定义Block #

在你的app下创建blocks.py，写入：

from wagtail.core.blocks import TextBlock

class SimpleTextBlock(TextBlock):
    def render(self, value, context=None):
        # 跳过默认的标签包裹逻辑，直接返回文本内容
        return value

步骤2：在页面模型中使用 #

from wagtail.core.models import Page
from wagtail.core.fields import StreamField
from .blocks import SimpleTextBlock

class YourPage(Page):
    # 用自定义的SimpleTextBlock替代默认的TextBlock/RichTextBlock
    body = StreamField([
        ('plain_text', SimpleTextBlock(label="纯文本内容")),
        # 保留其他需要的Block类型...
    ], use_json_field=True)

    content_panels = Page.content_panels + [
        FieldPanel('body'),
    ]

模板渲染 #

直接渲染即可，完全没有外层标签：

{% for block in page.body %}
    {{ block }}
{% endfor %}

2. 自定义模板过滤器（快速解决现有字段问题） #

如果不想修改已有的页面模型/Block，就用过滤器把外层的div标签去掉。这种方式适合快速适配现有内容。

步骤1：创建过滤器 #

在你的app下创建templatetags/wagtail_custom_filters.py（记得给templatetags目录加__init__.py）：

from django import template
from django.utils.html import strip_spaces_between_tags

register = template.Library()

@register.filter
def strip_outer_div(value):
    # 先清理多余的空格和换行，方便标签匹配
    cleaned_content = strip_spaces_between_tags(value.strip())
    
    # 判断是否是<div>包裹的内容
    if cleaned_content.startswith('<div') and cleaned_content.endswith('</div>'):
        # 截取<div>之后、</div>之前的内容
        start_pos = cleaned_content.find('>') + 1
        end_pos = cleaned_content.rfind('</div>')
        return cleaned_content[start_pos:end_pos].strip()
    
    # 不是div包裹的内容直接返回
    return cleaned_content

步骤2：在模板中使用 #

先加载过滤器，再应用到字段上：

{% load wagtail_custom_filters %}

{# 处理RichTextField字段 #}
{{ page.your_rich_text_field|strip_outer_div }}

{# 处理StreamField中的RichTextBlock #}
{% for block in page.body %}
    {% if block.block_type == 'rich_text' %}
        {{ block.value|strip_outer_div }}
    {% else %}
        {{ block }}
    {% endif %}
{% endfor %}

3. 全局修改RichText配置（谨慎使用） #

如果你想全局禁用RichText的外层div包裹，可以修改Wagtail的配置，但注意这会影响所有使用RichText的地方，可能引发其他布局问题：

# settings.py
WAGTAIL_RICH_TEXT_EDITORS = {
    'default': {
        'WIDGET': 'wagtail.admin.rich_text.DraftailRichTextArea',
        'OPTIONS': {
            'features': ['bold', 'italic', 'link'],
            # 清空wrapper_class，部分Wagtail版本可以去掉外层div的类名
            'wrapper_class': '',
        }
    },
}

不过这个方法在不同Wagtail版本中兼容性不一，不如前两种方案灵活可控，所以只作为备选。

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