将 HTML 按钮添加到 Wagtail 中的 Draftail 编辑器操作按钮

Question

我在将 Wagtail 中的自定义按钮添加到 RichTextEditor 按钮时遇到了一个问题，当单击该按钮时，编辑器的用户可以添加带有 html 的链接

button

。

我在 TinyMCE 中使用的代码最初是在这里提供的：https://dev.to/codeanddeploy/tinymce-add-custom-button-example-399m

但我不知道如何在 Wagtail 中注册一个钩子来实现这种类型的功能。这里有一个类似的示例，但我不知道如何使实际按钮能够使用我们预定义的样式进行渲染，就像我在 TinyMCE 编辑器中所做的那样。

这是一个适合此用例的示例，但我希望有一个简单的示例，可以像我在 TinyMCE 中所做的那样添加按钮：https://erev0s.com/blog/wagtail-list-提示和技巧/#在富文本编辑器中添加代码按钮

这是该帖子的代码：

from wagtail.core import hooks

@hooks.register("register_rich_text_features")
def register_code_styling(features):
    """Add the <code> to the richtext editor and page."""

    # Step 1
    feature_name = "code"
    type_ = "CODE"
    tag = "code"

    # Step 2
    control = {
        "type": type_,
        "label": "</>",
        "description": "Code"
    }

    # Step 3
    features.register_editor_plugin(
        "draftail", feature_name, draftail_features.InlineStyleFeature(control)
    )

    # Step 4
    db_conversion = {
        "from_database_format": {tag: InlineStyleElementHandler(type_)},
        "to_database_format": {"style_map": {type_: {"element": tag}}}
    }

    # Step 5
    features.register_converter_rule("contentstate", feature_name, db_conversion)

    # Step 6. This is optional
    # This will register this feature with all richtext editors by default
    features.default_features.append(feature_name)

Answer 1

我认为您最好创建一个块来添加号召性用语按钮。当我想要这样的东西时，我使用带有文本、url 和样式选项的 StructBlock https://docs.wagtail.org/en/latest/topics/streamfield.html#structblock