Use rich text editor without adding extra <p> tags

Developer Support CMS Development
1

Hello,

I’m currently creating a blog for one of my client. I created a blog post template with custom modules.

For the main content of the article I created a module where the users can add different style of paragraph (like full text, quote text, image left text right, etc.).

When the user picks full text, a rich text editor appears (full_text is the variable name) where he can start writting his long text.

In my HTML + HUBL it is shown like this

{% if style == "full_text" %}
 <div class="articleblock_fulltext">
 <h2 class="title">{{ item.full_text_title }}</h2>
 <p class="text">{{ item.full_text }}</p>
 </div>

{% elif style == "quote_text" %}
 <div class="block_quote">
 <p class="quote">"{{ item.quote_text }}"</p>
 </div>

{% endif %}

My issue is after the rich text editor has been used, in creates a new <p> tags inside my <p class=“text”> resulting then in the wrong design because it isn’t using the “text” class.

Is there a way to apply to automatically add the class=“text” when rich text editor is used ?

I could modify directly the <p> tag styling in the css but since some other <p> tags on the page are using different class I can’t do that.

2

Hey @ezraassj

In your case you can anticipate the output structure and handle it using css exclusively IMO. Specifically using the Child Combinator “>” or the Adjacent Sibiling Combinator

.text > p {
 /* your styles here */
}

Or remove the paragraph with the “text” class all together and work with the the paragraphs generated. It important to remember that hard returns in a rich text module generate a new paragraph tags.

.articleblock_fulltext > p {
 /* style for all p tags directly under the parent */
}

or

h2.title + p {
 /* will select the first p sibling following the h2.title */
}orh2.title ~ p { /* all Ps that are siblings of h2.title */}
3

Thanks @Kevin-C !

I went for the second solution you proposed and it works like a charm :slightly_smiling_face: