TinyMCE React integration quick start guide
The Official TinyMCE React component integrates TinyMCE into React projects. This procedure creates a basic React application containing a TinyMCE editor based on our Basic example.
For examples of the TinyMCE integration, visit the tinymce-react storybook.
Prerequisites
This procedure requires:
- Node.js (and npm).
- Access to
tinymce.min.js
on either:- Tiny Cloud.
- TinyMCE Self-hosted. See:
Procedure
-
On a command line or command prompt, install the Create React App package.
$ npm install -g create-react-app
-
Create a new React project named
tinymce-react-demo
.$ create-react-app tinymce-react-demo
-
Change into the newly created directory.
$ cd tinymce-react-demo
-
Install the
tinymce-react
package and save it to yourpackage.json
with--save
.$ npm install --save @tinymce/tinymce-react
-
Using a text editor, open
/path/to/tinymce-react-demo/src/App.js
and replace the contents with:import React from 'react'; import { Editor } from '@tinymce/tinymce-react'; class App extends React.Component { handleEditorChange = (content, editor) => { console.log('Content was updated:', content); } render() { return ( <Editor initialValue="<p>This is the initial content of the editor</p>" init={{ height: 500, menubar: false, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | help' }} onEditorChange={this.handleEditorChange} /> ); } } export default App;
This JavaScript file will create the class
App
containing a TinyMCE editor configured to replicate the example on the Basic example page. -
Provide access to TinyMCE using either Tiny Cloud or by self-hosting TinyMCE.
-
Tiny Cloud
Include the
apiKey
option in the editor element and include your Tiny Cloud API key.Such as:
<Editor apiKey='your-api-key' init={{ /* your other settings */ }} />
-
TinyMCE Self-hosted
TinyMCE can be self-hosted by: deploying TinyMCE independent of the React application, or bundling TinyMCE with the React application.
-
Deploy TinyMCE independent of the React application
To use an independent deployment of TinyMCE, add a script to either the
<head>
or the end of the<body>
of the HTML file, such as:<script src="/path/to/tinymce.min.js"></script>
To use an independent deployment of TinyMCE with the create a React application, add the script to
/path/to/tinymce-react-demo/public/index.html
.For information on self-hosting TinyMCE, see: Installing TinyMCE.
-
Bundling TinyMCE with the React application using a module loader
To bundle TinyMCE using a module loader (such as Webpack and Browserify), see: Usage with module loaders.
-
-
-
Test the application using the Node.js development server.
-
To start the development server, navigate to the
tinymce-react-demo
directory and run:$ npm run start
-
To stop the development server, select on the command line or command prompt and press Ctrl+C.
-
Deploying the application to a HTTP server.
The application will require further configuration before it can be deployed to a production environment. For information on configuring the application for deployment, see: Create React App - Deployment.
To deploy the application to a local HTTP Server:
-
Navigate to the
tinymce-react-demo
directory and run:$ npm run build
-
Copy the contents of the
tinymce-react-demo/build
directory to the root directory of the web server.
The application has now been deployed on the web server.
Note: Additional configuration is required to deploy the application outside the web server root directory, such as http://localhost:<port>/my_react_application.
Next Steps
- For examples of the TinyMCE integration, see: the tinymce-react storybook.
- For information on customizing:
- TinyMCE, see: Basic setup.
- The React application, see: Create React App or the React documentation.
TinyMCE React technical reference
Covered in this section:
- Installing the TinyMCE React integration using the NPM
- Using the TinyMCE React component as a controlled component
- Event binding
Installing the TinyMCE React integration using NPM
To install the tinymce-react
package and save it to your package.json
.
$ npm install --save @tinymce/tinymce-react
Configuring the editor
The editor accepts the following properties:
<Editor
apiKey='your-api-key'
cloudChannel='5-stable'
disabled={false}
id='uuid'
init= {{ }}
initialValue=''
inline={false}
onEditorChange={}
plugins=''
tagName='div'
textareaName=''
toolbar=''
value=''
/>
None of the configuration properties are required for tinymce-react
to work. Specify a Tiny Cloud API key using apiKey
to remove the This domain is not registered...
warning message.
apiKey
Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor.
To register for a Tiny Cloud API key, visit the sign-up page.
Default value: no-api-key
Type: String
Example: Using apiKey
<Editor
apiKey='your-api-key'
/>
cloudChannel
Default value: 5-stable
Possible values: 5-stable
, 5-testing
, 5-dev
Changes the TinyMCE build used for the editor to one of the following Tiny Cloud channels:
5-stable
(Default): The current enterprise release of TinyMCE.5-testing
: The current release candidate for the next enterprise release of TinyMCE.5-dev
: The nightly-build version of TinyMCE.
Such as:
<Editor
apiKey='your-api-key'
cloudChannel='5-dev'
init={{ /* your other settings */ }}
/>
For information TinyMCE development channels, see: Specifying the TinyMCE editor version deployed from Cloud - dev, testing, and stable releases.
disabled
The disabled
property can dynamically switch the editor between a “disabled” (read-only) mode (true
) and the standard editable mode (false
).
Default value: false
Possible values: true
, false
Example: Using disabled
<Editor
disabled={true}
/>
id
An id for the editor. Used for retrieving the editor instance using the tinymce.get('ID')
method. Defaults to an automatically generated UUID.
Default value: Automatically generated UUID.
Type: String
Example: Using id
<Editor
id='uuid'
/>
init
Object sent to the tinymce.init
method used to initialize the editor.
For information on the TinyMCE selector (tinymce.init
), see: Basic setup.
Default value: {{ }}
Type: Object
Example: Using init
<Editor
init={{
selector: 'textarea#myTextArea',
plugins: [
'lists link image paste help wordcount'
],
toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
}}
/>
initialValue
Initial content of the editor when the editor is initialized.
Default value: ' '
Type: String
Example: Using initialValue
<Editor
initialValue='Once upon a time...'
/>
inline
Used to set the editor to inline mode. Using <Editor inline={true} />
is the same as setting {inline: true}
in the TinyMCE selector (tinymce.init
).
For information on inline mode, see: User interface options - inline
and Setup inline editing mode.
Default value: false
Possible values: true
, false
Example: Using inline
<Editor
inline={true}
/>
onEditorChange
Used to store the state of the editor outside the editor React component. This property is commonly used when using the TinyMCE React component as a controlled component. Use the outputFormat
prop to specify the format of the content emitted.
For more information, see: Using the TinyMCE React component as a controlled component.
Type: EventHandler
outputFormat
Used to specify the format of the content emitted via the onEditorChange
event.
Type: String
Default value: html
Possible values: html
, text
Example: Using outputFormat
<Editor
outputFormat='text'
/>
plugins
Used to include plugins for the editor. Using <Editor plugins='lists' />
is the same as setting {plugins: 'lists'}
in the TinyMCE selector (tinymce.init
).
For information on adding plugins to TinyMCE, see: Add plugins to TinyMCE.
Type: String or Array
Example: Using plugins
<Editor
plugins='lists code'
/>
tagName
Only valid when <Editor inline={true} />
. Used to define the HTML element for the editor in inline mode.
Default value: div
Type: String
Example: Using tagName
<Editor
inline={true}
tagName='my-custom-tag'
/>
textareaName
Sets the name
attribute for the textarea
element used for the editor in forms.
Default value: ' '
Type: String
Example: Using textareaName
<Editor
textareaName='myTextArea'
/>
toolbar
Used to set the toolbar for the editor. Using <Editor toolbar='bold' />
is the same as setting {toolbar: 'bold'}
in the TinyMCE selector (tinymce.init
).
For information setting the toolbar for TinyMCE, see: User interface options - toolbar.
Possible values: See Toolbar Buttons Available for TinyMCE.
Type: String
Example: Using toolbar
<Editor
plugins='code'
toolbar='bold italic underline code'
/>
tinymceScriptSrc
Use the tinymceScriptSrc
prop to specify an external version of TinyMCE to lazy load.
Type: String
Example: Using tinymceScriptSrc
<Editor
tinymceScriptSrc='/path/to/tinymce.min.js'
/>
value
This property allows the editor to be used as a controlled component by setting the value
property and using the onEditorChange
event.
For more information, see: Using the TinyMCE React component as a controlled component.
Type: String
Using the TinyMCE React component as a controlled component
To use the editor as a controlled component, use the onEditorChange
event instead of the onChange
event, such as:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { content: '' };
this.handleEditorChange = this.handleEditorChange.bind(this);
}
handleEditorChange(content, editor) {
this.setState({ content });
}
render() {
return (
<Editor
value={this.state.content}
onEditorChange={this.handleEditorChange}
/>
)
}
}
For information on controlled components in React, see: React Docs - Controlled Components.
Event binding
Functions can be bound to editor events, such as:
<Editor onSelectionChange={this.handlerFunction} />
When the handler is called (handlerFunction in this example), it is called with two arguments:
event
- The TinyMCE event object.editor
- A reference to the editor.
The following events are available:
onActivate
onAddUndo
onBeforeAddUndo
onBeforeExecCommand
onBeforeGetContent
onBeforeRenderUI
onBeforeSetContent
onBeforePaste
onBlur
onChange
onClearUndos
onClick
onContextMenu
onCopy
onCut
onDblclick
onDeactivate
onDirty
onDrag
onDragDrop
onDragEnd
onDragGesture
onDragOver
onDrop
onExecCommand
onFocus
onFocusIn
onFocusOut
onGetContent
onHide
onInit
onKeyDown
onKeyPress
onKeyUp
onLoadContent
onMouseDown
onMouseEnter
onMouseLeave
onMouseMove
onMouseOut
onMouseOver
onMouseUp
onNodeChange
onObjectResizeStart
onObjectResized
onObjectSelected
onPaste
onPostProcess
onPostRender
onPreProcess
onProgressState
onRedo
onRemove
onReset
onSaveContent
onSelectionChange
onSetAttrib
onSetContent
onShow
onSubmit
onUndo
onVisualAid
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.