[Django]-Wagtail: How to override HTML tag output from database. Use <strong> or <em> instead of <b> or <i> for richtext template tag

by

4👍

✅

I got the same issue and asked on the Wagtail Slack support channel. I got the advice to register a new rich text feature. The documentation shows a strikethrough example. Here are bold (strong) and italic (em):

import wagtail.admin.rich_text.editors.draftail.features as draftail_features
from wagtail.admin.rich_text.converters.html_to_contentstate import (
    InlineStyleElementHandler,
)


@hooks.register('register_rich_text_features')
def register_strong_feature(features):
    """
    Registering the `strong` feature. It will render bold text with `strong` tag.
    Default Wagtail uses the `b` tag.
    """
    feature_name = 'strong'
    type_ = 'BOLD'
    tag = 'strong'

    # Configure how Draftail handles the feature in its toolbar.
    control = {
        'type': type_,
        'icon': 'bold',
        'description': 'Bold',
    }

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

    # 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}},
    }

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

And italics with the <em> tag:

@hooks.register('register_rich_text_features')
def register_em_feature(features):
    """
    Registering the `em` feature. It will render italic text with `em` tag.
    Default Wagtail uses the `i` tag.
    """
    feature_name = 'em'
    type_ = 'ITALIC'
    tag = 'em'

    control = {
        'type': type_,
        'icon': 'italic',
        'description': 'Italic',
    }

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

    db_conversion = {
        'from_database_format': {tag: InlineStyleElementHandler(type_)},
        'to_database_format': {'style_map': {type_: tag}},
    }

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

Specify the features on your rich text fields. Don’t forget to remove the old ‘bold’ and ‘italic’:

from wagtail.core.fields import RichTextField

class FooPage(Page):
    body = RichTextField(features=['strong', 'em'])
👤allcaps

Leave a comment