如何让RichText的两个自定义文本着色功能实现互斥效果

要实现两个自定义内联颜色样式的互斥效果，不需要额外编写复杂的自定义逻辑，Draftail原生支持同组内联样式的互斥能力，仅需要给两个颜色样式的control配置添加相同的style_type分组属性即可，逻辑和内置h标签互斥完全一致。

完整修改后可直接使用的代码示例 #

@hooks.register('register_rich_text_features')
def register_redtext_feature(features):
    feature_name = 'redtext'
    type_ = 'RED_TEXT'
    tag = 'span'

    control = {
        'type': type_,
        'label': 'Red',
        'style': {'color': '#bd003f'},
        # 新增：指定样式分组，两个颜色使用相同的分组名即可实现互斥
        'style_type': 'custom_text_color',
    }

    features.register_editor_plugin(
        'draftail', feature_name, draftail_features.InlineStyleFeature(control)
    )

    db_conversion = {
        # 优化：添加class限定，避免和其他同标签样式的转换逻辑冲突
        'from_database_format': {'span[class="text-primary"]': InlineStyleElementHandler(type_)},
        'to_database_format': {
            'style_map': {
                type_: {'element': tag, 'props': {'class': 'text-primary'}}
            }
        },
    }

    features.register_converter_rule(
        'contentstate', feature_name, db_conversion
    )

# 另一个颜色样式实现，仅颜色、类名、标识等参数不同，分组名保持一致
@hooks.register('register_rich_text_features')
def register_bluetext_feature(features):
    feature_name = 'bluetext'
    type_ = 'BLUE_TEXT'
    tag = 'span'

    control = {
        'type': type_,
        'label': 'Blue',
        'style': {'color': '#0d6efd'},
        # 和红色样式使用完全相同的分组名
        'style_type': 'custom_text_color',
    }

    features.register_editor_plugin(
        'draftail', feature_name, draftail_features.InlineStyleFeature(control)
    )

    db_conversion = {
        'from_database_format': {'span[class="text-secondary"]': InlineStyleElementHandler(type_)},
        'to_database_format': {
            'style_map': {
                type_: {'element': tag, 'props': {'class': 'text-secondary'}}
            }
        },
    }

    features.register_converter_rule(
        'contentstate', feature_name, db_conversion
    )

关键说明 #

• style_type的值可以自定义，只要需要互斥的颜色样式的该参数值完全一致即可，Draftail会自动将同分组的内联样式设为互斥状态，选中其中一个会自动取消同组其他样式的选中状态。
• 如果后续需要新增更多颜色选项，只要保持style_type值相同，都会自动加入互斥逻辑。
• 新增的class限定是为了避免数据库转换时多个span样式识别冲突，确保从数据库读取内容时能正确还原对应的颜色样式。

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