# TinyMCE — Feature-Rich WYSIWYG Editor for Any Framework

> A widely adopted rich text editor with a plugin ecosystem covering tables, media, spell check, and more, with integrations for React, Vue, Angular, and vanilla JavaScript.

## Install

Save as a script file and run:

# TinyMCE — Feature-Rich WYSIWYG Editor for Any Framework

## Quick Use
```bash
npm install tinymce
```
```javascript
import tinymce from 'tinymce';
import 'tinymce/themes/silver';
import 'tinymce/icons/default';
tinymce.init({
  selector: '#editor',
  plugins: 'lists link image table',
  toolbar: 'undo redo | bold italic | bullist numlist | link image'
});
```

## Introduction
TinyMCE is a rich text editor that has powered content editing on the web for over two decades. It provides a familiar word-processor interface with a deep plugin system, making it suitable for CMS platforms, email composers, documentation tools, and any application that needs structured HTML authoring.

## What TinyMCE Does
- Renders a configurable WYSIWYG toolbar for formatting text, inserting media, and managing tables
- Provides 50+ official plugins for features like spell check, code view, autosave, and image editing
- Outputs clean, semantic HTML that can be stored and rendered predictably
- Supports content templates, merge tags, and variable insertion for dynamic documents
- Handles paste sanitization to strip unwanted formatting from Word and Google Docs

## Architecture Overview
TinyMCE is built around an editor core that manages a contentEditable iframe or inline element. The core exposes a command and query API for formatting operations. Plugins register themselves with the editor instance and can add toolbar buttons, menu items, dialogs, and content transformations. The Silver theme provides the default UI chrome, and a skinning system allows visual customization via CSS variables.

## Self-Hosting & Configuration
- Install via npm and import the core, theme, icons, and desired plugins
- Alternatively, load from the Tiny Cloud CDN with an API key for automatic updates
- Configure toolbar layout, menu structure, and plugin list in the init options
- Customize the look with the built-in skin builder or by overriding CSS variables
- Set `content_css` to apply your application styles inside the editor

## Key Features
- Extensive plugin ecosystem with 50+ official plugins
- Real-time collaboration plugin for simultaneous multi-user editing
- Accessibility compliance with WAI-ARIA roles and keyboard navigation
- PowerPaste plugin for clean paste from Microsoft Word, Excel, and Google Docs
- Inline and classic (iframe) editing modes

## Comparison with Similar Tools
- **Quill** — lighter and more developer-oriented; TinyMCE offers more built-in features and a plugin marketplace
- **CKEditor 5** — modern rewrite with similar scope; TinyMCE has a longer track record and broader CMS adoption
- **ProseMirror** — low-level toolkit for building custom editors; TinyMCE is a ready-to-use solution
- **Froala** — lightweight commercial editor; TinyMCE has a larger open-source community
- **Tiptap** — headless and modern; TinyMCE provides a complete UI out of the box

## FAQ
**Q: Is TinyMCE open source?**
A: The core editor is MIT-licensed. Some premium plugins and the cloud service require a commercial subscription.

**Q: Can I self-host TinyMCE?**
A: Yes. Install from npm and bundle with your application. No external service is needed for the core and open-source plugins.

**Q: How do I integrate TinyMCE with React?**
A: Use the official `@tinymce/tinymce-react` package, which provides a controlled React component.

**Q: Does TinyMCE support Markdown?**
A: Not natively, but community plugins exist for Markdown input and output conversion.

## Sources
- https://github.com/tinymce/tinymce
- https://www.tiny.cloud/docs/

---
Source: https://tokrepo.com/en/workflows/850e1f19-4361-11f1-9bc6-00163e2b0d79
Author: Script Depot