Search code examples
ckeditorgatsbystrapickeditor5

How to generate real html of ckeditor output with gatsby static site generator?


i have a api backend with strapi and i create all my content with a ckeditor there. The content should displayed in my gatsby site in real html. But I query the content with graphql and gatsby show this content only in raw html Is there a way, to transform the queried content of gatsby to real html? I couldn't find find any plugin or tool to fix this problem.


Solution

  • There's a huge lack of trials, source-code, etc. However, what you need to use is the built-in dangerouslysetinnerhtml property. You don't need any plugin at all.

    <div dangerouslySetInnerHTML={{__html: yourRetreivedData}} />
    

    Keep in mind that dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.