Introduction:

TinyMCE editor is a text editor used to create, format, and edit content in a user-friendly, WYSIWYG (What You See Is What You Get) interface. It simplifies content management and is commonly used in various web applications for text-based tasks, including content creation, formatting, and editing. It enables users to interact with text and multimedia content effortlessly.

Next js :

Next.js is a React framework. Next.js is constitutionally an excellent tool to achieve great SEO performance. building super-fast static websites that behave dynamically. Next.js when building UI and UX there is flexibility. and the important great community support. To know more about relative links click here

Flow Diagram:

Prerequisites:

Node

Next js

Install tinyMce

Step 1: Install Nodejs

Before we create Next App we need to install node.js.

if you already installed node.js please ignore this step 1 and go to step 2

Step 2: Create a Next-app

After installing Node.js open the terminal or command prompt and create the next.js app with the following commands.

npx create-next-app tinymce_editor

Step 3: Get a TinyMCE API Key

If you don't already have one, go to the TinyMCE website and sign up for an account. You'll need to provide your email address and create a password.

After signing up, log in to your TinyMCE account using the credentials you provided.

Once logged in, you can view and copy your API key directly from the account dashboard.

Step 4: Install TinyMCE.js

After creating the Next.js app then install npm i @tinymce/tinymce-reactcommands.

npm i @tinymce/tinymce-react

Step 5: Configure tinyMce:

In /pages/index.js, write the following piece of code:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import { Editor } from '@tinymce/tinymce-react';
import { useRef } from 'react';


export default function Home() {
  const editorRef = useRef()

  return (
    <div>
      <div style={{ width: "1000px", height: '500px', marginLeft: 'auto', marginRight: "auto", marginTop: "100px" }}>
        <Editor
          id='tiny-editor'
          apiKey="YOUR_TINYMCE_API_KEY" // Replace with your API key


          onInit={(evt, editor) => editorRef.current = editor}
          initialValue={""}       // Replace with your initial content
          init={{
            table_tab_navigation: false,
            height: 500,
            menubar: true,
            branding: false,
            plugins: [
              'advlist', 'advcode', 'advtable', 'autolink', 'checklist', 'export',
              'lists', 'link', 'image', 'charmap', 'preview', 'anchor', 'searchreplace', 'visualblocks',
              'fullscreen', 'formatpainter', 'insertdatetime', 'media', 'table', 'help', 'wordcount', 'footnotes'
            ],
            toolbar: 'undo redo | casechange blocks | bold italic backcolor | footnotes | ' +
              'alignleft aligncenter alignright alignjustify | ' +
              'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help ',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
          }}
        />
      </div>
    </div>
  )
}

Sample code for the pages/index.js file can be found in the following GitHub URL.

tinymce_nextjs_integration_example/pages/index.js at main · episyche/tinymce_nextjs_integration_example (github.com)

You can run your app via CLI with the following command and view it in your browser:

npm run dev

A Sample GitHub repo, with all the required configurations, is given below.

https://github.com/episyche/tinymce_nextjs_integration_example/tree/main

Result:

After finishing all the steps mentioned above, please go to the web browser, and try to access the Next.js application (i.e. http://localhost:8000//). An example output screenshot is given below.

How to implement TinyMCE editor in next.js?