Wagtail RichTextBlock extend to pick color

Question

I am trying to implement a color-chooser option in wagtail RichTextBlock so that I can select any color for my selected text.

This is my wagtail_hooks.py file:

@hooks.register("register_rich_text_features")
def register_colortext_feature(features):
    """Creates centered text in our richtext editor and page."""

    # Step 1
    feature_name = "Text Color Picker"
    type_ = "TEXTCOLOR"
    tag = "span"

    # Step 2
    control = {
        "type": type_,
        "label": "color",
        "description": "Color Text",
        # "style": {
        #     "display": "block",
        #     "text-align": "center",
        # },
    }

    # 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,
                    "props": {
                        "style": "color:colorcode"
                    }
                }
            }
        }
    }

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

    # Step 6, This is optional.
    features.default_features.append(feature_name)

Is there anyone who can help me with this? I just tried my best to achieve this but no luck.

Where exactly is your code breaking? Please include the error that's happening, or the unexpected behavior so we can more easily diagnose what's going on. — Caleb Anthony, Jan 21 '20 at 21:33
You're going to have to be more specific about the trouble you're experiencing in order for us to understand and help you. — Caleb Anthony, Jan 22 '20 at 15:54

score 0 · Accepted Answer · answered Jan 21 '20 at 20:14

0

Could you add a charfield or charblock to your model or streamblock where you enter the hex value and in the template you read the field value and set the text color to that?

answered Jan 21 '20 at 20:14

PresidentNick

98
11

I dont get you what you mean, can please show me an example? – Jan 22 '20 at 15:01
in your models.py: class MyModel(): text_color = blocks.CharBlock(help_text="Enter the hex value of the color you want the text to be") text = blocks.RichTextBlock() and in the html:
{{value.text}}
syntax may be a bit off, but take a look at the documentation to verify. – PresidentNick Jan 25 '20 at 00:44

score 0 · Answer 2 · answered Aug 02 '23 at 19:41

There is a ticket open for this feature in Wagtail here. If you want a color chooser text block, you can go with this package for now until it becomes a core feature. This will create a text field with a color picker, with validations. You can do it like this:

from wagtail_color_panel.blocks import NativeColorBlock

class YourBlock(StructBlock):
    textColor = NativeColorBlock(help_text="Provide a text color")

Wagtail RichTextBlock extend to pick color

2 Answers2