Rich content in Strapi rendering with no space between paragraphs

3.6k views Asked by At

I'm using markdown-it with nuxt to render my article content (rich text) to html from strapi. The text renders but the spacing between paragraphs is not included. I can use <br> tag on rich text editor on strapi to create line breaks but shouldn't strapi automatically do this?

 <div v-html="$md.render(articles.content || 'No content available')"></div>
2

There are 2 answers

0
Ar Striders On

I think there is a bug in strapi currently that prevents it from recording single line breaks in the rich text editor (When you press the enter-key in the rich text editor) You can use the following work arounds: In the Strapi Rich Text Editor:

  1. Double space to record line-breaks where ever you need them in the rich text editor. This will add the <br> tag. For multiple line breaks, repeat. For example:

This is First Para.(Double Space-key then press Enter-key here)This is Second Para

HTML Output:

<p>This is first Para.<br>This is Second Para</p>

  1. Press Enter "twice" to create a new Paragraph tag. This will separate the two lines as two different Paragraph elements.

This is First Para.(Double Enter-key here)This is Second Para

HTML Output:

<p>This is First Para.</p>
<p>This is Second Para</p>

0
Emmanuel Ikem On

I got the same error while using strapi and to fix this Bug for my Next app i used the code below:

<div dangerouslySetInnerHTML={{ __html: content }}