TinyMCE Rich Text Editor

8.4.0 · active · verified Sun Apr 19

TinyMCE is a powerful, open-source JavaScript HTML WYSIWYG editor control that enables rich text editing capabilities directly within web applications. As of April 2026, the current stable version is 8.4.0, with TinyMCE 8 being the recommended branch for continued security updates and active development. The library maintains a consistent release cadence, frequently pushing updates and patches. TinyMCE differentiates itself as one of the most widely used and customizable editors globally, boasting over 350 million downloads annually and powering millions of products. It offers an extensive API with over 400 options, more than 50 plugins, and support for three distinct editing modes: classic, inline, and distraction-free. Its flexibility allows developers to configure the UI and functionality to match specific application needs, from simple text areas to complex document editors. TinyMCE is known for its scalability and enterprise-grade features, making it a robust choice for projects requiring advanced content creation and management tools. It provides integrations for popular frameworks like React, Vue, and Angular via dedicated wrapper packages.

Common errors

```
tinymce is not defined
```
cause The TinyMCE script was not loaded, or the `tinymce` object was accessed before the script finished loading or before it was properly imported in an npm context.

fix If using a script tag, ensure it's loaded before your initialization code, preferably at the end of `<body>` or using `defer`. If using npm, ensure `import tinymce from 'tinymce';` is at the top of your module and that `tinymce.init` is called after the DOM is ready (e.g., inside `DOMContentLoaded` event listener).
```
Failed to load plugin: [plugin_name]
```
cause The specified plugin file could not be found or loaded. This often happens due to incorrect paths for self-hosted assets or missing imports in a bundled environment.

fix Verify that the plugin file exists at the expected path. If self-hosting, check `plugins` array in `tinymce.init` and ensure asset paths are correct. If bundling with npm, confirm the `import 'tinymce/plugins/[plugin_name]';` statement is present.
```
The API key is invalid or not registered for this domain.
```
cause The TinyMCE cloud API key provided is either incorrect, expired, or not authorized for the domain where the editor is being used.

fix Log in to tiny.cloud, verify your API key, and ensure your domain is correctly registered for that key. Update your `api_key` in `tinymce.init` or the CDN script URL if necessary.
```
TypeError: Cannot read properties of null (reading 'hasChildNodes')
```
cause This can occur when the `selector` provided to `tinymce.init` does not match any existing DOM element, or the element is not yet available when `init` is called.

fix Ensure that the HTML element specified by `selector` (e.g., '#mytextarea') exists in the DOM and is fully rendered before `tinymce.init()` is invoked. Wrap initialization in `document.addEventListener('DOMContentLoaded', ...)` or ensure it runs after the target element is present.

Warnings

breaking Older versions of TinyMCE (pre-v8) are no longer receiving security updates or active maintenance. It is strongly recommended to upgrade to TinyMCE 8 to ensure access to critical security patches and ongoing support.
Fix: Review the official TinyMCE 8 migration guides and upgrade your project dependencies. Be aware of potential API changes and necessary configuration adjustments.
gotcha When deploying TinyMCE via their cloud service, an API key is mandatory. Without a valid API key, the editor will display a 'The API key is invalid' message or function with limitations.
Fix: Register for a free or paid API key at tiny.cloud and include it in your `tinymce.init` configuration (`api_key: 'YOUR_API_KEY'`) or ensure it's provided via the CDN URL.
gotcha Self-hosting TinyMCE requires careful management of asset paths (themes, skins, plugins, icons). Incorrect paths can lead to missing UI elements, non-functional plugins, or a broken editor interface.
Fix: Ensure all necessary assets are copied to your web server and that the `tinymce.init` configuration correctly specifies `skin_url`, `content_css`, and other relevant path options. When using npm, ensure your bundler (e.g., Webpack, Vite) is configured to handle asset imports and copying.
gotcha Performance can degrade with very large HTML content, numerous complex plugins, or highly customized UI components. This can manifest as slow initialization or sluggish editing experience.
Fix: Optimize editor initialization by loading only necessary plugins, using a debounced input handler for large content, and considering lazy loading or chunking for extremely large documents if applicable.
gotcha While TinyMCE is open-source, certain advanced features or plugins are designated as 'premium' and require a paid license. Attempting to use these features without a valid license may result in watermarks, reduced functionality, or legal compliance issues.
Fix: Review the TinyMCE feature matrix and licensing terms on tiny.cloud to understand which features are included in the open-source version and which require a subscription. Ensure your usage aligns with your licensing.

Install

npm install tinymce npm
yarn add tinymce yarn
pnpm add tinymce pnpm

Imports

tinymce
wrong:
```
const tinymce = require('tinymce');
```
correct:
```
import tinymce from 'tinymce';
```
Primary import for modern ESM-compatible projects. While CommonJS `require` might work in some environments, it's generally discouraged for new development targeting bundlers.
tinymce.init
wrong:
```
init({ /* settings */ });
```
correct:
```
tinymce.init({ /* settings */ });
```
The `init` method is the core function for initializing an editor instance and is a property of the imported `tinymce` object. It should not be called globally unless TinyMCE is loaded as a global script.
EditorOptions (TypeScript)
wrong:
```
import { EditorOptions } from 'tinymce';
```
correct:
```
import type { EditorOptions } from 'tinymce';
```
For type-only imports in TypeScript, use `import type` to ensure they are stripped from the JavaScript output, preventing accidental runtime imports.
Specific plugins/themes/icons
wrong:
```
tinymce.PluginManager.require('link');
```
correct:
```
import 'tinymce/themes/silver';
import 'tinymce/plugins/link';
```
When using TinyMCE via npm, plugins, themes, and icons are typically imported directly to be included in the bundle, rather than being dynamically loaded at runtime (though dynamic loading is also an option).

Quickstart

This quickstart demonstrates how to initialize TinyMCE in a web application using npm imports for the core, themes, and common plugins, setting up a basic editor on a dynamically created textarea. It includes typical toolbar and menubar configurations.

import tinymce from 'tinymce';
import 'tinymce/themes/silver';
import 'tinymce/icons/default';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/code';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/media';
import 'tinymce/plugins/table';
import 'tinymce/plugins/help';
import 'tinymce/plugins/wordcount';

// Ensure the DOM is fully loaded before initializing TinyMCE
document.addEventListener('DOMContentLoaded', () => {
  const textarea = document.createElement('textarea');
  textarea.id = 'mytextarea';
  textarea.value = '<p>Hello, <strong>TinyMCE</strong>!</p>';
  document.body.appendChild(textarea);

  tinymce.init({
    selector: '#mytextarea',
    plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table help wordcount',
    toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help',
    menubar: 'file edit view insert format tools table help',
    height: 500,
    // Replace process.env.TINYMCE_API_KEY with your actual TinyMCE cloud API key for cloud deployments
    // For self-hosted, this setting is not required unless using specific cloud services.
    // If using the cloud CDN, ensure to load the script <script src="https://cdn.tiny.cloud/1/{YOUR_API_KEY}/tinymce/8/tinymce.min.js"></script>
    // and provide the key here: api_key: process.env.TINYMCE_API_KEY ?? ''
  });
});

view raw JSON →