在Wagtail无头模式下为RichTextBlock的h2添加Tailwind类

我在无头模式下使用Wagtail搭配Tailwind/Next.js。当在RichTextBlock中选择h2格式时，API返回的数据如下：

{
    "type": "text",
    "value": "<h2 data-block-key=\"owi81\">Repurpose Article into Social Media Content</h2>",
    "id": "2b7e811d-eb1b-40da-b108-8cf9778536b3"
}

我期望返回的h2标签能带上Tailwind类，例如：

{
    "type": "text",
    "value": "<h2 data-block-key=\"owi81\" class=\"text-5xl\">Repurpose Article into Social Media Content</h2>",
    "id": "2b7e811d-eb1b-40da-b108-8cf9778536b3"
}

我尝试用Wagtail hooks实现但没成功，相关代码如下：

@hooks.register('register_rich_text_features')
def register_tailwind_classes(features):
   feature_name = 'h2'
   type_ = 'header-two'
   tag = 'h2'

   # 配置数据库与编辑器之间的内容转换
   db_conversion = {
       'from_database_format': {tag: TailwindClassHandler(type_)},
       'to_database_format': {'block_map': {type_: tag}},
   }

   # 注册内容转换规则
   features.register_converter_rule('contentstate', feature_name, db_conversion)

请问该如何实现需求？当前用hooks的方式是否正确？

1. 当前hook方式的问题 #

你当前的代码缺少自定义TailwindClassHandler的具体实现，且register_converter_rule的配置逻辑不符合需求——这个钩子主要负责编辑器（Draftail）与数据库之间的格式转换，无法直接修改API返回的HTML标签属性。

2. 正确实现方式：修改RichText的HTML渲染逻辑 #

要给h2标签添加Tailwind类，更可靠的方式是在HTML输出阶段注入类名，可通过以下两种方法实现：

方法一：通过全局钩子修改渲染逻辑 #

使用register_rich_text_renderer钩子，全局修改RichText的HTML输出：

from django.utils.html import format_html
from wagtail.rich_text import expand_db_html
from wagtail.core import hooks

@hooks.register('register_rich_text_renderer')
def register_tailwind_renderer(features):
    def tailwind_renderer(html):
        # 替换h2标签，添加Tailwind类
        modified_html = html.replace('<h2', '<h2 class="text-5xl"')
        # 如需处理其他标签，可继续添加replace规则
        return format_html(modified_html)

    features.register_renderer('default', tailwind_renderer)

方法二：自定义RichTextBlock实现精准控制 #

如果需要针对特定页面或块单独处理，可自定义RichTextBlock并重写API输出逻辑：

from wagtail.core.blocks import RichTextBlock
from wagtail.rich_text import expand_db_html

class TailwindRichTextBlock(RichTextBlock):
    def get_api_representation(self, value, context=None):
        if not value:
            return None
        # 获取原始HTML内容
        html = expand_db_html(value.source)
        # 用正则精准匹配h2标签，避免误替换
        import re
        modified_html = re.sub(r'<h2(\s[^>]*)?>', r'<h2\1 class="text-5xl">', html)
        return {
            'type': 'text',
            'value': modified_html,
            'id': value.id if hasattr(value, 'id') else None,
        }

之后在页面模型中使用这个自定义块：

from wagtail.core.models import Page
from wagtail.core.fields import RichTextField

class BlogPage(Page):
    body = TailwindRichTextBlock()

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

3. 注意事项 #

• 若RichText中存在带额外属性的h2标签（如data-block-key），使用正则表达式替换比简单的字符串替换更精准
• 如需给其他标签（h3、p等）添加Tailwind类，可在替换逻辑中补充对应规则

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