draftail | 📝🍸 A configurable rich text editor built with Draft.js | Editor library

This is possible, but it requires jumping through many hoops in Wagtail. The h1…h6 tags work like this out of the box because they are block-level formatting – each block within the editor can only be of one type. Here you’re creating this RED_TEXT formatting as inline formatting ("inline style"), which, intentionally supports multiple formats being applied to the same text.

If you want to achieve this mutually exclusive implementation anyway – you’ll need to write custom JS code to auto-magically remove the desired styles from the text when attempting to add a new style.

Here is a function that does just that. It goes through all of the characters in the user’s selection, and removes the relevant styles from them:

to get What you want, easiest way is to create your own Template tags filters, create your own markdown replacements, let's say, in the rich text you assigned the link to part of your paragraph like this "Click here this is a hidden text" and then you put [ht] right before the "this is a hidden text" and a[th] right after that targeted hidden text,then in the template use self.field_name|replace:"[ht]"|replace:"[th]"

in template tag file (for example myapp/templatetags/my_richtext.py):

I found what was causing the issue.

I was using a rendition image to fetch the id:

This doesn't work because p class="has-dropcap" is not a valid HTML tag name. Injecting an attribute via the tag name might work as an unofficial hack in some places because those particular internals of Wagtail work by piecing together HTML strings, but other parts of Wagtail code (such as the Draftail editor) use the Javascript DOM API where tag names and attributes are completely distinct concepts.

I don't know if there's a workaround, but in any case, I wouldn't advise implementing dropcaps in this way. The whole point of a CMS like Wagtail is to separate content from presentation: if a user writing website content is making decisions about typography while writing it, then something has gone wrong in that process.

If your site design calls for the first paragraph of the body text to have a dropcap, then your CSS should represent that design choice, using a rule such as .body p:first, rather than a manually-applied class name.

The problem is that Wagtail's parser is not tolerant of badly formed HTML, and the HTML you've imported from Drupal is badly formed (e.g., it includes unclosed tags). It's a little annoying that the Wagtail editor breaks with this because you have no way to fix the content from the editor.

What I've ended up doing in the past is fixing the bad HTML in the shell, using an HTML parser like Beautiful Soup. Something along these lines:

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?