鹡鸰草稿：将 class 添加到 div

Question

我想将自定义元素添加到我的草稿编辑器中。添加 div 元素不是问题。但我也想添加到 div 我自己的 class.

我该怎么做？这是我当前的代码：

@hooks.register('register_rich_text_features')
def register_infobox_feature(features):
    """
    Registering the `mark` feature, which uses the `MARK` Draft.js inline style type,
    and is stored as HTML with a `<mark>` tag.
    """
    feature_name = 'infobox'
    type_ = 'div'
    tag = 'div'

    # 2. Configure how Draftail handles the feature in its toolbar.
    control = {
        'type': type_,
        'label': 'InfoBox',
        'description': 'Infobox',
        # This isn’t even required – Draftail has predefined styles for MARK.
        # 'style': {'textDecoration': 'line-through'},
    }

    # 3. Call register_editor_plugin to register the configuration for Draftail.
    features.register_editor_plugin(
        'draftail', feature_name, draftail_features.InlineStyleFeature(control)
    )

    # 4.configure the content transform from the DB to the editor and back.
    db_conversion = {
        'from_database_format': {tag: InlineStyleElementHandler(type_)},
        'to_database_format': {'style_map': {type_: tag, 'props': {'class' : 'test'}}},
    }

    # 5. Call register_converter_rule to register the content transformation conversion.
    features.register_converter_rule('contentstate', feature_name, db_conversion)

    # 6. (optional) Add the feature to the default features list to make it available
    # on rich text fields that do not specify an explicit 'features' list
    features.default_features.append('infobox')

看起来可以用于新的块元素，但不能用于实体。为什么？ https://docs.wagtail.io/en/v2.6/advanced_topics/customisation/extending_draftail.html#creating-new-inline-styles

Answer 1

今天遇到同样的问题，我在任何文档中都找不到解决方案，但我只是简单地添加：

tag = 'div class="myClass"'

成功了。

我发布了我的全部功能，以防万一有人会寻找这样的解决方案：

import wagtail.admin.rich_text.editors.draftail.features as draftail_features
from wagtail.admin.rich_text.converters.html_to_contentstate import InlineStyleElementHandler
from wagtail.core import hooks

# 1. Use the register_rich_text_features hook.
@hooks.register('register_rich_text_features')
def register_flashgreen_feature(features):
    """
    Registering the `mark` feature, which uses the `MARK` Draft.js inline style type,
    and is stored as HTML with a `<mark>` tag.
    """
    feature_name = 'FlashGreen'
    type_ = 'FG'
    tag = 'div class="FG"'

    # 2. Configure how Draftail handles the feature in its toolbar.
    control = {
        'type': type_,
        'label': 'Flash_Green',
        'description': 'Flash Green',
        'style': {'color': '#00F000'},
    }

    # 3. Call register_editor_plugin to register the configuration for Draftail.
    features.register_editor_plugin(
        'draftail', feature_name, draftail_features.InlineStyleFeature(control)
    )

    # 4.configure the content transform from the DB to the editor and back.
    db_conversion = {
        'from_database_format': {tag: InlineStyleElementHandler(type_)},
        'to_database_format': {'style_map': {type_: tag}},
    }

    # 5. Call register_converter_rule to register the content transformation conversion.
    features.register_converter_rule(
        'contentstate', feature_name, db_conversion)

    # 6. (optional) Add the feature to the default features list to make it available
    # on rich text fields that do not specify an explicit 'features' list
    features.default_features.append('FlashGreen')

鹡鸰草稿：将 class 添加到 div

Wagtail Draftail: Add class to div

editor

wagtail