@tinymce/tinymce-react

What is @tinymce/tinymce-react?

@tinymce/tinymce-react is a React component for TinyMCE, a popular WYSIWYG (What You See Is What You Get) editor. It allows developers to integrate the TinyMCE editor into their React applications easily, providing a rich text editing experience with a wide range of features and customization options.

What are @tinymce/tinymce-react's main functionalities?

Basic Integration

This code demonstrates how to integrate the TinyMCE editor into a React application with basic configuration. The editor is initialized with some default content and a set of plugins and toolbar options.

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

function App() {
  return (
    <Editor
      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'
      }}
    />
  );
}

export default App;

Handling Editor Events

This code shows how to handle events from the TinyMCE editor. The `handleEditorChange` function logs the updated content to the console whenever the content of the editor changes.

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

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

  return (
    <Editor
      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 App;

Customizing the Toolbar

This code demonstrates how to customize the toolbar in the TinyMCE editor. A custom button is added to the toolbar, which shows an alert when clicked.

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

function App() {
  return (
    <Editor
      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:
          'myCustomToolbarButton | undo redo | formatselect | bold italic backcolor | \
          alignleft aligncenter alignright alignjustify | \
          bullist numlist outdent indent | removeformat | help',
        setup: (editor) => {
          editor.ui.registry.addButton('myCustomToolbarButton', {
            text: 'My Button',
            onAction: () => alert('Button clicked!')
          });
        }
      }}
    />
  );
}

export default App;

Other packages similar to @tinymce/tinymce-react

react-quill

React-Quill is a React component for Quill, a powerful, rich text editor. It offers a similar WYSIWYG editing experience and is known for its simplicity and ease of use. Compared to @tinymce/tinymce-react, React-Quill has fewer built-in plugins but is highly customizable through its API.

draft-js

Draft.js is a framework for building rich text editors in React, developed by Facebook. It provides a lot of flexibility and control over the editor's behavior and appearance. Unlike @tinymce/tinymce-react, Draft.js is more of a low-level tool, requiring more setup and configuration to achieve similar functionality.

ckeditor4-react

CKEditor 4 React is a React component for CKEditor 4, another popular WYSIWYG editor. It offers a wide range of features and plugins similar to TinyMCE. CKEditor 4 is known for its robust feature set and extensive documentation, making it a strong alternative to @tinymce/tinymce-react.

README

Official TinyMCE React component

About

This package is a thin wrapper around tinymce to make it easier to use in a React application.

For some quick demos, check out the storybook.

Installation

$ npm install @tinymce/tinymce-react

Loading TinyMCE

Auto-loading from TinyMCE Cloud

The Editor component needs TinyMCE to be globally available to work, but to make it as easy as possible it will automatically load TinyMCE Cloud if it can't find TinyMCE available when the component is mounting. To get rid of the This domain is not registered... warning, sign up for the cloud and enter the api key like this:

<Editor apiKey='YOUR_API_KEY' init={{ /* your other settings */ }} />

You can also define what cloud channel you want to use out these three

• stable Default. The most stable and well tested version that has passed the Ephox quality assurance process.
• testing This channel will deploy the current candidate for release to the stable channel.
• dev The cutting edge version of TinyMCE updated daily for the daring users.

So using the dev channel would look like this:

<Editor apiKey='YOUR_API_KEY' cloudChannel='dev' init={{ /* your other settings */ }} />

For more info on the different versions see the documentation.

Loading TinyMCE by yourself

To opt out of using TinyMCE cloud you have to make TinyMCE globally available yourself. This can be done either by hosting the tinymce.min.js file by youself and adding a script tag to you HTML or, if you are using a module loader, installing TinyMCE with npm. For info on how to get TinyMCE working with module loaders check out this page in the documentation.

Documentation

Can be found on TinyMCE.com.

Changelog

2.1.0 - 2017-12-18

Added

• Added auto-loading of TinyMCE from TinyMCE Cloud