Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to add TinyMCE 5 to a simple React project

Simon Fjeldså

October 6th, 2019

Written by

Simon Fjeldså
Simon Fjeldså

Category

Tips & How-Tos

When using TinyMCE in your React project, you want a fast and reliable way to integrate it with your existing codebase. Thankfully, the Official TinyMCE React Component (tinymce-react) is provided to bring TinyMCE into the React world.

Creating a simple React project

We’re going to start by setting up a simple React project with the Create React App tool. By using this tool to set up the boilerplate, we’ll be able to quickly dive into what we’re all here for, namely tinymce-react! If you already have a project set up, you may skip the following steps and jump directly to the next section to install the TinyMCE React component.

To generate a new project, we’ll run the following command (assuming Node.js is already installed).

$ npx create-react-app tinymce-react-demo

NOTE: npx is a tool included with npm 5.2+ for executing packages without the need to install them. At the time of writing, the create-react-app package is version 3.2.0, but releases of create-react-app shouldn’t differ much – if you use a later version you should still be able to follow these steps.

The create-react-app will scaffold our new project and automatically install all the dependencies it requires. When it has finished, we can enter the newly-created directory, fire up the application, and open it up in a browser at the address displayed on the command line.

$ cd tinymce-react-demo
# If you use npm
$ npm run start
# If you use Yarn
$ yarn run start
The basic application running in a browser.

The project scaffolded by create-react-app uses Webpack and Babel under the hood, so there’s no need to set up any additional build tools. We can jump right into developing our app.

Installing the TinyMCE React component

To get started, we’ll need to install the tinymce-react component with our package manager of choice.

# If you use npm
$ npm install @tinymce/tinymce-react
# If you use Yarn
$ yarn add @tinymce/tinymce-react

The tinymce-react component is a wrapper around TinyMCE and thus requires TinyMCE in order to do its work. By default, the component will load TinyMCE from Tiny Cloud, which is the simplest way to get going. The only thing we need for this is an API key which anyone can get for free at tiny.cloud (including a 30 day trial of the premium plugins)! The alternative is to self-host TinyMCE, making it available together with the assets it requires.

Adding the Editor component to our project

Our React project has a file called App.js, located at tinymce-react-demo/src/App.js, which is where we’ll add the editor in this demo.

Import the Editor component from the library and add it with your desired configuration. Here we’ll add the Word Count plugin as an example, but there are many more Tiny plugins you can choose from to enhance the editor.

import React from "react";
import { Editor } from "@tinymce/tinymce-react";

function App() {
  return (
    <Editor
      apiKey="Get your free API key at tiny.cloud and paste it here"
      plugins="wordcount"
    />
  );
}

export default App;

To find out more about the configuration options available, check out the documentation.

On saving the file, TinyMCE will appear in your app. (You might have to refresh your browser.)

TinyMCE running in the application within a browser.
Word Count plugin enabled as configured.

What next?

We now have TinyMCE running in a simple React project.

Next, we’ll take TinyMCE-in-React to the next level by demonstrating how to emulate an online document editor.

Also, once you’ve grabbed your API key, check out our range of premium plugins that are helping other developers create the best content creation experience for their users.

ReactIntegration
Simon Fjeldså
bySimon Fjeldså

Simon is an Engineer at Tiny, working on an array of features such as plugins and framework integrations for TinyMCE. Powered by coffee.

Related Articles

  • Tiny logo and Vue logo combined with a plus symbol.
    Tips & How-Tos

    How to add TinyMCE 5 to a simple Vue project

    by Ben Long in Tips & How-Tos

Build beautiful content for the web with Tiny.

The rich text editing platform that helped launch Atlassian, Medium, Evernote and more.

Begin my FREE 30 day trial
Tiny Editor