How to integrate TinyMCE into a React.js App

When it comes to choosing the best text editor for our application, TinyMCE is one of the top rich text editors in the market!

It is trusted by millions of developers around the world and its weekly downloads are over 470K. TinyMCE is being updated regularly and without a doubt, it is the most popular text editor. The official website of TinyMCE is: www.tiny.cloud

TinyMCE supports popular javascript libraries and frameworks such as Angular, Vuejs, and Reactjs.

Angular Documentation:

https://github.com/tinymce/tinymce-angular

VueJS Documentation:

https://github.com/tinymce/tinymce-vue

ReactJS Documentation:

https://github.com/tinymce/tinymce-react

TinyMCE can be installed using the following commands:

$ npm install --save @tinymce/tinymce-react

or

$ yarn add @tinymce/tinymce-react

We can use TinyMCE in 2 different ways:

Cloud-based and Self-Hosted.

If we are going to use TinyMCE on the cloud, we have to mention "apiKey". The default behavior of TinyMCE is on Cloud. But if we want to use it as self-hosted, we should specify the following props for the Editor component:

<Editor tinymceScriptSrc={process.env.PUBLIC_URL + '/tinymce/tinymce.min.js'}>

Configuration of editor source:

*apiKey:

The Tiny Cloud API key. When loading from Tiny Cloud, use this prop to remove the “This domain is not registered…” warning message.

*cloudChannel:

The channel of TinyMCE used when loading from Tiny Cloud.

*scriptLoading:

The script loading behavior prop. Allows setting of the async and defer attributes and adding an additional delay in milliseconds.

*tinymceScriptSrc:

WHEN LOADING A SELF-HOSTED VERSION OF TINYMCE, the URL to use for sourcing?TinyMCE.

Configuring the editor settings:

*init:

Additional options passed to TinyMCE when it is initialized.

*plugins:

Specify the editor plugins. This will be combined with plugins in the init prop.

*toolbar:

Specify the editor toolbar. This will override the toolbar in the init prop.

Other settings:

*disabled:

Should the editor be in read-only mode.

*initialValue:

The starting value of the editor. Changing this value after the editor has loaded will reset the editor (including the editor content).

*onBeforeAddUndo:

An event handler for notifying when the editor is about to create an undo level, and preventing it if required. This is important for controlled components that restrict the allowed values of the editor.

*onEditorChange:

An event handler for detecting editor changes. Useful when implementing TinyMCE as a controlled component.

*onInit:

An event handler for notifying when the editor has initialized. Useful for getting the initial value of the editor or obtaining a reference to the editor that can be used for an uncontrolled component.

*value:

Sets and enforces the value of the editor. Only used for a controlled component.

Download TinyMCE:

https://www.tiny.cloud/get-tiny/

React Integration:

https://www.tiny.cloud/docs/integrations/react/

#tiny_mce #rich_text_editor #reactjs #angular #vuejs