How to render CKeditor's rich text from a CMS into a Next.js app?

Question

I'm currently using :

<div dangerouslySetInnerHTML={{ __html: article.content }}></div>

in order to render the rich text I get from a CKEditor input field from a Strapi CMS backend. Is there a better way to do this that doesn't use dangerouslySetInnerHTML? I've looked into ReactMarkdown, but that seems to only work with Strapi's built-in old Markdown editor.

score 1 · Answer 1 · answered Jul 19 '22 at 11:38

1

Use html-react-parser library to have more control. You will be able to change dom elements, attributes, classes,...

answered Jul 19 '22 at 11:38

Mojtaba Beheshti

121
2
4

score 0 · Answer 2 · answered Feb 06 '22 at 09:36

0

In our project we are using dangerouslySetInnerHTML as well.

answered Feb 06 '22 at 09:36

Ruslan Korkin

3,973
1
27
23

with dangerouslySetInnerHTML you loose the optimisation of Image tag porvided by NextJs even the Link features. that's why he does not want to use dangerouslySetInnerHTML – Moussaabmma Apr 09 '23 at 21:36

How to render CKeditor's rich text from a CMS into a Next.js app?

2 Answers2