Display TinyMCE Content in React

Question

As per title, what I'm trying to achieve is to display the Wysiwyg content from the Editor to another component.

I created a sample on codesandbox here: https://codesandbox.io/s/boring-tharp-zwflu

As you can see, the editor works fine and is returning the values as it should.

My issue here is I'm not able to convert that String I get returned, into JSX tags.

I did a deep search, but couldn't find anything related.

Thank you in advance for your time and help!

Anhydrous

i need answer too, wasted my whole day searching for this – Venator

Answer 1

You have to install npm i react-html-parser import it to your component import ReactHtmlParser from "react-html-parser";"; and render it

<div className="wysiwyg">
{ReactHtmlParser(wysiwyg)}
</div>

Brendonbrenk

Hi Anna, at the end I've been able to find the solution (which you can see on the other answer) - But thank you anyway for the help :) – Anhydrous

Answer 2

I actually found the solution at the end, sorry for not having updated it already!

Here the answer I got from TinyMCE for this issue: https://github.com/tinymce/tinymce-react/issues/138

So, you should use directly a parser, in this case react-html-parser will do the job.

I created another codesandbox so you can directly have a look at the working copy: https://codesandbox.io/s/crazy-greider-dl2mv

Hope that help!

Anhydrous

Answer 3

Actually on 2023-10-02 is not working correctly something is with dependencies (last relies is 6 years ago) so anyone who read this use html-react-parser instead.

Here is the dependency problem with react-html-parser discussed and found soulution Unable to resolve dependency for installing html-parser

Jennijennica