如何在Wagtail的Draftail编辑器中添加自定义HTML按钮功能？

实现思路 #

你的需求是插入带链接的<button>标签，这属于带属性的实体元素（需要存储href链接地址），和单纯的行内样式（比如<code>）逻辑不同，因此要用到Draftail的EntityFeature而非InlineStyleFeature。以下是简化的实现方案：

完整代码实现 #

from wagtail.core import hooks
from wagtail.admin.rich_text.converters.contentstate import (
    EntityElementHandler, EntityFeature
)

@hooks.register("register_rich_text_features")
def register_button_link_feature(features):
    # 1. 定义核心参数
    feature_name = "button_link"
    entity_type = "BUTTON_LINK"
    tag = "button"

    # 2. 配置编辑器按钮及弹窗
    control = {
        "type": entity_type,
        "label": "按钮链接",
        "description": "插入带链接的按钮",
        "entity": {
            "type": entity_type,
            "label": "插入按钮链接",
            "attributes": [
                {
                    "label": "链接地址",
                    "name": "href",
                    "type": "link",  # 复用Wagtail内置链接选择器，支持内/外部链接
                    "required": True,
                },
                {
                    "label": "按钮文本",
                    "name": "text",
                    "type": "string",
                    "required": True,
                },
                # 可选：自定义按钮样式类
                {
                    "label": "样式类",
                    "name": "class",
                    "type": "string",
                    "default": "btn-primary",
                },
            ],
        },
    }

    # 3. 注册编辑器插件
    features.register_editor_plugin(
        "draftail", feature_name, EntityFeature(control)
    )

    # 4. 配置编辑器与数据库的格式转换
    def button_entity_to_html(props):
        # 将编辑器实体数据转为HTML
        return f'<button href="{props["href"]}" class="{props.get("class", "btn-primary")}">{props["text"]}</button>'

    db_conversion = {
        "from_database_format": {
            tag: EntityElementHandler(
                entity_type,
                # 从HTML提取属性到编辑器实体
                lambda attrs: {
                    "href": attrs.get("href"),
                    "class": attrs.get("class"),
                    "text": attrs.get("text", ""),
                }
            )
        },
        "to_database_format": {
            "entity_decorators": {
                entity_type: button_entity_to_html
            }
        }
    }

    # 5. 注册格式转换规则
    features.register_converter_rule("contentstate", feature_name, db_conversion)

    # 6. 可选：添加到默认富文本功能列表
    features.default_features.append(feature_name)

预设样式渲染 #

要让按钮显示预设样式，需要在前端（包括Wagtail后台和网站前端）添加CSS：

/* 后台编辑器及前端页面通用样式 */
.rich-text button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
}

.rich-text button.btn-primary {
    background-color: #007bff;
    color: #fff;
}

.rich-text button.btn-secondary {
    background-color: #6c757d;
    color: #fff;
}

关键说明 #

• 使用EntityFeature是因为需要存储链接地址、文本等动态属性，这是行内样式无法实现的
• 配置"type": "link"的属性可直接复用Wagtail内置的链接选择器，无需自行开发输入逻辑
• 格式转换模块负责编辑器内容与数据库HTML的双向解析
• 前端CSS需同时覆盖后台编辑器和网站前端，确保按钮在两处都显示一致的预设样式

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