In react, we have different options for implementing rich text editors in our Rect application. In this tutorial, we will learn React TinyMCE implementation with an example. The rich text editor is widely used to create form posts, comments, messaging applications, blogs, and more.
The rich editor provides all tools need for a rich text editor, and it provides a clean user experience. Allows the user to use a wide variety of tools to edit and format rich content and returns valid HTML markup content. It also allows users to insert a to-do list, list, video, Youtube, images, links, tables, and more.
In this article, we’ll learn how to integrate TinyMCE in React application, and how we get data and reset tinymce editor using useRef. Let’s get started.
Setting up and configuring React TinyMCE project
Let’s first create react project and install the @tinymce/tinymce-react library in React project.
npx create react-tinymce
npm i @tinymce/tinymce-reactThis package is a thin wrapper around TinyMCE to make it easier to use in a React application. Once we install a library, we need to install the API of tinyMCE from https://www.tiny.cloud/ and we also need the API. Without API this library will show an alert message asking for API.
Once you had API, you have to paste the API code in the src/index.html file as follows.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<script
src="https://cdn.tiny.cloud/1/yourAPI/tinymce/6/tinymce.min.js"
referrerpolicy="origin"
></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>Tinymce react example basic
Here is our screenshot of React TinyMCE example, in our App.js we have to import Editor from @tinymce/tinymce-react. TinyMCE gives us total control over your rich text editing.
import React, { useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";
import "./App.css";
function App() {
const editorRef = useRef(null);
return (
<>
<Editor onInit={(event, editor) => editorRef.current = editor }/>
</>
);
}
export default App;React integrate and allows us to implement TinyMCE as React component, using the JSX tag with the Editor name.
We can use the useRef hook, to get a reference to the TinyMCE Editor component, and once we have a reference we can get content from an editor, and also clear TinyMCE clear content. Let’s demonstrate get and react clear TinyMCE content.
In this example, we have two buttons, 1st button calls the function to get content from React TinyMCE component, and the second button call function to clear content of React TinyMCE content.
import React, { useRef, useState } from "react";
import { Editor } from "@tinymce/tinymce-react";
import "./App.css";
function App() {
const editorRef = useRef(null);
const [content, setContent] = useState();
const handleGetContent = () => {
if (editorRef.current) {
setContent(editorRef.current.getContent());
}
};
const handleClearContent = () => {
editorRef.current.setContent("");
};
return (
<>
<Editor
onInit={(event, editor) => (editorRef.current = editor)}
init={{ height: 400 }}
/>
<button onClick={handleGetContent}>Get editor content</button>
<button onClick={handleClearContent}>Clear editor content</button>
<div>
Content of tinymce : <span dangerouslySetInnerHTML={{__html: content}} />
</div>
</>
);
}
export default App;Tinymce react example 2 with more configuration
Tinymce we can configure the Tinymce Editor component, like adding initial value, setting height, plugins, and more. Here is an example to add more configuration options.
import React, { useRef, useState } from "react";
import { Editor } from "@tinymce/tinymce-react";
import "./App.css";
function App() {
const editorRef = useRef(null);
const [content, setContent] = useState();
const handleGetContent = () => {
if (editorRef.current) {
setContent(editorRef.current.getContent());
}
};
const handleClearContent = () => {
editorRef.current.setContent("");
};
return (
<>
<Editor
onInit={(evt, editor) => (editorRef.current = editor)}
initialValue="<p>This is the initial content of the editor.</p>"
init={{
height: 500,
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",
content_style:
"body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
}}
/>
<button onClick={handleGetContent}>Get editor content</button>
<button onClick={handleClearContent}>Clear editor content</button>
<div>
Content of tinymce :
<span dangerouslySetInnerHTML={{ __html: content }} />
</div>
</>
);
}
export default App;Conclusion
We have explored and learned how to add and configure TinyMCE in React with examples. I hope this article will give you some idea about how to use a rich text editor like tinyMCE in your project.
Related Articles
- When and how to use React Context API in react 18?
- React router navigates outside components.
- How to implement React routing using react-router-dom?
- What is react-redux – an example in React?