Integrating Tiny MCE Editor with React: A Step-by-Step Guide

Introduction

In today’s web development landscape, providing users with seamless text editing experiences is crucial. This guide will simplify the process of integrating TinyMCE, a powerful WYSIWYG text editor, with React. Whether you’re a React pro or a beginner, this guide will empower you to enhance text editing capabilities in your React applications. Let’s begin!

What Is TinyMCE?

TinyMCE is a widely-used, open-source, and feature-rich WYSIWYG (What You See Is What You Get) text editor. It empowers developers and content creators to seamlessly add text and content editing capabilities to web applications. If you wanna know more about this visit tiny.cloud

Setting Up Your React Vite Project

Before integrating TinyMCE with React, you need a React project in place. We’ll use Vite, a fast build tool that pairs excellently with React, for this setup. If you already have a React Vite project, feel free to skip this step.

Follow these steps to create a new React Vite project:

1. Install Node.js and npm:

If you haven’t already, download and install Node.js from nodejs.org. This will also install npm, the Node.js package manager.

2. Create a New React Vite Project:

• Open your terminal or command prompt.
• Run the following command to create a new React Vite project:

npm init vite@latest my-react-app -- --template react

Replace my-react-app with your preferred project name.

3. Navigate to Your Project Directory:

Change your working directory to your newly created project folder:

cd my-react-app

4. Verify Your Setup:

Open your web browser and navigate to http://localhost:5173. You should see your React Vite project running.

With your React Vite project set up and running, you’re ready to proceed with the integration of TinyMCE into your React application.

Integrating TinyMCE

Now, we are gonna integrate tinyMCE editor with our project.

follow these steps :

1. Install TinyMCE package :

there is a npm package for react called tinymce- react

npm i @tinymce/tinymce-react

2.Import TinyMCE into your project:

// App.jsx
import { } from "react";
import { Editor } from "@tinymce/tinymce-react";

function App() {
  return (
    <>
       <Editor />
    </>
  )
}

export default App

Now you can see like this,

Where you can see a warning “domain is not registered”. To remove the warning, we need to pass the API key on tinyMCE component.

3. Setup API key:

1. If you don’t yet have a Tiny Cloud API key, get a free API key now.
2. View your API key on your account dashboard.

3. Copy your API key directly from your dashboard and insert it into your code wherever TinyMCE is being loaded

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

function App() {
  return (
    <>
       <Editor 
             apiKey={api key} // your api key
       />
    </>
  )
}

export default App

We successfully inserted the API key, now we can’t see the warning anymore.

Now, let’s get hands-on and dive into setting values on state,

we need two states, one to manage the plain text content and another to handle the HTML values within a TinyMCE editor and a function to handle editor inputs.

const [value, setValue] = useState("");
const [text, setText] = useState("");

const onEditorInputChange = (newValue, editor) => {
     setValue(newValue);
    setText(editor.getContent({ format: "text" }));
}

• newValue: This argument represents the new value or content of the editor after a change has occurred. It typically contains the updated text or content that the user has input into the editor.
• editor: This argument is a reference to the editor component itself. It allows you to interact with the editor's properties and methods, such as getting the current selection, setting editor options, or performing other operations related to the editor.
• setText(editor.getContent({ format: "text" })): This line of code retrieves the content of the editor using the getContent method of the editor object. It specifies the format as "text," which likely means that it's extracting the content as plain text. The extracted text is then stored in a variable or state named text.

<Editor
    apiKey={API_KEY} // your api key here
    onEditorChange={(newValue, editor) => onEditorInputChange(newValue, editor)}
    onInit={(evt, editor) => setText(editor.getContent({ format: "text" }))}
    value={value}
    initialValue={'Write your thoughts here...'}
/>

• This is an event handler for the onEditorChange event, which is triggered when there's a change in the content of the editor.
• This is an event handler for the onInit event, which is typically triggered when the editor component is initialized or created.
• value={value}: This is likely used to bind the editor's content to the value state.
• initialValue: This is the initial content or placeholder text that is displayed in the editor when it is first loaded or initialized. Users can replace this text with their own input.

Plugins and Toolbars

TinyMCE has 37 core toolbar plugins. These plugins can extend default editor functionality or add new functionality. For example, the Advanced List plugin adds extra options to the toolbar’s existing list controls, while the Code plugin adds entirely new functionality.

There are two category of plugins premium and free. If you don’t have premium pass you can use free plugins. You can find the plugins list at Tiny mce plugins.

Let’s create a folder named ‘constants’ and files named ‘toolbar.js’ and ‘plugins.js’

Let’s set the available toolbars and plugins here,

// plugins.js
export const plugins = `
fullscreen 
image
editimage
accordion
footnotes
lists
advlist
anchor
autolink
code
codesample 
emoticons 
importcss 
insertdatetime 
link
lists 
media 
nonbreaking 
pagebreak 
preview 
table 
searchreplace 
template  
wordcount 
visualchars`;

// toolbars.js
export const toolbars = `
undo redo |
blocks | 
bold italic | 
alignleft aligncenter alignright alignjustify | 
bullist numlist outdent indent |
help`;

Import these files into the editor page and configure them.

import { plugins } from "../../constants/plugins";
import { toolbars } from "../../constants/toolbars";

<Editor
    apiKey={API_KEY} // your api key here
    onEditorChange={(newValue, editor) => onEditorInputChange(newValue, editor)}
    onInit={(evt, editor) => setText(editor.getContent({ format: "text" }))}
    value={value}
    initialValue={'Write your thoughts here...'}
    init={{
        plugins: plugins,
        toolbar: toolbars
    }}
/>

You can view the source code TinyMCE-Editor-with-React-JS

That’s all ! 😃

If you got something from this post please clap and leave your doubts on comments. see you on next blog.