如何解决Wagtail CMS Draftail编辑器外链rel属性无法保存问题

问题背景 #

已通过继承外链选择表单、视图并注册钩子，在Draftail编辑器的外链选择界面添加了noreferrer/nofollow的rel属性选择项，但保存富文本内容时，rel属性并未被写入数据库的链接中。

已完成的前端配置代码 #

自定义外链选择表单 #

from wagtail.contrib.forms.forms import ExternalLinkChooserForm
from django import forms
from django.utils.translation import gettext_lazy as _

class CustomExternalLinkChooserForm(ExternalLinkChooserForm):
    rel = forms.ChoiceField(
        choices=[
            ("noreferrer", "Noreferrer"),
            ("nofollow", "Nofollow"),
        ],
        required=False,
        label=_("Rel Attribute"),
    )

自定义外链视图 #

from wagtail.contrib.forms.views import ExternalLinkView

class CustomExternalLinkView(ExternalLinkView):
    form_class = CustomExternalLinkChooserForm

注册覆盖核心视图 #

from django.urls import path
from wagtail.core import hooks

@hooks.register("register_admin_urls")
def register_custom_external_link_view():
    return [
        path(
            "admin/choose-external-link/",
            CustomExternalLinkView.as_view(),
            name="wagtailadmin_choose_page_external_link",
        )
    ]

核心问题与解决步骤 #

问题根源 #

默认的ExternalLinkView在处理表单提交时，仅向Draftail编辑器返回url和title字段，未包含自定义的rel值，导致编辑器无法将该属性写入数据库。

步骤1：修改视图，传递rel属性给编辑器 #

重写CustomExternalLinkView的get_result_data方法，将表单中的rel值加入返回数据：

class CustomExternalLinkView(ExternalLinkView):
    form_class = CustomExternalLinkChooserForm

    def get_result_data(self, form):
        # 先获取默认返回数据
        data = super().get_result_data(form)
        # 提取并添加rel属性
        rel_value = form.cleaned_data.get("rel")
        if rel_value:
            data["rel"] = rel_value
        return data

步骤2：自定义外链处理器，处理rel属性的存储与渲染 #

Wagtail通过LinkHandler处理富文本中链接的序列化（存储到数据库）和反序列化（渲染为HTML），需要自定义处理器来支持rel属性：

from wagtail.rich_text import LinkHandler
from wagtail.rich_text.features import LinkHandlerFeature, register_rich_text_feature

class CustomExternalLinkHandler(LinkHandler):
    identifier = "external"  # 对应Draftail的external链接类型

    @classmethod
    def get_attributes(cls, attrs):
        # 从编辑器传递的attrs中提取rel，用于生成数据库存储的属性
        attributes = super().get_attributes(attrs)
        if "rel" in attrs:
            attributes["rel"] = attrs["rel"]
        return attributes

    @classmethod
    def expand_db_attributes(cls, attrs):
        # 从数据库存储的attrs中提取rel，渲染为HTML链接
        href = attrs["href"]
        rel_attr = attrs.get("rel", "")
        return f'<a href="{href}" rel="{rel_attr}">'

# 注册自定义的外链处理特征
@register_rich_text_feature("external_link", LinkHandlerFeature)
def register_external_link_feature(features):
    features.register_link_handler(CustomExternalLinkHandler)

步骤3：验证效果 #

重新启动Wagtail服务后，在Draftail中添加外链并选择rel属性，保存后查看数据库中的富文本内容（通常为JSON格式），会看到external类型的链接已包含rel字段；渲染页面时，HTML链接也会带上对应的rel属性。

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