https://enzedonline.com/en/tech-blog/configuring-rich-text-blocks-for-your-wagtail-site/
Rich text blocks are one of the most fundamental building blocks on any Wagtail Site. You want to get the structure down before you build out the rest of your site, because having to change it later will be a pain, requiring you to re-enter all of your content.
You can name different types of editors in settings.py:
WAGTAILADMIN_RICH_TEXT_EDITORS = {
'default': {
'WIDGET': 'wagtail.admin.rich_text.DraftailRichTextArea',
'OPTIONS': {
'features': ['h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr']
}
},
'full': {
'WIDGET': 'wagtail.admin.rich_text.DraftailRichTextArea',
'OPTIONS': {
'features': ['h2', 'h3', 'h4', 'h5', 'h6', 'bold', 'italic', 'ol', 'ul',
'link', 'hr', 'code', 'document-link', 'blockquote']
}
},
'custom': {
'WIDGET': 'wagtail.admin.rich_text.DraftailRichTextArea',
'OPTIONS': {
'features': ['bold', 'italic', 'center']
}
},
}
# in your page/block
content = RichTextBlock(editor='minimal')
You have the ability to add features to the Draftail Editor in three different varieties:
You can create a new file, draftail_extensions.py to hold your own custom register function that allows you to save a lot of space when naming new styles.
import wagtail.admin.rich_text.editors.draftail.features as draftail_features
from wagtail.admin.rich_text.converters.html_to_contentstate import (
BlockElementHandler,
InlineStyleElementHandler,
)
from wagtail.admin.rich_text.editors.draftail.features import InlineStyleFeature
def register_inline_styling(
features,
feature_name,
description,
type_,
tag='span',
format=None,
editor_style=None,
label=None,
icon=None
):
control = {"type": type_, "description": description}
if label:
control["label"] = label
elif icon:
control["icon"] = icon
else:
control["label"] = description
if editor_style:
control["style"] = editor_style
if not format:
style_map = {"element": tag}
markup_map = tag
else:
style_map = f'{tag} {format}'
markup_map = f'{tag}[{format}]'
features.register_editor_plugin(
"draftail", feature_name, InlineStyleFeature(control)
)
db_conversion = {
"from_database_format": {markup_map: InlineStyleElementHandler(type_)},
"to_database_format": {"style_map": {type_: style_map}},
}
features.register_converter_rule("contentstate", feature_name, db_conversion)
features
is supplied by the ‘register_rich_text_features’ hook, it is required.
feature_name
is the name used internally by wagtail, it’s the name you use in the feature list when putting it into your editor.
description
is used to explain what the feature does on hover.
type_
is unknown due to poor documentation, give it a name similar to feature_name.
tag
is optional, it gives the HTML element tag to be used, by default <span>
format
is optional, it allows you to add styles or classes, e.g: format='style="color: red; font-size: larger;"'
editory_style
alters the way formatted text is displayed in the editor, defined as a dictionary of css. editor_style={'color': 'red', 'font-size': 'larger'}
label, icon
allows you to choose one of these, label will take unicode glyphs while icon can take an SVG path.
features.register_editor_plugin(
"draftail", feature_name, InlineStyleFeature(control)
)