Rich Text Editor removes <h2> tags

Context

We use body fields for a blog. To make the text editing easy for non-developers we use the RichTextEditor. For semantic and SEO reasons we need the header sections of the body to have <h2> tags. Currently in the RTE it’s only possible to generate <h1> header tags. So in our backend we change the <h1> tags generated by the RTE to <h2> tags, which are then nicely displayed on the website.

Expected behavior

We expect the RTE not to change our <h2> tags when editing the field. Ideally we would like to add <h2> tags from within the RTE.

Actual behavior

When we edit the field, the RTE gets rid of the <h2> tags (turns them into <p> tags, sometimes with <strong> tags around them)… We don’t understand why the RTE does this and we don’t think it should remove tags that we explicitly added. Because we then have to re-edit the field, add header tags (<h1>), which on our backend changes them back to the <h2> tags.

Problem?

This is time consuming and frustrating for the blog editors.

Spec Context

Project name: Sylvaine
Using Rails 5.2.3 with Liana 4.1.2
Database: PostgreSQL 11.5

Hi @lepetitbelge,

Thanks for your feedback.
In order to consider this in the next iteration of this widget, let me share your insight to the product team in our Product Board.

As a workaround, an idea could be to deactivate the rich text editor widget and let your team manually manage html tags in your content. Is it something that could be accessible to your team?

Good morning @arnaud,

I appreciate your reply. If this little adaption could make it into your product board, it would be really helpful !

Yes, that’s the idea we thought of as well. However it’s not a viable option as the blog editors are not at all familiar with HTML, nor does it make sense for them to become fluent in it. Have you got any other idea for a workaround ?

Hello @lepetitbelge :wave:

Sadly, if your users are not used to html, the best workaround for this is your current one.

Having the <h1> tags translated to <h2> is the best solution so far, until we work on widgets.

We logged your feedback on our product board, and this will be tackled in the next widget topic :+1:

Sorry for the inconvenience and thanks a lot for your feedback :raised_hands:

Steve.

1 Like

Hi, I had a similar problem where I wanted to use the RTE but needed multiple heading levels.

I got around this by adding a level indicator to the heading text in the RTE.

So a heading with level 2 of “Default On” would be written as “Default On -2”.
2020-11-10_22-38-27

Rather than changing anything in the DB after the edit is saved, I edited the results on the fly when retrieved.

html.replace(/(<h1>)([^<h1>]+)-(\d)(<\/h1>)/g, "<h$3>$2</h$3>")

This creates a new heading block using the number next to the dash.

It’s not pretty, but it gets the job done :slight_smile:

It also doesn’t mess around with the actual content, so you don’t have to worry about anything being overwritten.

I also strip all the

tags and replace them with

, remove the
tags etc.

Hope that helps.

2 Likes