Clash Royale CLAN TAG#URR8PPP

Add React Component to TinyMCE Editor content

We are building an editor and we would like to use TimyMCE and React for it. We have scenarios where on an event we have to add template based content to the Editor. I am planning to design the templates as React component.

So, with TinyMCE and React, how do I add react component to the TinyMCE editor.

export class AppEditor extends React.Component<iEditorProps, iEditorState>

innerEditor: React.RefObject<Editor>;

constructor(props: iEditorProps)
super(props);
this.state =
content: ''
;
this.innerEditor = React.createRef();



handleChange = (content) =>
this.setState( content );


handleAddContent = (e) =>
this.setState(prevState =>
return content: prevState.content + <TemplateComp>Added Content</TemplateComp>
);


render()
return (
<div>
<Editor ref=this.innerEditor inline onEditorChange=this.handleChange value=this.state.content />
</div>);




In the above code at "handleAddContent" I am trying to add <TemplateComp> to the editor, but it's get's rendered as [object] [Object]. I understand string concatenation does that. TinyMCE package being used - https://github.com/tinymce/tinymce-react.

handleAddContent

<TemplateComp>

But how do I add component to editor?

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.