Integrate TinyMCE with Next.js and Handle Image Click Events in TypeScript

Introduction

Rich text editors are essential for creating and editing content in modern web applications. TinyMCE is a popular choice due to its flexibility and extensive plugin support. In this blog post, we will explore how to integrate TinyMCE with a Next.js application using TypeScript and handle image click events within the editor.

Prerequisites

Before we start, ensure you have the following:

A Next.js application set up. If not, you can create one using:

npx create-next-app@latest my-next-app --typescript
cd my-next-app

Node.js and npm installed on your machine.

Step 1: Install TinyMCE

First, you need to install TinyMCE and its React integration package:

npm install tinymce @tinymce/tinymce-react

Step 2: Set Up the TinyMCE Editor with TypeScript

Create a new component, RichTextEditor.tsx, in your components directory. This component will contain the TinyMCE editor.

import { useRef, useEffect } from 'react';
import { Editor } from '@tinymce/tinymce-react';

const RichTextEditor: React.FC = () => {
  const editorRef = useRef<any>(null);

  const handleEditorChange = (content: string, editor: any) => {
    console.log('Content was updated:', content);
  };

  const handleImageClick = (e: any) => {
    const target = e.target;
    if (target.nodeName === 'IMG') {
      // Handle the image click event
      console.log('Image clicked:', target.src);
      // You can trigger any custom function here
    }
  };

  return (
    <Editor
      onInit={(evt, editor) => {
        editorRef.current = editor;
        editor.on('click', handleImageClick);
      }}
      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={handleEditorChange}
    />
  );
};

export default RichTextEditor;

Step 3: Integrate the Editor in Your Page

Now, let's integrate the RichTextEditor component into one of your pages, for example, /src/app/page.tsx.

import Head from 'next/head';
import RichTextEditor from '../components/RichTextEditor';

const Home: React.FC = () => {
  return (
    <div>
      <Head>
        <title>Next.js with TinyMCE</title>
        <meta name="description" content="Integrating TinyMCE with Next.js using TypeScript" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Welcome to Next.js with TinyMCE</h1>
        <RichTextEditor />
      </main>
    </div>
  );
};

export default Home;

Step 4: Handle Image Click Events

In the RichTextEditor component, we have added an event listener to handle image click events. When an image within the TinyMCE editor is clicked, the event handler function handleImageClick is triggered. This function checks if the clicked target is an image (IMG tag) and logs the image's src attribute. You can customize this function to perform any action you need, such as opening a modal or displaying image details.

Conclusion

By following these steps, you have successfully integrated TinyMCE with your Next.js application using TypeScript and added functionality to handle image click events within the editor. TinyMCE's extensive plugin support and customization options make it a powerful tool for rich text editing in web applications.

Feel free to extend this setup further by exploring more TinyMCE plugins and features to suit your application's needs.

Happy coding!

Integrating TinyMCE with Next.js and Handling Image Click Events in TypeScript