How to Add a Class to a Tag in Rich Text?

Questions
#1

For example, I would like this to be output this with the rich text field:

<h2 class="marginBottomNone">This Heading Has No Bottom Margin</h2>
<p>This is a Strap Line Related to the H2 Above</p>

The above happens frequently in our content and I’m trying to figure out how to output it with Storyblok. And, there are lots of other cases where we need to add a class directly to a tag.

I can add a span with a class inside the h2 using the: Rich Text | Edit Field | CSS Class Options
But, that adds a span inside the h2 and not to the h2 itself.

1 Like
#2

Hello Ed,

which rich-text renderer are you using for the content?

#3

Hello Hannes, I’m using the richTextResolver from the JavaScript SDK.

#4

My colleague has taken a look at the issue and written a comment on Github:

#5

Thanks Hannes, these are two separate questions though.
What I am asking here is:

  • For content added by Rich Text, is there a way to add a CSS class to a tag instead of adding a nested span tag and adding the class to that?

For example, if I add a class to a paragraph in the rich text editor (Rich Text | Edit Field | CSS Class Options), the output looks like:

Hello World!


But, the desired result is:

Hello World!

I need this in order to apply margins directly to the paragraph tag.

#6

I’m sorry Ed. I was a little bit too fast with the answer :sweat_smile:

My colleague made an example that shows how to provide your own schema for the rich-text resolver which allows you to do what you want:

I wish you an awesome weekend!

Best
Hannes

1 Like
#7

Thanks Hannes and Alexander, that worked perfectly!

1 Like