React WYSIWYG editor with Material UI components support

user_2625058 0
Viewed 6072

So I'm building a dashboard that allows clients to write some text with a WYSIWYG editor and publish it so it is available in an online reader.

Previously, I integrated TinyMCE as my text editor and it works well. It generates HTML from the text and formatting the user inputs. Now, I need to allow clients to be able to add some Material-UI components such as an ExpansionPanel to their content (by maybe clicking a button in the text editor toolbar).

I stumbled upon mui-rte that allows adding custom components the way I want but it appears to only generate a draft-js format which I'm unfamiliar with and will not be backwards compatible with HTML strings that have already been generated by clients.

My question is, how do I generate an HTML string in the format below with a WYSIWYG editor 

<div>
 <h1>this is some text</h1>
 <ExpansionPanel></ExpansionPanel>
</div>
reactjs tinymce wysiwyg html javascript
1 Answers

there is a module called draftjs-to-html. In order to get html from wysiwyg editor you could write something like this.

import draftToHtml from 'draftjs-to-html';

console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())));

convertToRaw comes from draft-js editorState.getCurrentContent() comes from state change event in the editor which is documented in wysiwyg documentation.

user_163308290
Related