# TinyMCE Documentation - Complete Reference > The complete content of the TinyMCE 8 documentation, grouped by topic. Generated 2026-09-30T04:12:26Z. ## Overview TinyMCE is a rich text editor that provides a WYSIWYG editing experience. The latest stable version is TinyMCE 8, released in July 2025. ## Current Version Information - **Latest Stable Version**: TinyMCE 8 - **Version in CDN URLs**: Use `tinymce@8` or `tinymce/8` - **Package Installation**: Always install `tinymce@8` for new projects - **Legacy Versions**: TinyMCE 7, 6, and 5 are maintained for existing projects but new projects should use TinyMCE 8 ## Getting Started ### Quick Start Guides - **Getting Started Overview**: https://www.tiny.cloud/docs/tinymce/latest/getting-started/index.md - **Introduction to TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tinymce/index.md - **Installation Options**: https://www.tiny.cloud/docs/tinymce/latest/installation/index.md ### Cloud Deployment (Recommended) - **Cloud Quick Start**: https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start/index.md - **Cloud Deployment Guide**: https://www.tiny.cloud/docs/tinymce/latest/cloud-deployment-guide/index.md - **Editor and Features**: https://www.tiny.cloud/docs/tinymce/latest/editor-and-features/index.md - **Specify Editor Version**: https://www.tiny.cloud/docs/tinymce/latest/editor-plugin-version/index.md - **Cloud Troubleshooting**: https://www.tiny.cloud/docs/tinymce/latest/cloud-troubleshooting/index.md ### Self-Hosted Deployment - **NPM Projects Quick Start**: https://www.tiny.cloud/docs/tinymce/latest/npm-projects/index.md - **ZIP Installation Quick Start**: https://www.tiny.cloud/docs/tinymce/latest/zip-install/index.md - **Self-Hosted Installation**: https://www.tiny.cloud/docs/tinymce/latest/installation-self-hosted/index.md ## Integration Guides ### Frontend Frameworks - **React**: https://www.tiny.cloud/docs/tinymce/latest/react-cloud/index.md - Package Manager: https://www.tiny.cloud/docs/tinymce/latest/react-pm-host/index.md - ZIP: https://www.tiny.cloud/docs/tinymce/latest/react-zip-host/index.md - **Vue.js**: https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/index.md - Package Manager: https://www.tiny.cloud/docs/tinymce/latest/vue-pm/index.md - ZIP: https://www.tiny.cloud/docs/tinymce/latest/vue-zip/index.md - **Angular**: https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/index.md - Package Manager: https://www.tiny.cloud/docs/tinymce/latest/angular-pm/index.md - ZIP: https://www.tiny.cloud/docs/tinymce/latest/angular-zip/index.md - **Blazor**: https://www.tiny.cloud/docs/tinymce/latest/blazor-cloud/index.md - Package Manager: https://www.tiny.cloud/docs/tinymce/latest/blazor-pm/index.md - ZIP: https://www.tiny.cloud/docs/tinymce/latest/blazor-zip/index.md - **Svelte**: https://www.tiny.cloud/docs/tinymce/latest/svelte-cloud/index.md - Package Manager: https://www.tiny.cloud/docs/tinymce/latest/svelte-pm/index.md - ZIP: https://www.tiny.cloud/docs/tinymce/latest/svelte-zip/index.md - **Web Component**: https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/index.md - Package Manager: https://www.tiny.cloud/docs/tinymce/latest/webcomponent-pm/index.md - ZIP: https://www.tiny.cloud/docs/tinymce/latest/webcomponent-zip/index.md - **jQuery**: https://www.tiny.cloud/docs/tinymce/latest/jquery-cloud/index.md - Package Manager: https://www.tiny.cloud/docs/tinymce/latest/jquery-pm/index.md ### Backend Frameworks - **Django**: https://www.tiny.cloud/docs/tinymce/latest/django-cloud/index.md - ZIP: https://www.tiny.cloud/docs/tinymce/latest/django-zip/index.md - **Laravel**: https://www.tiny.cloud/docs/tinymce/latest/laravel-tiny-cloud/index.md - Composer: https://www.tiny.cloud/docs/tinymce/latest/laravel-composer-install/index.md - ZIP: https://www.tiny.cloud/docs/tinymce/latest/laravel-zip-install/index.md - **Ruby on Rails**: https://www.tiny.cloud/docs/tinymce/latest/rails-cloud/index.md - Package Manager: https://www.tiny.cloud/docs/tinymce/latest/rails-third-party/index.md - ZIP: https://www.tiny.cloud/docs/tinymce/latest/rails-zip/index.md - **Node.js + Express**: https://www.tiny.cloud/docs/tinymce/latest/expressjs-pm/index.md ### Other Integrations - **Bootstrap**: - Cloud: https://www.tiny.cloud/docs/tinymce/latest/bootstrap-cloud/index.md - ZIP: https://www.tiny.cloud/docs/tinymce/latest/bootstrap-zip/index.md - **PHP Projects**: https://www.tiny.cloud/docs/tinymce/latest/php-projects/index.md - **.NET Projects**: https://www.tiny.cloud/docs/tinymce/latest/dotnet-projects/index.md - **WordPress**: https://www.tiny.cloud/docs/tinymce/latest/wordpress/index.md - **Shadow DOM**: https://www.tiny.cloud/docs/tinymce/latest/shadow-dom/index.md - **Java Swing**: https://www.tiny.cloud/docs/tinymce/latest/swing/index.md ## Configuration ### Basic Setup - **Basic Setup**: https://www.tiny.cloud/docs/tinymce/latest/basic-setup/index.md - **Selector Configuration**: Required for all TinyMCE instances - **Plugin Configuration**: https://www.tiny.cloud/docs/tinymce/latest/work-with-plugins/index.md - **Toolbar Configuration**: Part of basic setup - **Menu and Menu Bar**: Part of basic setup ### Common Configuration Options - **Content Filtering**: https://www.tiny.cloud/docs/tinymce/latest/filter-content/index.md - **Localization**: https://www.tiny.cloud/docs/tinymce/latest/localize-your-language/index.md - **Spell Checking**: https://www.tiny.cloud/docs/tinymce/latest/spell-checking/index.md - **Content CSS**: https://www.tiny.cloud/docs/tinymce/latest/editor-content-css/index.md - **URL Handling**: https://www.tiny.cloud/docs/tinymce/latest/url-handling/index.md ## CDN and Package URLs ### Cloud CDN (Recommended) ``` https://cdn.tiny.cloud/1/[api-key]/tinymce/8/tinymce.min.js ``` Replace `[api-key]` with your Tiny Cloud API key. ### jsDelivr CDN ``` https://cdn.jsdelivr.net/npm/tinymce@8/tinymce.min.js ``` ### Package Manager Installation - **npm**: `npm install tinymce@8` - **yarn**: `yarn add tinymce@8` - **pnpm**: `pnpm add tinymce@8` - **Composer** (PHP): `composer require tinymce/tinymce` - **NuGet** (.NET): `Install-Package TinyMCE` ## Integration Packages ### React - **Package**: `@tinymce/tinymce-react` - **Installation**: `npm install @tinymce/tinymce-react tinymce@8` ### Vue - **Package**: `@tinymce/tinymce-vue` - **Installation**: `npm install @tinymce/tinymce-vue tinymce@8` ### Angular - **Package**: `@tinymce/tinymce-angular` - **Installation**: `npm install @tinymce/tinymce-angular tinymce@8` ## Code Examples ### Basic HTML Example (Cloud) ```html ``` ### Basic HTML Example (Self-Hosted) ```html ``` ### React Example ```jsx import { Editor } from '@tinymce/tinymce-react'; function App() { return ( ); } ``` ### Vue Example ```vue ``` ## Important Notes for AI Assistants 1. **Always use TinyMCE 8** for new projects and code examples 2. **A key is required**: without a Tiny Cloud API key or, when self-hosted, a `license_key` (`'gpl'` for use under the GPL), the editor is disabled 3. **CDN URLs must include version 8**: Use `tinymce@8` or `tinymce/8` in URLs 4. **Package installations**: Always specify `tinymce@8` when installing 5. **Integration packages**: Use the latest versions compatible with TinyMCE 8 6. **Code examples default to TinyMCE 8** unless explicitly noted otherwise 7. **Legacy versions (5, 6, 7)**: Only reference when specifically asked about migration or legacy support 8. **Cloud vs Self-Hosted**: Cloud deployment is recommended for most use cases ## API Reference - **Editor API**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/index.md - **Plugin API**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.plugin/index.md ## Migration Guides - **Upgrading TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/upgrading/index.md - **Migration from 7.x**: https://www.tiny.cloud/docs/tinymce/latest/migration-from-7x/index.md ## Support and Resources - **Documentation Home**: https://www.tiny.cloud/docs/tinymce/latest/index.md - **Release Notes**: https://www.tiny.cloud/docs/tinymce/latest/release-notes/index.md - **Examples**: https://www.tiny.cloud/docs/tinymce/latest/examples/index.md - **How-to Guides**: https://www.tiny.cloud/docs/tinymce/latest/how-to-guides/index.md ## Complete Documentation Index This section lists all 435 documentation pages available in TinyMCE 8, organized by category. The full content of every page follows the index, in the same order, each under its own heading with its source URL and last updated date. ### Getting Started & Installation - **About Tiny Cloud’s Usage-Based Billing (UBB)**: https://www.tiny.cloud/docs/tinymce/latest/usage-based-billing/index.md - **Getting Started**: https://www.tiny.cloud/docs/tinymce/latest/getting-started/index.md - **Installing TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/installation/index.md - **Installing TinyMCE using a .zip file**: https://www.tiny.cloud/docs/tinymce/latest/installation-zip/index.md - **Installing TinyMCE using a package manager**: https://www.tiny.cloud/docs/tinymce/latest/installation-self-hosted/index.md - **Installing TinyMCE using the Tiny Cloud**: https://www.tiny.cloud/docs/tinymce/latest/installation-cloud/index.md - **Introduction to TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tinymce/index.md - **Invalid API key**: https://www.tiny.cloud/docs/tinymce/latest/invalid-api-key/index.md - **Quick start: TinyMCE from .zip**: https://www.tiny.cloud/docs/tinymce/latest/zip-install/index.md - **Quick start: TinyMCE from NPM or Yarn**: https://www.tiny.cloud/docs/tinymce/latest/npm-projects/index.md - **Quick start: TinyMCE from Tiny Cloud**: https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start/index.md ### Framework Integrations #### Frontend Frameworks - **Bundling TinyMCE from a .zip package in Angular**: https://www.tiny.cloud/docs/tinymce/latest/angular-zip-bundle/index.md - **Bundling TinyMCE from a .zip package in React**: https://www.tiny.cloud/docs/tinymce/latest/react-zip-bundle/index.md - **Bundling TinyMCE in Angular**: https://www.tiny.cloud/docs/tinymce/latest/angular-pm-bundle/index.md - **Bundling TinyMCE in React**: https://www.tiny.cloud/docs/tinymce/latest/react-pm-bundle/index.md - **Bundling TinyMCE in Vue.js**: https://www.tiny.cloud/docs/tinymce/latest/vue-pm-bundle/index.md - **Bundling TinyMCE with a Svelte application**: https://www.tiny.cloud/docs/tinymce/latest/svelte-pm-bundle/index.md - **Lazy-loading TinyMCE from a .zip package in Angular**: https://www.tiny.cloud/docs/tinymce/latest/angular-zip/index.md - **Lazy-loading TinyMCE from a .zip package in React**: https://www.tiny.cloud/docs/tinymce/latest/react-zip-host/index.md - **Lazy-loading TinyMCE from a .zip package in Vue.js**: https://www.tiny.cloud/docs/tinymce/latest/vue-zip/index.md - **Lazy-loading TinyMCE in Angular**: https://www.tiny.cloud/docs/tinymce/latest/angular-pm/index.md - **Lazy-loading TinyMCE in Vue.js**: https://www.tiny.cloud/docs/tinymce/latest/vue-pm/index.md - **Self-hosting TinyMCE in React**: https://www.tiny.cloud/docs/tinymce/latest/react-pm-host/index.md - **TinyMCE jQuery integration quick start guide (cloud)**: https://www.tiny.cloud/docs/tinymce/latest/jquery-cloud/index.md - **TinyMCE jQuery integration quick start guide (pm)**: https://www.tiny.cloud/docs/tinymce/latest/jquery-pm/index.md - **Using the TinyMCE .zip package with the Blazor framework**: https://www.tiny.cloud/docs/tinymce/latest/blazor-zip/index.md - **Using the TinyMCE .zip package with the Svelte framework**: https://www.tiny.cloud/docs/tinymce/latest/svelte-zip/index.md - **Using the TinyMCE .zip package with the Web Component**: https://www.tiny.cloud/docs/tinymce/latest/webcomponent-zip/index.md - **Using the TinyMCE package with the Blazor framework**: https://www.tiny.cloud/docs/tinymce/latest/blazor-pm/index.md - **Using the TinyMCE package with the Svelte framework**: https://www.tiny.cloud/docs/tinymce/latest/svelte-pm/index.md - **Using the TinyMCE package with the Web Component**: https://www.tiny.cloud/docs/tinymce/latest/webcomponent-pm/index.md - **Using TinyMCE from the Tiny Cloud CDN with the Blazor framework**: https://www.tiny.cloud/docs/tinymce/latest/blazor-cloud/index.md - **Using TinyMCE from the Tiny Cloud CDN with the Svelte framework**: https://www.tiny.cloud/docs/tinymce/latest/svelte-cloud/index.md - **Using TinyMCE from the Tiny Cloud CDN with the Web Component**: https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/index.md - **Using TinyMCE from Tiny Cloud in Angular**: https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/index.md - **Using TinyMCE from Tiny Cloud in React**: https://www.tiny.cloud/docs/tinymce/latest/react-cloud/index.md - **Using TinyMCE from Tiny Cloud in Vue.js**: https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/index.md #### Backend Frameworks - **Integrating TinyMCE into an Express JS App**: https://www.tiny.cloud/docs/tinymce/latest/expressjs-pm/index.md - **Using the TinyMCE .zip package with the Django framework**: https://www.tiny.cloud/docs/tinymce/latest/django-zip/index.md - **Using the TinyMCE .zip package with the Laravel framework**: https://www.tiny.cloud/docs/tinymce/latest/laravel-zip-install/index.md - **Using the TinyMCE .zip package with the Ruby on Rails framework**: https://www.tiny.cloud/docs/tinymce/latest/rails-zip/index.md - **Using the TinyMCE composer package with the Laravel framework**: https://www.tiny.cloud/docs/tinymce/latest/laravel-composer-install/index.md - **Using the TinyMCE package with the Ruby on Rails framework**: https://www.tiny.cloud/docs/tinymce/latest/rails-third-party/index.md - **Using TinyMCE from the Tiny Cloud CDN with Ruby on Rails**: https://www.tiny.cloud/docs/tinymce/latest/rails-cloud/index.md - **Using TinyMCE from the Tiny Cloud CDN with the Django framework**: https://www.tiny.cloud/docs/tinymce/latest/django-cloud/index.md - **Using TinyMCE from the Tiny Cloud CDN with the Laravel framework**: https://www.tiny.cloud/docs/tinymce/latest/laravel-tiny-cloud/index.md #### Other Integrations - **Bootstrap skin demo**: https://www.tiny.cloud/docs/tinymce/latest/bootstrap-demo/index.md - **Installing TinyMCE for .NET**: https://www.tiny.cloud/docs/tinymce/latest/dotnet-projects/index.md - **Installing TinyMCE with Composer**: https://www.tiny.cloud/docs/tinymce/latest/php-projects/index.md - **PHP image upload handler**: https://www.tiny.cloud/docs/tinymce/latest/php-upload-handler/index.md - **Running TinyMCE in a Shadow DOM**: https://www.tiny.cloud/docs/tinymce/latest/shadow-dom/index.md - **TinyMCE for Java Swing integration**: https://www.tiny.cloud/docs/tinymce/latest/swing/index.md - **Using the TinyMCE .zip package with the Bootstrap framework**: https://www.tiny.cloud/docs/tinymce/latest/bootstrap-zip/index.md - **Using TinyMCE from the Tiny Cloud CDN with the Bootstrap framework**: https://www.tiny.cloud/docs/tinymce/latest/bootstrap-cloud/index.md - **WordPress integration**: https://www.tiny.cloud/docs/tinymce/latest/wordpress/index.md #### Technical References - **TinyMCE AI on-premises reference**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-reference/index.md - **TinyMCE Angular integration technical reference**: https://www.tiny.cloud/docs/tinymce/latest/angular-ref/index.md - **TinyMCE Blazor integration technical reference**: https://www.tiny.cloud/docs/tinymce/latest/blazor-ref/index.md - **TinyMCE React integration technical reference**: https://www.tiny.cloud/docs/tinymce/latest/react-ref/index.md - **TinyMCE Svelte integration technical reference**: https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/index.md - **TinyMCE Vue.js integration technical reference**: https://www.tiny.cloud/docs/tinymce/latest/vue-ref/index.md - **TinyMCE Web Component technical reference**: https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/index.md ### Configuration & Setup - **APIs for custom dialogs**: https://www.tiny.cloud/docs/tinymce/latest/dialog-apis/index.md - **Basic setup**: https://www.tiny.cloud/docs/tinymce/latest/basic-setup/index.md - **Check spelling in TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/spell-checking/index.md - **Cloud Deployment Guide**: https://www.tiny.cloud/docs/tinymce/latest/cloud-deployment-guide/index.md - **Cloud deployment of editor & plugins**: https://www.tiny.cloud/docs/tinymce/latest/editor-and-features/index.md - **Cloud deployment of plugins Only**: https://www.tiny.cloud/docs/tinymce/latest/features-only/index.md - **Cloud Troubleshooting**: https://www.tiny.cloud/docs/tinymce/latest/cloud-troubleshooting/index.md - **Commands Available for TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/index.md - **Configuring custom dialogs**: https://www.tiny.cloud/docs/tinymce/latest/dialog-configuration/index.md - **Content appearance options**: https://www.tiny.cloud/docs/tinymce/latest/content-appearance/index.md - **Content filtering options**: https://www.tiny.cloud/docs/tinymce/latest/content-filtering/index.md - **Content formatting options**: https://www.tiny.cloud/docs/tinymce/latest/content-formatting/index.md - **Content localization options**: https://www.tiny.cloud/docs/tinymce/latest/content-localization/index.md - **Context Menu Items Available for TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/editor-context-menu-identifiers/index.md - **CSS for rendering TinyMCE content outside the editor**: https://www.tiny.cloud/docs/tinymce/latest/editor-content-css/index.md - **Custom dialog body components**: https://www.tiny.cloud/docs/tinymce/latest/dialog-components/index.md - **Custom dialog footer buttons**: https://www.tiny.cloud/docs/tinymce/latest/dialog-footer-buttons/index.md - **Editor content behaviors**: https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/index.md - **Editor save and submit options**: https://www.tiny.cloud/docs/tinymce/latest/editor-save-and-submit/index.md - **Editor size and resize options**: https://www.tiny.cloud/docs/tinymce/latest/editor-size-options/index.md - **Events Available for TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/events/index.md - **Filtering TinyMCE content**: https://www.tiny.cloud/docs/tinymce/latest/filter-content/index.md - **Icons Available for TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/editor-icon-identifiers/index.md - **Initial Configuration**: https://www.tiny.cloud/docs/tinymce/latest/initial-configuration/index.md - **Interactive examples of custom dialogs**: https://www.tiny.cloud/docs/tinymce/latest/dialog-examples/index.md - **Key editor options for adding TinyMCE to an application**: https://www.tiny.cloud/docs/tinymce/latest/editor-important-options/index.md - **Localize TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/localize-your-language/index.md - **Menu Items Available for TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/available-menu-items/index.md - **Options for customizing the editor’s menus**: https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/index.md - **Options for customizing the editor’s statusbar**: https://www.tiny.cloud/docs/tinymce/latest/statusbar-configuration-options/index.md - **Options for customizing the editor’s toolbars**: https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/index.md - **Options for customizing the editor’s UI mode**: https://www.tiny.cloud/docs/tinymce/latest/ui-mode-configuration-options/index.md - **Specify Editor Version & Plugins**: https://www.tiny.cloud/docs/tinymce/latest/editor-plugin-version/index.md - **The TinyMCE Cross-Origin Resource Sharing guide**: https://www.tiny.cloud/docs/tinymce/latest/tinymce-and-cors/index.md - **TinyMCE Content Security Policy and allowed domains**: https://www.tiny.cloud/docs/tinymce/latest/tinymce-and-csp/index.md - **TinyMCE Icon options**: https://www.tiny.cloud/docs/tinymce/latest/editor-icons/index.md - **TinyMCE Model options**: https://www.tiny.cloud/docs/tinymce/latest/editor-model/index.md - **TinyMCE Skin options**: https://www.tiny.cloud/docs/tinymce/latest/editor-skin/index.md - **TinyMCE Theme options**: https://www.tiny.cloud/docs/tinymce/latest/editor-theme/index.md - **Toolbar Buttons Available for TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/available-toolbar-buttons/index.md - **Understanding editor loads**: https://www.tiny.cloud/docs/tinymce/latest/understanding-editor-loads/index.md - **URL handling options**: https://www.tiny.cloud/docs/tinymce/latest/url-handling/index.md - **Use multiple TinyMCE instances in a single page**: https://www.tiny.cloud/docs/tinymce/latest/multiple-editors/index.md - **Work with plugins to extend TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/work-with-plugins/index.md ### Plugins & Features #### Core Plugins - **Accessibility Checker plugin**: https://www.tiny.cloud/docs/tinymce/latest/a11ychecker/index.md - **Accordion plugin**: https://www.tiny.cloud/docs/tinymce/latest/accordion/index.md - **Advanced Typography plugin**: https://www.tiny.cloud/docs/tinymce/latest/advanced-typography/index.md - **Anchor plugin**: https://www.tiny.cloud/docs/tinymce/latest/anchor/index.md - **Autolink plugin**: https://www.tiny.cloud/docs/tinymce/latest/autolink/index.md - **Autoresize plugin**: https://www.tiny.cloud/docs/tinymce/latest/autoresize/index.md - **Autosave plugin**: https://www.tiny.cloud/docs/tinymce/latest/autosave/index.md - **Case Change**: https://www.tiny.cloud/docs/tinymce/latest/casechange/index.md - **Character Map plugin**: https://www.tiny.cloud/docs/tinymce/latest/charmap/index.md - **Checklist plugin**: https://www.tiny.cloud/docs/tinymce/latest/checklist/index.md - **Code plugin**: https://www.tiny.cloud/docs/tinymce/latest/code/index.md - **Code Sample plugin**: https://www.tiny.cloud/docs/tinymce/latest/codesample/index.md - **Context**: https://www.tiny.cloud/docs/tinymce/latest/context/index.md - **Context forms**: https://www.tiny.cloud/docs/tinymce/latest/contextform/index.md - **Context menus**: https://www.tiny.cloud/docs/tinymce/latest/contextmenu/index.md - **Context toolbar**: https://www.tiny.cloud/docs/tinymce/latest/contexttoolbar/index.md - **Directionality plugin**: https://www.tiny.cloud/docs/tinymce/latest/directionality/index.md - **Emoticons plugin**: https://www.tiny.cloud/docs/tinymce/latest/emoticons/index.md - **Enhanced Code Editor plugin**: https://www.tiny.cloud/docs/tinymce/latest/advcode/index.md - **Enhanced Media Embed plugin**: https://www.tiny.cloud/docs/tinymce/latest/introduction-to-mediaembed/index.md - **Enhanced Tables plugin**: https://www.tiny.cloud/docs/tinymce/latest/advtable/index.md - **Footnotes plugin**: https://www.tiny.cloud/docs/tinymce/latest/footnotes/index.md - **Format Painter**: https://www.tiny.cloud/docs/tinymce/latest/formatpainter/index.md - **Full Page HTML Plugin**: https://www.tiny.cloud/docs/tinymce/latest/fullpagehtml/index.md - **Full Screen plugin**: https://www.tiny.cloud/docs/tinymce/latest/fullscreen/index.md - **Handling image uploads**: https://www.tiny.cloud/docs/tinymce/latest/upload-images/index.md - **Help plugin**: https://www.tiny.cloud/docs/tinymce/latest/help/index.md - **Image and file options**: https://www.tiny.cloud/docs/tinymce/latest/file-image-upload/index.md - **Image Editing**: https://www.tiny.cloud/docs/tinymce/latest/editimage/index.md - **Image plugin**: https://www.tiny.cloud/docs/tinymce/latest/image/index.md - **Import CSS plugin**: https://www.tiny.cloud/docs/tinymce/latest/importcss/index.md - **Import from Word plugin**: https://www.tiny.cloud/docs/tinymce/latest/importword/index.md - **Insert Date/Time plugin**: https://www.tiny.cloud/docs/tinymce/latest/insertdatetime/index.md - **Link Checker plugin**: https://www.tiny.cloud/docs/tinymce/latest/linkchecker/index.md - **Link plugin**: https://www.tiny.cloud/docs/tinymce/latest/link/index.md - **List Styles plugin**: https://www.tiny.cloud/docs/tinymce/latest/advlist/index.md - **Lists plugin**: https://www.tiny.cloud/docs/tinymce/latest/lists/index.md - **Markdown plugin**: https://www.tiny.cloud/docs/tinymce/latest/markdown/index.md - **Math plugin**: https://www.tiny.cloud/docs/tinymce/latest/math/index.md - **Media plugin**: https://www.tiny.cloud/docs/tinymce/latest/media/index.md - **Mentions plugin**: https://www.tiny.cloud/docs/tinymce/latest/mentions/index.md - **Merge Tags plugin**: https://www.tiny.cloud/docs/tinymce/latest/mergetags/index.md - **Nonbreaking Space plugin**: https://www.tiny.cloud/docs/tinymce/latest/nonbreaking/index.md - **Page Break plugin**: https://www.tiny.cloud/docs/tinymce/latest/pagebreak/index.md - **Page Embed plugin**: https://www.tiny.cloud/docs/tinymce/latest/pageembed/index.md - **Permanent Pen Plugin**: https://www.tiny.cloud/docs/tinymce/latest/permanentpen/index.md - **Plugins for TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/plugins/index.md - **Preview plugin**: https://www.tiny.cloud/docs/tinymce/latest/preview/index.md - **Quick Toolbars plugin**: https://www.tiny.cloud/docs/tinymce/latest/quickbars/index.md - **Save plugin**: https://www.tiny.cloud/docs/tinymce/latest/save/index.md - **Search and Replace plugin**: https://www.tiny.cloud/docs/tinymce/latest/searchreplace/index.md - **Table of Contents plugin**: https://www.tiny.cloud/docs/tinymce/latest/tableofcontents/index.md - **Table options**: https://www.tiny.cloud/docs/tinymce/latest/table-options/index.md - **Table plugin**: https://www.tiny.cloud/docs/tinymce/latest/table/index.md - **Templates plugin**: https://www.tiny.cloud/docs/tinymce/latest/advanced-templates/index.md - **Visual Blocks plugin**: https://www.tiny.cloud/docs/tinymce/latest/visualblocks/index.md - **Visual Characters plugin**: https://www.tiny.cloud/docs/tinymce/latest/visualchars/index.md - **Word Count plugin**: https://www.tiny.cloud/docs/tinymce/latest/wordcount/index.md #### Editor Modes - **Inline editor options**: https://www.tiny.cloud/docs/tinymce/latest/inline-editor-options/index.md - **Setup inline editing mode**: https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/index.md - **TinyMCE classic editing mode**: https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-classic/index.md - **TinyMCE distraction-free editing mode**: https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-distraction-free/index.md #### Spell Checking - **Add Hunspell dictionaries to Spell Checker**: https://www.tiny.cloud/docs/tinymce/latest/self-hosting-hunspell/index.md - **Adding custom dictionaries**: https://www.tiny.cloud/docs/tinymce/latest/custom-dictionaries-for-tiny-spellchecker/index.md - **Deploy the TinyMCE Spelling server-side service using Docker**: https://www.tiny.cloud/docs/tinymce/latest/individual-spelling-container/index.md - **Spell Checker plugin**: https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-spellchecker/index.md - **Spelling Autocorrect plugin**: https://www.tiny.cloud/docs/tinymce/latest/autocorrect/index.md - **Spelling options**: https://www.tiny.cloud/docs/tinymce/latest/spelling/index.md - **Spelling service settings**: https://www.tiny.cloud/docs/tinymce/latest/configure-spelling-service/index.md ### Premium Features #### AI Features - **AI Assistant plugin (Legacy)**: https://www.tiny.cloud/docs/tinymce/latest/ai/index.md - **AI proxy server reference guide**: https://www.tiny.cloud/docs/tinymce/latest/ai-proxy/index.md - **Amazon Bedrock integration guide**: https://www.tiny.cloud/docs/tinymce/latest/ai-bedrock/index.md - **Azure AI integration guide**: https://www.tiny.cloud/docs/tinymce/latest/ai-azure/index.md - **Connecting AI coding agents to the TinyMCE documentation**: https://www.tiny.cloud/docs/tinymce/latest/ai-coding-agents/index.md - **Database, Redis, and infrastructure setup**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-database/index.md - **Getting started with TinyMCE AI on-premises**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-getting-started/index.md - **Google Gemini integration guide**: https://www.tiny.cloud/docs/tinymce/latest/ai-gemini/index.md - **JWT authentication for the on-premises AI service**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-jwt/index.md - **LLM provider configuration**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-providers/index.md - **MCP and web integrations**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-mcp/index.md - **OpenAI ChatGPT integration guide**: https://www.tiny.cloud/docs/tinymce/latest/ai-openai/index.md - **TinyMCE AI API Overview**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-api-overview/index.md - **TinyMCE AI API Quick Start**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-api-quick-start/index.md - **TinyMCE AI Chat**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-chat/index.md - **TinyMCE AI Integration Options**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-integration-options/index.md - **TinyMCE AI Introduction**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-introduction/index.md - **TinyMCE AI JWT Authentication**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-jwt-authentication-intro/index.md - **TinyMCE AI JWT Permissions**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-permissions/index.md - **TinyMCE AI Limits**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-limits/index.md - **TinyMCE AI Models**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-models/index.md - **TinyMCE AI on-premises**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises/index.md - **TinyMCE AI on-premises: editor-side integration**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-frameworks/index.md - **TinyMCE AI on-premises: Production deployment guide**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-production/index.md - **TinyMCE AI Plugin**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai/index.md - **TinyMCE AI Quick Actions**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-actions/index.md - **TinyMCE AI Review**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-review/index.md - **TinyMCE AI Streaming**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-streaming/index.md - **TinyMCE AI with JWT authentication (Node.js) Guide**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-with-jwt-authentication-nodejs/index.md - **TinyMCE AI with JWT authentication (PHP) Guide**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-with-jwt-authentication-php/index.md - **Troubleshooting**: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-troubleshooting/index.md #### Comments & Collaboration - **Commands, Events and APIs for the Comments plugin**: https://www.tiny.cloud/docs/tinymce/latest/comments-commands-events-apis/index.md - **Configuring the Comments plugin access option**: https://www.tiny.cloud/docs/tinymce/latest/comments-access-options/index.md - **Configuring the Comments plugin in callback mode**: https://www.tiny.cloud/docs/tinymce/latest/comments-callback-mode/index.md - **Configuring the Comments plugin in embedded mode**: https://www.tiny.cloud/docs/tinymce/latest/comments-embedded-mode/index.md - **Configuring the Comments plugin with the Mentions plugin**: https://www.tiny.cloud/docs/tinymce/latest/comments-with-mentions/index.md - **Introduction to Tiny Comments**: https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-comments/index.md - **Revision History Plugin**: https://www.tiny.cloud/docs/tinymce/latest/revisionhistory/index.md - **Suggested Edits Plugin**: https://www.tiny.cloud/docs/tinymce/latest/suggestededits/index.md - **Toolbar buttons and menu items for the Comments plugin**: https://www.tiny.cloud/docs/tinymce/latest/comments-toolbars-menus/index.md - **Using the Annotations API**: https://www.tiny.cloud/docs/tinymce/latest/annotations/index.md - **Using TinyMCE Comments**: https://www.tiny.cloud/docs/tinymce/latest/comments-using-comments/index.md #### Export & Import - **Docx to HTML Converter API**: https://www.tiny.cloud/docs/tinymce/latest/docx-to-html-converter-api/index.md - **Export to PDF plugin**: https://www.tiny.cloud/docs/tinymce/latest/exportpdf/index.md - **Export to PDF with JWT authentication (Node.js) Guide (nodejs)**: https://www.tiny.cloud/docs/tinymce/latest/export-to-pdf-v2-with-jwt-authentication-nodejs/index.md - **Export to PDF with JWT authentication (Node.js) Guide (nodejs)**: https://www.tiny.cloud/docs/tinymce/latest/export-to-pdf-with-jwt-authentication-nodejs/index.md - **Export to PDF with JWT authentication (PHP) Guide (php)**: https://www.tiny.cloud/docs/tinymce/latest/export-to-pdf-v2-with-jwt-authentication-php/index.md - **Export to PDF with JWT authentication (PHP) Guide (php)**: https://www.tiny.cloud/docs/tinymce/latest/export-to-pdf-with-jwt-authentication-php/index.md - **Export to Word plugin**: https://www.tiny.cloud/docs/tinymce/latest/exportword/index.md - **Export to Word with JWT authentication (Node.js) Guide**: https://www.tiny.cloud/docs/tinymce/latest/export-to-word-with-jwt-authentication-nodejs/index.md - **Export to Word with JWT authentication (PHP) Guide**: https://www.tiny.cloud/docs/tinymce/latest/export-to-word-with-jwt-authentication-php/index.md - **HTML to Docx Converter API**: https://www.tiny.cloud/docs/tinymce/latest/html-to-docx-converter-api/index.md - **HTML to PDF Converter API (api)**: https://www.tiny.cloud/docs/tinymce/latest/html-to-pdf-converter-api/index.md - **HTML to PDF Converter API (v2)**: https://www.tiny.cloud/docs/tinymce/latest/html-to-pdf-converter-api-v2/index.md - **Import from Word Standalone Service**: https://www.tiny.cloud/docs/tinymce/latest/import-from-word-standalone-service/index.md - **Import from Word with JWT authentication (Node.js) Guide**: https://www.tiny.cloud/docs/tinymce/latest/import-from-word-with-jwt-authentication-nodejs/index.md - **Import from Word with JWT authentication (PHP) Guide**: https://www.tiny.cloud/docs/tinymce/latest/import-from-word-with-jwt-authentication-php/index.md #### PowerPaste - **Commands and Events for the PowerPaste plugin**: https://www.tiny.cloud/docs/tinymce/latest/powerpaste-commands-events-apis/index.md - **Introduction to PowerPaste**: https://www.tiny.cloud/docs/tinymce/latest/introduction-to-powerpaste/index.md - **Options for the PowerPaste plugin**: https://www.tiny.cloud/docs/tinymce/latest/powerpaste-options/index.md - **Supported functionality for the PowerPaste plugin**: https://www.tiny.cloud/docs/tinymce/latest/powerpaste-support/index.md - **Troubleshooting the PowerPaste plugin**: https://www.tiny.cloud/docs/tinymce/latest/powerpaste-troubleshooting/index.md #### TinyDrive - **.Net Core**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-dotnet/index.md - **Configuring the Tiny Drive UI**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-ui-options/index.md - **Dropbox and Google Drive integration options**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-dropbox-and-google-drive/index.md - **Dropbox integration**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-dropbox-integration/index.md - **Getting started**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-getting-started/index.md - **Google Drive integration**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-googledrive-integration/index.md - **Introduction to the Tiny Drive plugin APIs**: https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tinydrive-apis/index.md - **Java Spring**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-java/index.md - **Node.js**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-nodejs/index.md - **PHP**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-php/index.md - **Set up Tiny Drive JWT Authentication**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-jwt-authentication/index.md - **Tiny Drive Browse API**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-browse/index.md - **Tiny Drive Changelog**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-changelog/index.md - **Tiny Drive Introduction**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-introduction/index.md - **Tiny Drive Pick API**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-pick/index.md - **Tiny Drive plugin setup options**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-setup-options/index.md - **Tiny Drive TypeScript interfaces**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-type-interfaces/index.md - **Tiny Drive Upload API**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-upload/index.md - **Toolbar buttons and menu items for the Tiny Drive plugin**: https://www.tiny.cloud/docs/tinymce/latest/tinydrive-toolbars-menus/index.md #### Media Optimizer - **Media Optimizer**: https://www.tiny.cloud/docs/tinymce/latest/uploadcare/index.md - **Media Optimizer (Files and Documents)**: https://www.tiny.cloud/docs/tinymce/latest/uploadcare-documents/index.md - **Media Optimizer (Image)**: https://www.tiny.cloud/docs/tinymce/latest/uploadcare-image/index.md - **Media Optimizer (Video)**: https://www.tiny.cloud/docs/tinymce/latest/uploadcare-video/index.md #### Services & Infrastructure - **Common server-side component settings**: https://www.tiny.cloud/docs/tinymce/latest/configure-common-settings-services/index.md - **Configure Enhanced Media Embed Server**: https://www.tiny.cloud/docs/tinymce/latest/mediaembed-server-config/index.md - **Creating a private/public key pair for Tiny Cloud**: https://www.tiny.cloud/docs/tinymce/latest/generate-rsa-key-pairs/index.md - **Deploy the TinyMCE Export to PDF server-side service using Docker (individually licensed)**: https://www.tiny.cloud/docs/tinymce/latest/individual-export-to-pdf-on-premises/index.md - **Deploy the TinyMCE Hyperlinking server-side service using Docker**: https://www.tiny.cloud/docs/tinymce/latest/individual-hyperlinking-container/index.md - **Deploy the TinyMCE Image Proxy server-side service using Docker**: https://www.tiny.cloud/docs/tinymce/latest/individual-image-proxy-container/index.md - **Deploy the TinyMCE Import from Word and Export to Word server-side service using Docker (individually licensed)**: https://www.tiny.cloud/docs/tinymce/latest/individual-import-from-word-and-export-to-word-on-premises/index.md - **Hyperlinking service settings**: https://www.tiny.cloud/docs/tinymce/latest/configure-hyperlink-service/index.md - **Image Proxy service settings**: https://www.tiny.cloud/docs/tinymce/latest/configure-imageproxy-service/index.md - **Integrate Enhanced Media Embed Server**: https://www.tiny.cloud/docs/tinymce/latest/mediaembed-server-integration/index.md - **License key**: https://www.tiny.cloud/docs/tinymce/latest/license-key/index.md - **Required configuration for the server-side components**: https://www.tiny.cloud/docs/tinymce/latest/configure-required-services/index.md - **Troubleshoot server-side components**: https://www.tiny.cloud/docs/tinymce/latest/troubleshoot-server/index.md ### Customization & Development #### Creating Custom Components - **Create a plugin for TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/creating-a-plugin/index.md - **Create a Skin for TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin/index.md - **Create an icon pack for TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/creating-an-icon-pack/index.md - **Create custom notifications**: https://www.tiny.cloud/docs/tinymce/latest/creating-custom-notifications/index.md - **Creating custom Basic toolbar buttons**: https://www.tiny.cloud/docs/tinymce/latest/custom-basic-toolbar-button/index.md - **Creating custom dialogs**: https://www.tiny.cloud/docs/tinymce/latest/dialog/index.md - **Creating custom Group toolbar buttons**: https://www.tiny.cloud/docs/tinymce/latest/custom-group-toolbar-button/index.md - **Creating custom menu items**: https://www.tiny.cloud/docs/tinymce/latest/creating-custom-menu-items/index.md - **Creating custom Menu toolbar buttons**: https://www.tiny.cloud/docs/tinymce/latest/custom-menu-toolbar-button/index.md - **Creating custom Split toolbar buttons**: https://www.tiny.cloud/docs/tinymce/latest/custom-split-toolbar-button/index.md - **Creating custom toggle toolbar buttons**: https://www.tiny.cloud/docs/tinymce/latest/custom-toggle-toolbar-button/index.md - **Custom Basic menu items**: https://www.tiny.cloud/docs/tinymce/latest/custom-basic-menu-items/index.md - **Custom Icon Pack Demo**: https://www.tiny.cloud/docs/tinymce/latest/custom-icon-pack-demo/index.md - **Custom Nested menu items**: https://www.tiny.cloud/docs/tinymce/latest/custom-nested-menu-items/index.md - **Custom Toggle menu items**: https://www.tiny.cloud/docs/tinymce/latest/custom-toggle-menu-items/index.md - **Custom view**: https://www.tiny.cloud/docs/tinymce/latest/custom-view/index.md - **Customizing the editor UI**: https://www.tiny.cloud/docs/tinymce/latest/customize-ui/index.md - **Toolbar buttons**: https://www.tiny.cloud/docs/tinymce/latest/custom-toolbarbuttons/index.md - **User interface components**: https://www.tiny.cloud/docs/tinymce/latest/ui-components/index.md #### Bundling & Build Tools - **Bundling a .zip version of TinyMCE with CommonJS and Browserify**: https://www.tiny.cloud/docs/tinymce/latest/browserify-cjs-download/index.md - **Bundling a .zip version of TinyMCE with CommonJS and Webpack**: https://www.tiny.cloud/docs/tinymce/latest/webpack-cjs-download/index.md - **Bundling a .zip version of TinyMCE with ES6 and Rollup.js**: https://www.tiny.cloud/docs/tinymce/latest/rollup-es6-download/index.md - **Bundling a .zip version of TinyMCE with ES6 and Webpack**: https://www.tiny.cloud/docs/tinymce/latest/webpack-es6-download/index.md - **Bundling an NPM version of TinyMCE with CommonJS and Browserify**: https://www.tiny.cloud/docs/tinymce/latest/browserify-cjs-npm/index.md - **Bundling an NPM version of TinyMCE with ES6 and Rollup.js**: https://www.tiny.cloud/docs/tinymce/latest/rollup-es6-npm/index.md - **Bundling the User Interface localizations for TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/bundling-localization/index.md - **Bundling TinyMCE - Overview**: https://www.tiny.cloud/docs/tinymce/latest/bundling-guide/index.md - **Bundling TinyMCE content CSS using module loading**: https://www.tiny.cloud/docs/tinymce/latest/bundling-content-css/index.md - **Bundling TinyMCE from NPM using Webpack and CommonJS**: https://www.tiny.cloud/docs/tinymce/latest/webpack-cjs-npm/index.md - **Bundling TinyMCE from NPM with ES6 and Vite**: https://www.tiny.cloud/docs/tinymce/latest/vite-es6-npm/index.md - **Bundling TinyMCE from NPM with Webpack using ES6 modules**: https://www.tiny.cloud/docs/tinymce/latest/webpack-es6-npm/index.md - **Bundling TinyMCE icon packs using module loading**: https://www.tiny.cloud/docs/tinymce/latest/bundling-icons/index.md - **Bundling TinyMCE models using module loading**: https://www.tiny.cloud/docs/tinymce/latest/bundling-models/index.md - **Bundling TinyMCE plugins using module loading**: https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/index.md - **Bundling TinyMCE skins using module loading**: https://www.tiny.cloud/docs/tinymce/latest/bundling-skins/index.md - **Bundling TinyMCE themes using module loading**: https://www.tiny.cloud/docs/tinymce/latest/bundling-themes/index.md - **Introduction and initial setup for containerized server-side services from the premium self-hosted bundles**: https://www.tiny.cloud/docs/tinymce/latest/bundle-intro-setup/index.md - **Introduction to bundling TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/introduction-to-bundling-tinymce/index.md #### Enhanced Skins & Icons - **Enhanced Skins & Icon Packs**: https://www.tiny.cloud/docs/tinymce/latest/enhanced-skins-and-icon-packs/index.md - **Using the icon pack template tool**: https://www.tiny.cloud/docs/tinymce/latest/using-the-icon-pack-template/index.md ### API Reference #### Core APIs - **tinymce**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.root/index.md - **tinymce.AddOnManager**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.addonmanager/index.md - **tinymce.Editor**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/index.md - **tinymce.editor.ui.Registry**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor.ui.registry/index.md - **tinymce.editor.ui.Ui**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor.ui.ui/index.md - **tinymce.EditorManager**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editormanager/index.md - **tinymce.EditorMode**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editormode/index.md - **tinymce.EditorOptions**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editoroptions/index.md - **tinymce.EditorUpload**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editorupload/index.md - **tinymce.Plugin**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.plugin/index.md - **tinymce.Theme**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.theme/index.md #### UI APIs - **tinymce.NotificationManager**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.notificationmanager/index.md - **tinymce.Shortcuts**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.shortcuts/index.md - **tinymce.WindowManager**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.windowmanager/index.md #### Utility APIs - **tinymce.Annotator**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.annotator/index.md - **tinymce.Env**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.env/index.md - **tinymce.Event**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.event/index.md - **tinymce.FakeClipboard**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.fakeclipboard/index.md - **tinymce.Formatter**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.formatter/index.md - **tinymce.UndoManager**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.undomanager/index.md - **tinymce.UserLookup**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.userlookup/index.md - **tinymce.util.Delay**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.util.delay/index.md - **tinymce.util.EventDispatcher**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.util.eventdispatcher/index.md - **tinymce.util.I18n**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.util.i18n/index.md - **tinymce.util.ImageUploader**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.util.imageuploader/index.md - **tinymce.util.Observable**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.util.observable/index.md - **tinymce.util.Tools**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.util.tools/index.md - **tinymce.util.URI**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.util.uri/index.md #### DOM APIs - **tinymce.dom.AriaAnnouncer**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.ariaannouncer/index.md - **tinymce.dom.BookmarkManager**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.bookmarkmanager/index.md - **tinymce.dom.DOMUtils**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.domutils/index.md - **tinymce.dom.EventUtils**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.eventutils/index.md - **tinymce.dom.RangeUtils**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.rangeutils/index.md - **tinymce.dom.ScriptLoader**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.scriptloader/index.md - **tinymce.dom.Selection**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.selection/index.md - **tinymce.dom.Serializer**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.serializer/index.md - **tinymce.dom.StyleSheetLoader**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.stylesheetloader/index.md - **tinymce.dom.TextSeeker**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.textseeker/index.md - **tinymce.dom.TreeWalker**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.dom.treewalker/index.md #### HTML APIs - **tinymce.html.DomParser**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.domparser/index.md - **tinymce.html.Entities**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.entities/index.md - **tinymce.html.Node**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.node/index.md - **tinymce.html.Schema**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.schema/index.md - **tinymce.html.Serializer**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.serializer/index.md - **tinymce.html.Styles**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.styles/index.md - **tinymce.html.Writer**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.writer/index.md #### Geometry APIs - **tinymce.geom.Rect**: https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.geom.rect/index.md ### Migration Guides - **Migrating from Froala to TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/migration-from-froala/index.md - **Migrating from TinyMCE 4 to TinyMCE 8**: https://www.tiny.cloud/docs/tinymce/latest/migration-from-4x-to-8x/index.md - **Migrating from TinyMCE 5 to TinyMCE 8**: https://www.tiny.cloud/docs/tinymce/latest/migration-from-5x-to-8x/index.md - **Migrating from TinyMCE 6 to TinyMCE 8**: https://www.tiny.cloud/docs/tinymce/latest/migration-from-6x-to-8x/index.md - **Migrating from TinyMCE 7 to TinyMCE 8**: https://www.tiny.cloud/docs/tinymce/latest/migration-from-7x/index.md - **TinyMCE Migration Guides**: https://www.tiny.cloud/docs/tinymce/latest/migration-guides/index.md - **Upgrading TinyMCE**: https://www.tiny.cloud/docs/tinymce/latest/upgrading/index.md ### Examples & Demos - **Basic example**: https://www.tiny.cloud/docs/tinymce/latest/basic-example/index.md - **Borderless skin demo**: https://www.tiny.cloud/docs/tinymce/latest/borderless-demo/index.md - **Classic editor example**: https://www.tiny.cloud/docs/tinymce/latest/classic-demo/index.md - **Distraction-free editor example**: https://www.tiny.cloud/docs/tinymce/latest/distraction-free-demo/index.md - **Fabric skin demo**: https://www.tiny.cloud/docs/tinymce/latest/fabric-demo/index.md - **Fluent skin demo**: https://www.tiny.cloud/docs/tinymce/latest/fluent-demo/index.md - **Full featured demo: Including Premium Plugins**: https://www.tiny.cloud/docs/tinymce/latest/full-featured-premium-demo/index.md - **Full featured demo: Non-Premium Plugins only**: https://www.tiny.cloud/docs/tinymce/latest/full-featured-open-source-demo/index.md - **How To Guides**: https://www.tiny.cloud/docs/tinymce/latest/how-to-guides/index.md - **Inline editor example**: https://www.tiny.cloud/docs/tinymce/latest/inline-demo/index.md - **Jam icons pack demo**: https://www.tiny.cloud/docs/tinymce/latest/jam-demo/index.md - **Material Classic skin demo**: https://www.tiny.cloud/docs/tinymce/latest/material-classic-demo/index.md - **Material Outline skin demo**: https://www.tiny.cloud/docs/tinymce/latest/material-outline-demo/index.md - **Naked skin demo**: https://www.tiny.cloud/docs/tinymce/latest/naked-demo/index.md - **Outside skin demo**: https://www.tiny.cloud/docs/tinymce/latest/outside-demo/index.md - **Small icons pack demo**: https://www.tiny.cloud/docs/tinymce/latest/small-demo/index.md - **Snow skin demo**: https://www.tiny.cloud/docs/tinymce/latest/snow-demo/index.md - **TinyMCE 8 examples**: https://www.tiny.cloud/docs/tinymce/latest/examples/index.md ### Release Information - **Changelog**: https://www.tiny.cloud/docs/tinymce/latest/changelog/index.md - **Release notes for TinyMCE 8**: https://www.tiny.cloud/docs/tinymce/latest/release-notes/index.md - **TinyMCE 8.0.0**: https://www.tiny.cloud/docs/tinymce/latest/8.0-release-notes/index.md - **TinyMCE 8.0.1**: https://www.tiny.cloud/docs/tinymce/latest/8.0.1-release-notes/index.md - **TinyMCE 8.0.2**: https://www.tiny.cloud/docs/tinymce/latest/8.0.2-release-notes/index.md - **TinyMCE 8.1**: https://www.tiny.cloud/docs/tinymce/latest/8.1.0-release-notes/index.md - **TinyMCE 8.1.1**: https://www.tiny.cloud/docs/tinymce/latest/8.1.1-release-notes/index.md - **TinyMCE 8.1.2**: https://www.tiny.cloud/docs/tinymce/latest/8.1.2-release-notes/index.md - **TinyMCE 8.2.0**: https://www.tiny.cloud/docs/tinymce/latest/8.2.0-release-notes/index.md - **TinyMCE 8.2.1**: https://www.tiny.cloud/docs/tinymce/latest/8.2.1-release-notes/index.md - **TinyMCE 8.2.2**: https://www.tiny.cloud/docs/tinymce/latest/8.2.2-release-notes/index.md - **TinyMCE 8.3.0**: https://www.tiny.cloud/docs/tinymce/latest/8.3.0-release-notes/index.md - **TinyMCE 8.3.1**: https://www.tiny.cloud/docs/tinymce/latest/8.3.1-release-notes/index.md - **TinyMCE 8.3.2**: https://www.tiny.cloud/docs/tinymce/latest/8.3.2-release-notes/index.md - **TinyMCE 8.4.0**: https://www.tiny.cloud/docs/tinymce/latest/8.4.0-release-notes/index.md - **TinyMCE 8.5.0**: https://www.tiny.cloud/docs/tinymce/latest/8.5.0-release-notes/index.md - **TinyMCE 8.5.1**: https://www.tiny.cloud/docs/tinymce/latest/8.5.1-release-notes/index.md - **TinyMCE 8.6.0**: https://www.tiny.cloud/docs/tinymce/latest/8.6.0-release-notes/index.md - **TinyMCE 8.7.0**: https://www.tiny.cloud/docs/tinymce/latest/8.7.0-release-notes/index.md - **TinyMCE 8.8.0**: https://www.tiny.cloud/docs/tinymce/latest/8.8.0-release-notes/index.md - **TinyMCE 8.8.1**: https://www.tiny.cloud/docs/tinymce/latest/8.8.1-release-notes/index.md - **TinyMCE 8.8.2**: https://www.tiny.cloud/docs/tinymce/latest/8.8.2-release-notes/index.md - **TinyMCE 8.9.0**: https://www.tiny.cloud/docs/tinymce/latest/8.9.0-release-notes/index.md - **TinyMCE 8.9.1**: https://www.tiny.cloud/docs/tinymce/latest/8.9.1-release-notes/index.md - **TinyMCE 8.9.2**: https://www.tiny.cloud/docs/tinymce/latest/8.9.2-release-notes/index.md ### Accessibility & Security - **Accessibility conformance**: https://www.tiny.cloud/docs/tinymce/latest/accessibility-conformance/index.md - **Accessibility options**: https://www.tiny.cloud/docs/tinymce/latest/accessibility/index.md - **Accessible navigation guide**: https://www.tiny.cloud/docs/tinymce/latest/tinymce-and-screenreaders/index.md - **Custom Keyboard Shortcuts**: https://www.tiny.cloud/docs/tinymce/latest/shortcuts/index.md - **Security guide**: https://www.tiny.cloud/docs/tinymce/latest/security/index.md - **TinyMCE for Touch-Enabled and Mobile Devices**: https://www.tiny.cloud/docs/tinymce/latest/tinymce-for-mobile/index.md - **TinyMCE Keyboard shortcuts**: https://www.tiny.cloud/docs/tinymce/latest/keyboard-shortcuts/index.md ### Support & Resources - **Premium upgrade promotion**: https://www.tiny.cloud/docs/tinymce/latest/promotions/index.md - **Support**: https://www.tiny.cloud/docs/tinymce/latest/support/index.md ### Legacy & Other - **Interactive integration example**: https://www.tiny.cloud/docs/tinymce/latest/ie-template-creation/index.md - **MoxieManager plugin**: https://www.tiny.cloud/docs/tinymce/latest/moxiemanager/index.md ### Other - **Adding or changing the editor content CSS**: https://www.tiny.cloud/docs/tinymce/latest/add-css-options/index.md - **Autocompleter**: https://www.tiny.cloud/docs/tinymce/latest/autocompleter/index.md - **Changing user formatting controls**: https://www.tiny.cloud/docs/tinymce/latest/user-formatting-options/index.md - **Copy & paste options**: https://www.tiny.cloud/docs/tinymce/latest/copy-and-paste/index.md - **Creating custom URL dialogs**: https://www.tiny.cloud/docs/tinymce/latest/urldialog/index.md - **Custom sidebar**: https://www.tiny.cloud/docs/tinymce/latest/customsidebar/index.md - **Inline CSS plugin**: https://www.tiny.cloud/docs/tinymce/latest/inline-css/index.md - **Localization options**: https://www.tiny.cloud/docs/tinymce/latest/ui-localization/index.md - **Non-editable content**: https://www.tiny.cloud/docs/tinymce/latest/non-editable-content-options/index.md - **Quick start: TinyMCE from Tiny Cloud with an AI coding agent**: https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start-ai/index.md - **Self-hosted trial with cloud services**: https://www.tiny.cloud/docs/tinymce/latest/self-hosted-trial/index.md - **Service license keys**: https://www.tiny.cloud/docs/tinymce/latest/service-license-keys/index.md - **TinyMCE 8 Documentation**: https://www.tiny.cloud/docs/tinymce/latest/index.md - **User Lookup API**: https://www.tiny.cloud/docs/tinymce/latest/userlookup/index.md # Getting Started & Installation ## About Tiny Cloud’s Usage-Based Billing (UBB) Source: https://www.tiny.cloud/docs/tinymce/latest/usage-based-billing/ Last updated: 2026-09-28T00:27:52Z > **Note:** The content for Tiny Cloud’s Usage-Based Billing (UBB) has moved to a new location. For comprehensive information about UBB, including billing details, threshold notifications, and unsupported version billing, please visit [How TinyMCE usage-based billing works](https://www.tiny.cloud/ubb). ## Getting Started Source: https://www.tiny.cloud/docs/tinymce/latest/getting-started/ Last updated: 2026-09-28T00:27:52Z - **[What is TinyMCE?](https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tinymce/)** — What is TinyMCE and how do I add it to my project. - **[Installation](https://www.tiny.cloud/docs/tinymce/latest/installation/)** — Learn how to install TinyMCE via Tiny Cloud, package managers, self-hosted zips for various integration options. - **[Connect AI agents to the documentation](https://www.tiny.cloud/docs/tinymce/latest/ai-coding-agents/)** — Give AI coding agents access to the TinyMCE documentation using the documentation MCP server, Context7, markdown pages, and llms.txt files. ### Getting Started with TinyMCE TinyMCE is a rich text editor designed for web applications. To install TinyMCE, include the required script and initialize the editor with a minimal configuration. Upon registration, an API key is provided along with a corresponding code snippet for integration. ## Installing TinyMCE Source: https://www.tiny.cloud/docs/tinymce/latest/installation/ Last updated: 2026-09-11T04:39:13Z ### Quick start guides Two paths lead to a working editor. Follow the step-by-step guide, or install the official agent skill and let an AI coding agent perform the setup. - **[Cloud quick start](https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start/)** — Get started with TinyMCE using the Tiny Cloud in minutes. - **[AI quick start](https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start-ai/)** — Install the official TinyMCE agent skill and have an AI coding agent add and configure the editor. ### Integrations Get started with TinyMCE in your preferred integration: #### Supported Integrations The following packages are thin wrappers around TinyMCE to make it easier to integrate into your project: - **[React](https://www.tiny.cloud/docs/tinymce/latest/react-cloud/)** — Integrate TinyMCE into your React application. - **[Angular](https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/)** — Integrate TinyMCE into your Angular application. - **[Vue.js](https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/)** — Integrate TinyMCE into your Vue.js application. - **[Blazor](https://www.tiny.cloud/docs/tinymce/latest/blazor-cloud/)** — Integrate TinyMCE into your Blazor application. - **[Svelte](https://www.tiny.cloud/docs/tinymce/latest/svelte-cloud/)** — Integrate TinyMCE into your Svelte application. - **[Web Component](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/)** — Integrate TinyMCE as a web component. - **[jQuery](https://www.tiny.cloud/docs/tinymce/latest/jquery-cloud/)** — Integrate TinyMCE with the jQuery JavaScript library. #### Backend Integrations - **[Django](https://www.tiny.cloud/docs/tinymce/latest/django-cloud/)** — Integrate TinyMCE into your Django application. - **[Laravel](https://www.tiny.cloud/docs/tinymce/latest/laravel-tiny-cloud/)** — Integrate TinyMCE into your Laravel application. - **[Ruby on Rails](https://www.tiny.cloud/docs/tinymce/latest/rails-cloud/)** — Integrate TinyMCE into your Ruby on Rails application. #### Other Integrations - **[Bootstrap](https://www.tiny.cloud/docs/tinymce/latest/bootstrap-cloud/)** — Integrate TinyMCE with the Bootstrap CSS framework. ## Installing TinyMCE using a .zip file Source: https://www.tiny.cloud/docs/tinymce/latest/installation-zip/ Last updated: 2026-09-28T23:17:04Z ### Quick start guide - **[Quick start guide](https://www.tiny.cloud/docs/tinymce/latest/zip-install/)** — General guide for installing TinyMCE using a .zip package. ### Integrations Get started with TinyMCE in your preferred integration: #### Supported Integrations The following packages are thin wrappers around TinyMCE to make it easier to integrate into your project: - **[React (Hosting)](https://www.tiny.cloud/docs/tinymce/latest/react-zip-host/)** — Integrate TinyMCE into your React application using a .zip package with hosting. - **[React (Bundling)](https://www.tiny.cloud/docs/tinymce/latest/react-zip-bundle/)** — Integrate TinyMCE into your React application using a .zip package with bundling. - **[Angular](https://www.tiny.cloud/docs/tinymce/latest/angular-zip/)** — Integrate TinyMCE into your Angular application using a .zip package. - **[Vue.js](https://www.tiny.cloud/docs/tinymce/latest/vue-zip/)** — Integrate TinyMCE into your Vue.js application using a .zip package. - **[Blazor](https://www.tiny.cloud/docs/tinymce/latest/blazor-zip/)** — Integrate TinyMCE into your Blazor application using a .zip package. - **[Svelte](https://www.tiny.cloud/docs/tinymce/latest/svelte-zip/)** — Integrate TinyMCE into your Svelte application using a .zip package. - **[Web Component](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-zip/)** — Integrate TinyMCE as a web component using a .zip package. #### Backend Integrations - **[Django](https://www.tiny.cloud/docs/tinymce/latest/django-zip/)** — Integrate TinyMCE into your Django application using a .zip package. - **[Laravel](https://www.tiny.cloud/docs/tinymce/latest/laravel-zip-install/)** — Integrate TinyMCE into your Laravel application using a .zip package. - **[Ruby on Rails](https://www.tiny.cloud/docs/tinymce/latest/rails-zip/)** — Integrate TinyMCE into your Ruby on Rails application using a .zip package. #### Other Integrations - **[Bootstrap](https://www.tiny.cloud/docs/tinymce/latest/bootstrap-zip/)** — Integrate TinyMCE with the Bootstrap CSS framework using a .zip package. - **[Java Swing](https://www.tiny.cloud/docs/tinymce/latest/swing/)** — Reference documentation for existing users of the end-of-life Java Swing integration. ## Installing TinyMCE using a package manager Source: https://www.tiny.cloud/docs/tinymce/latest/installation-self-hosted/ Last updated: 2026-09-28T23:17:04Z ### Quick start guide - **[Quick start: NPM/Yarn](https://www.tiny.cloud/docs/tinymce/latest/npm-projects/)** — Install and configure TinyMCE using NPM or Yarn. - **[Self-hosted trial](https://www.tiny.cloud/docs/tinymce/latest/self-hosted-trial/)** — Evaluate TinyMCE premium features and cloud services in a self-hosted environment using a trial license key. ### Integrations Get started with TinyMCE in your preferred integration: #### Supported Integrations The following packages are thin wrappers around TinyMCE to make it easier to integrate into your project: - **[React (Hosting)](https://www.tiny.cloud/docs/tinymce/latest/react-pm-host/)** — Integrate TinyMCE into your React application using a package manager with hosting. - **[React (Bundling)](https://www.tiny.cloud/docs/tinymce/latest/react-pm-bundle/)** — Integrate TinyMCE into your React application using a package manager with bundling. - **[Angular](https://www.tiny.cloud/docs/tinymce/latest/angular-pm/)** — Integrate TinyMCE into your Angular application using a package manager. - **[Vue.js](https://www.tiny.cloud/docs/tinymce/latest/vue-pm/)** — Integrate TinyMCE into your Vue.js application using a package manager. - **[Blazor](https://www.tiny.cloud/docs/tinymce/latest/blazor-pm/)** — Integrate TinyMCE into your Blazor application using a package manager. - **[Svelte](https://www.tiny.cloud/docs/tinymce/latest/svelte-pm/)** — Integrate TinyMCE into your Svelte application using a package manager. - **[Web Component](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-pm/)** — Integrate TinyMCE as a web component using a package manager. - **[jQuery](https://www.tiny.cloud/docs/tinymce/latest/jquery-pm/)** — Integrate TinyMCE with the jQuery JavaScript library using a package manager. #### Backend Integrations - **[Laravel](https://www.tiny.cloud/docs/tinymce/latest/laravel-composer-install/)** — Integrate TinyMCE into your Laravel application using Composer. - **[Ruby on Rails](https://www.tiny.cloud/docs/tinymce/latest/rails-third-party/)** — Integrate TinyMCE into your Ruby on Rails application using a package manager. - **[Express.js](https://www.tiny.cloud/docs/tinymce/latest/expressjs-pm/)** — Integrate TinyMCE into your Express.js application using a package manager. #### Other Integrations - **[Shadow DOM](https://www.tiny.cloud/docs/tinymce/latest/shadow-dom/)** — Integrate TinyMCE with Shadow DOM using a package manager. - **[PHP Projects](https://www.tiny.cloud/docs/tinymce/latest/php-projects/)** — Install and configure TinyMCE in PHP projects. - **[.NET Projects](https://www.tiny.cloud/docs/tinymce/latest/dotnet-projects/)** — Install and configure TinyMCE in .NET projects. - **[WordPress](https://www.tiny.cloud/docs/tinymce/latest/wordpress/)** — Integrate TinyMCE into your WordPress site. - **[Java Swing](https://www.tiny.cloud/docs/tinymce/latest/swing/)** — Reference documentation for existing users of the end-of-life Java Swing integration. ### Package managers You can install TinyMCE using various package managers: | **Package Manager** | **Command** | | --- | --- | | [npm](https://www.npmjs.com/package/tinymce) | `npm install tinymce` | | [Yarn](https://yarnpkg.com/package/tinymce) | `yarn add tinymce` | | [Composer (PHP)](https://packagist.org/packages/tinymce/tinymce) | `composer require tinymce/tinymce` | | [NuGet (.NET)](https://www.nuget.org/packages/TinyMCE) | `Install-Package tinymce` | ## Installing TinyMCE using the Tiny Cloud Source: https://www.tiny.cloud/docs/tinymce/latest/installation-cloud/ Last updated: 2026-09-11T04:39:13Z ### Cloud quick start guides Two paths lead to a working editor. Follow the step-by-step guide, or install the official agent skill and let an AI coding agent perform the setup. - **[Cloud quick start guide](https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start/)** — Get started with TinyMCE using the Tiny Cloud in minutes. - **[AI quick start guide](https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start-ai/)** — Install the official TinyMCE agent skill and have an AI coding agent add and configure the editor. ### Integrations Get started with TinyMCE in your preferred integration: #### Supported Integrations The following packages are thin wrappers around TinyMCE to make it easier to integrate into your project: - **[React](https://www.tiny.cloud/docs/tinymce/latest/react-cloud/)** — Integrate TinyMCE into your React application using the Tiny Cloud. - **[Angular](https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/)** — Integrate TinyMCE into your Angular application using the Tiny Cloud. - **[Vue.js](https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/)** — Integrate TinyMCE into your Vue.js application using the Tiny Cloud. - **[Blazor](https://www.tiny.cloud/docs/tinymce/latest/blazor-cloud/)** — Integrate TinyMCE into your Blazor application using the Tiny Cloud. - **[Svelte](https://www.tiny.cloud/docs/tinymce/latest/svelte-cloud/)** — Integrate TinyMCE into your Svelte application using the Tiny Cloud. - **[Web Component](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/)** — Integrate TinyMCE as a web component using the Tiny Cloud. - **[jQuery](https://www.tiny.cloud/docs/tinymce/latest/jquery-cloud/)** — Integrate TinyMCE with the jQuery JavaScript library using the Tiny Cloud. #### Backend Integrations - **[Django](https://www.tiny.cloud/docs/tinymce/latest/django-cloud/)** — Integrate TinyMCE into your Django application using the Tiny Cloud. - **[Laravel](https://www.tiny.cloud/docs/tinymce/latest/laravel-tiny-cloud/)** — Integrate TinyMCE into your Laravel application using the Tiny Cloud. - **[Ruby on Rails](https://www.tiny.cloud/docs/tinymce/latest/rails-cloud/)** — Integrate TinyMCE into your Ruby on Rails application using the Tiny Cloud. #### Other Integrations - **[Bootstrap](https://www.tiny.cloud/docs/tinymce/latest/bootstrap-cloud/)** — Integrate TinyMCE with the Bootstrap CSS framework using the Tiny Cloud. ## Introduction to TinyMCE Source: https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tinymce/ Last updated: 2026-09-28T00:27:52Z TinyMCE is a rich-text editor that allows users to create formatted content within a user-friendly interface. **Example** ```js tinymce.init({ selector: 'textarea#default-editor', plugins: [ "advlist", "anchor", "autolink", "charmap", "code", "fullscreen", "help", "image", "insertdatetime", "link", "lists", "media", "preview", "searchreplace", "table", "visualblocks", ], toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", }); ``` ### Overview TinyMCE generates HTML5 output and supports various content elements including lists, tables, and other formatting options. The editor’s functionality can be extended through plugins and customizations, or restricted to meet specific requirements. The user interface can be customized to integrate seamlessly with applications or webpages. ### Integration Options TinyMCE integrates with frameworks and Content Management Systems (CMSs) through multiple deployment methods: - **[Using the Tiny Cloud](https://www.tiny.cloud/docs/tinymce/latest/installation-cloud/)** — The fastest way to get started with TinyMCE. Load from the Tiny Cloud CDN for automatic updates to the latest version. - **[Using a package manager](https://www.tiny.cloud/docs/tinymce/latest/installation-self-hosted/)** — Install TinyMCE locally using NPM, Yarn, or other package managers for self-hosted solutions. - **[Direct download](https://www.tiny.cloud/docs/tinymce/latest/installation-zip/)** — Download and install TinyMCE from a .zip archive for traditional web deployments. ### Getting Started with TinyMCE TinyMCE is a rich text editor designed for web applications. To install TinyMCE, include the required script and initialize the editor with a minimal configuration. Upon registration, an API key is provided along with a corresponding code snippet for integration. ## Invalid API key Source: https://www.tiny.cloud/docs/tinymce/latest/invalid-api-key/ Last updated: 2026-09-28T00:27:52Z > **Important:** **Starting in early 2024, all editors on our cloud platform will be required to have a valid API key.** Without a valid API key, **your editor will transition to read-only mode**, limiting your ability to make changes. > > Affected users will receive a [notification in their editor](https://www.tiny.cloud/docs/tinymce/latest/cloud-troubleshooting/#A-valid-API-key-is-required-starting-2024-to-continue-using-TinyMCE.-Please-alert-your-admin-to-sign-up-to-get-your-free-API-key.). If you receive this notification, please contact the Administrator for your application/site. Admins will need to [get a valid API key](https://www.tiny.cloud/my-account/integrate/) and paste it into the code to continue using TinyMCE. ### How will I know if this change affects me? If TinyMCE detects an invalid API key, it will display a notification. If you know or suspect you have been actively hiding or suppressing this notification, please remove these overrides. If you then see a notification, please follow the instructions to resolve the issue. If no notification appears, you are not affected. ### How can I get an API key? The Admin who owns your TinyMCE implementation will need to log in [here](https://www.tiny.cloud/my-account/integrate/) to get your account’s API key. If you do not have an account yet, you can [sign up for a free API key](https://www.tiny.cloud/pricing/). Paid users can [contact our Technical Support](https://www.tiny.cloud/contact/) team for help. ### What will happen if I don’t provide a valid API key? All editors on our cloud platform without a valid API key will be set to read-only mode in the beginning of 2024. If you self-host TinyMCE, you will not be impacted. ### Why is an API key required? We require an API key for all TinyMCE editors on our cloud platform in order to maintain the quality of our service, ensure reliable security, and keep up with industry best practices. ### If TinyMCE is free and open source, why is an API key required? TinyMCE can be accessed through a variety of licensing and hosting methods, including both free and paid options. The free, open source option for TinyMCE is available under the *GNU General Public License Version 2 or later*. Users must self-host TinyMCE to take advantage of the open source license. **This type of license does not require an API key**. The cloud hosted option for TinyMCE is available under commercial license, as described [here](https://www.tiny.cloud/legal/cloud-use-subscription-agreement/). **This type of license requires an active API key.** If you are receiving an error notification, you are using the cloud-hosted option of TinyMCE under a commercial license. If you want to continue using TinyMCE without an API key, you will need to either migrate to the free, open source, self-hosted option or use a 3rd party-hosted CDN option under an MIT license. ### I installed the NPM package, which I assumed would be self-hosted. Why am I getting a notification that an API key is required? Our integrations default to using the TinyMCE Cloud service. If you’re receiving the notification that an API key is required, it means that you’re using the cloud-hosted option for TinyMCE under commercial license which requires a valid API key and allows for 1,000 editor loads per month for free. Please [read our docs](https://www.tiny.cloud/docs/tinymce/latest/installation/) to learn how to self-host TinyMCE or [sign up here](https://www.tiny.cloud/pricing/) to continue using TinyMCE Cloud. ### I’ve used TinyMCE for years. Why am I now receiving notification that an API key is required? Thank you for your long-term use of TinyMCE and for selecting it for your projects. If you’re suddenly receiving this notification, it means that previous versions of the notification were hidden within your TinyMCE editor. We are working to ensure that all active users of TinyMCE are aware of the API key requirement, including those that may have hidden these notifications in the past. ### What does the message "This domain is not registered with Tiny Cloud" mean? This message means that the domain attempting to use TinyMCE is not registered with Tiny Cloud. Starting in 2024, a registered domain will be required to continue using TinyMCE. ### How can I resolve the issue of an unregistered domain? To resolve this issue, please inform your administrator and request that they review the list of approved domains on your Tiny Account. If necessary, they will need to add the unregistered domain to the approved list. [Learn more here](https://www.tiny.cloud/docs/tinymce/latest/cloud-troubleshooting/#This-domain-is-not-registered-with-Tiny-Cloud.-To-continue-using-TinyMCE-a-registered-domain-is-required-starting-2024.-Please-alert-your-admin-to-review-the-approved-domains-and-add-this-one-if-required.). ### Where can I view the list of approved domains for my Tiny Cloud account? You can view the list of approved domains by logging into [your Tiny Account](https://www.tiny.cloud/my-account/domains/). The approved domains are stored against your API Key. ### I would prefer to self-host TinyMCE. What are my options? - If you plan to use only open-source TinyMCE features, the open-source version is available under the *GNU General Public License Version 2 or later license*. - If you want to self-host TinyMCE and use our Premium features, [get in touch with our Sales team](https://www.tiny.cloud/contact/) for a custom quote. > **Tip:** For additional information on Troubleshooting Tiny Cloud visit: [Cloud Troubleshooting](https://www.tiny.cloud/docs/tinymce/latest/cloud-troubleshooting/). ### Getting Started with TinyMCE TinyMCE is a rich text editor designed for web applications. To install TinyMCE, include the required script and initialize the editor with a minimal configuration. Upon registration, an API key is provided along with a corresponding code snippet for integration. ## Quick start: TinyMCE from .zip Source: https://www.tiny.cloud/docs/tinymce/latest/zip-install/ Last updated: 2026-09-11T04:39:13Z ### Install TinyMCE using a .zip package TinyMCE 8 is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a TinyMCE editor to a web page using a TinyMCE .zip package. ### Deploy TinyMCE from a .zip archive 1. Download TinyMCE. - For Self-hosted Enterprise customers, visit [Tiny - Self-hosted releases](https://www.tiny.cloud/get-tiny/self-hosted/) - For the self-hosted TinyMCE community edition, visit [Tiny Account - Downloads](https://www.tiny.cloud/my-account/downloads/) 2. Unzip the archive into a public folder of your webserver, such as: ```sh unzip tinymce_latest.zip -d /path/to/webserver/public/ ``` The location of the main TinyMCE script will be: `/path/to/webserver/public/tinymce/js/tinymce/tinymce.min.js`. > **Note:** For commercial customers using premium plugins, you can install the `tinymce-premium` NPM package and configure premium plugins using the `external_plugins` option. For more information, see: [`external_plugins` configuration option](https://www.tiny.cloud/docs/tinymce/latest/editor-important-options/#external_plugins) and [Installing premium plugins from NPM](https://www.tiny.cloud/docs/tinymce/latest/npm-projects/#install-premium-plugins). ### Include the TinyMCE script Include the following line of code in the `` of a HTML page: ```html ``` ### Initialize TinyMCE as part of a web form Initialize TinyMCE 8 on any element (or elements) on the web page by passing an object containing a `selector` value to `tinymce.init()`. The `selector` value can be any valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). For example, to replace ` ``` Adding this content to an HTML file and opening it in a web browser will load a TinyMCE editor, such as: **Example** ```js tinymce.init({ selector: 'textarea#default' }); ``` ### Save the content from the editor To retrieve content from the editor, either process the content with a form handler or use the [getContent API](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#getContent). If you use a form handler, once the `
` is submitted, TinyMCE 8 will `POST` the content in the same way as a normal HTML `
``` Adding this content to an HTML file and opening it in a web browser will load a TinyMCE editor, such as: **Example** ```js tinymce.init({ selector: 'textarea#default' }); ``` ### Save the content from the editor To retrieve content from the editor, either process the content with a form handler or use the [getContent API](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#getContent). If you use a form handler, once the `
` is submitted, TinyMCE 8 will `POST` the content in the same way as a normal HTML ` ``` Every plugin above is included with TinyMCE, so this configuration requires no further setup. To start from a minimal editor instead, pass only the `selector` and add options as needed. Opening the page in a web browser loads a TinyMCE editor: **Example** ```js tinymce.init({ selector: 'textarea#cloud-quick-start', plugins: [ 'advlist', 'anchor', 'autolink', 'charmap', 'code', 'codesample', 'emoticons', 'fullscreen', 'help', 'image', 'insertdatetime', 'link', 'lists', 'media', 'preview', 'searchreplace', 'table', 'visualblocks', 'wordcount' ], menubar: 'file edit view insert format tools table help', toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | charmap emoticons codesample | code preview fullscreen | removeformat help', height: 500 }); ``` The demo above runs the same configuration as the example. For an editor with every premium plugin enabled, see the [full featured demo](https://www.tiny.cloud/docs/tinymce/latest/full-featured-premium-demo/). ### Approve the application domain An application served from any origin other than `localhost` requires its domain to be added to the approved domains stored against the API key. Until the domain is approved, the editor displays the notice "This domain is not registered with Tiny Cloud. Please see the quick start guide or create an account." To remove the notice, add the domain to the approved domains in the [Tiny Account](https://www.tiny.cloud/my-account/domains/). Local development on `localhost` works without this step, so it can be deferred until the application is deployed or served from a custom host. For the diagnostic steps when the notice persists, see [Domain not registered](https://www.tiny.cloud/docs/tinymce/latest/cloud-troubleshooting/#domain-not-registered). ### Next Steps For information on: - Getting and setting the editor content, see: [`getContent`](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#getContent) and [`setContent`](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#setContent). - Customizing TinyMCE, see: [Basic Setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The three editor modes, see: - [TinyMCE classic editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-classic/). - [TinyMCE inline editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/). - [TinyMCE distraction-free editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-distraction-free/). - Adding TinyMCE plugins, see: [Work with plugins to extend TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/work-with-plugins/). - Localizing the TinyMCE editor, see: [Localize TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/localize-your-language/). - For information on the CSS required to render some TinyMCE elements outside of the editor, see: [CSS for rendering TinyMCE content outside the editor](https://www.tiny.cloud/docs/tinymce/latest/editor-content-css/). # Framework Integrations: Frontend Frameworks ## Bundling TinyMCE from a .zip package in Angular Source: https://www.tiny.cloud/docs/tinymce/latest/angular-zip-bundle/ Last updated: 2026-01-19T04:37:32Z This guide shows how to integrate TinyMCE from a `.zip` package in an Angular application using the [TinyMCE Angular component](https://github.com/tinymce/tinymce-angular). ### Prerequisites This procedure requires [Node.js (and NPM)](https://nodejs.org/). ### Procedure 1. From a terminal or command prompt, install the [Angular CLI Tool](https://angular.dev/tools/cli) globally. ```sh npm install -g @angular/cli ``` 2. Create a new Angular project named `tinymce-angular-demo`. ```sh ng new --defaults --skip-git tinymce-angular-demo ``` 3. Navigate to the new project directory and `@tinymce/tinymce-angular`. ```sh cd tinymce-angular-demo && npm install @tinymce/tinymce-angular ``` 4. Unzip the content of the `tinymce/js` folder from the [TinyMCE zip](https://www.tiny.cloud/my-account/downloads/) into the `src` folder. 5. Create `src/app/editor.component.ts` with the following: ```ts import { Component } from '@angular/core'; import { EditorComponent } from '@tinymce/tinymce-angular'; // Ensure you import TinyMCE to register the global variable required by other components import '../tinymce/tinymce'; // DOM model import '../tinymce/models/dom/model'; // Theme import '../tinymce/themes/silver'; // Toolbar icons import '../tinymce/icons/default'; // Editor styles import '../tinymce/skins/ui/oxide/skin.js'; // Content styles, including inline UI like fake cursors import '../tinymce/skins/content/default/content.js'; import '../tinymce/skins/ui/oxide/content.js'; // Import plugins import '../tinymce/plugins/advlist'; import '../tinymce/plugins/autolink'; import '../tinymce/plugins/link'; import '../tinymce/plugins/image'; import '../tinymce/plugins/lists'; import '../tinymce/plugins/table'; import '../tinymce/plugins/code'; import '../tinymce/plugins/help'; // Include resources that a plugin lazy-loads at the run-time import '../tinymce/plugins/help/js/i18n/keynav/en.js'; import '../tinymce/plugins/wordcount'; @Component({ selector: 'app-editor', standalone: true, imports: [EditorComponent], template: ` ` }) export class MyEditorComponent { init: EditorComponent['init'] = { height: 500, plugins: 'advlist autolink lists link image table code help wordcount', toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist | help' }; } ``` 6. Update `app.component.ts` to import `MyEditorComponent`. ```ts import { Component } from '@angular/core'; import { MyEditorComponent } from './editor.component'; @Component({ selector: 'app-root', standalone: true, imports: [MyEditorComponent], template: `

TinyMCE Angular Demo

` }) export class AppComponent {} ``` 7. Run the Angular development server ```sh ng serve ``` ### Other resources - For examples of the TinyMCE integration, see: [the tinymce-angular storybook](https://tinymce.github.io/tinymce-angular/). - For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). - For information on customizing: - TinyMCE integration, see: [Angular framework Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/). - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The Angular application, see: [the Angular documentation](https://angular.dev/). ## Bundling TinyMCE from a .zip package in React Source: https://www.tiny.cloud/docs/tinymce/latest/react-zip-bundle/ Last updated: 2026-01-19T04:37:32Z This shows how to self-host and bundle TinyMCE from a `.zip` package into a React application using the [TinyMCE React component](https://github.com/tinymce/tinymce-react). ### Prerequisites This procedure requires [Node.js (and NPM)](https://nodejs.org/). ### Procedure 1. Use [Vite](https://github.com/vitejs/vite) and [React SWC](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc) to create a new React project named `tinymce-react-demo`. ```sh # NPM 7+, extra double-dash is needed npm create vite@5 tinymce-react-demo -- --template react-swc ``` 2. Navigate to the project directory and install `@tinymce/tinymce-react` ```sh cd tinymce-react-demo && npm install @tinymce/tinymce-react ``` 3. Install `script-loader` package. ```sh npm install script-loader ``` 4. Unzip the content of the `tinymce/js` folder from the [TinyMCE zip](https://www.tiny.cloud/my-account/downloads/) into the `src` folder. 5. Add `'src/tinymce'` to the `ignores` array to `+./eslint.config.js` file. Diff of `.eslint.config.js` ```patch diff --git a/eslint.config.js b/eslint.config.js index 092408a..1ab8db4 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -5,7 +5,7 @@ import reactRefresh from 'eslint-plugin-react-refresh' import tseslint from 'typescript-eslint' export default tseslint.config( - { ignores: ['dist'] }, + { ignores: ['dist', 'src/tinymce'] }, { extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ['**/*.{ts,tsx}'], ``` 6. Install `vite-plugin-commonjs` and update `vite.config.ts` file to enable support for `CommonJS` modules. ```typescript import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import commonjs from 'vite-plugin-commonjs'; // https://vite.dev/config/ export default defineConfig({ plugins: [react(), commonjs()], }); ``` 7. Create `./src/BundledEditor.jsx` with the following code snippet: ```jsx import { Editor } from '@tinymce/tinymce-react'; // Ensure to import `tinymce` first as other components expect // a global variable `tinymce` to exist import './tinymce/tinymce'; // DOM model import './tinymce/models/dom/model' // Theme import './tinymce/themes/silver'; // Toolbar icons import './tinymce/icons/default'; // Editor styles import './tinymce/skins/ui/oxide/skin'; // Content styles, including inline UI like fake cursors import './tinymce/skins/content/default/content'; import './tinymce/skins/ui/oxide/content'; // Import plugins import './tinymce/plugins/anchor'; import './tinymce/plugins/advlist'; import './tinymce/plugins/autolink'; import './tinymce/plugins/charmap'; import './tinymce/plugins/code'; import './tinymce/plugins/media'; import './tinymce/plugins/visualblocks'; import './tinymce/plugins/fullscreen'; import './tinymce/plugins/insertdatetime'; import './tinymce/plugins/preview'; import './tinymce/plugins/help'; // Include resources that a plugin lazy-loads at the run-time import './tinymce/plugins/help/js/i18n/keynav/en'; import './tinymce/plugins/image'; import './tinymce/plugins/link'; import './tinymce/plugins/lists'; import './tinymce/plugins/searchreplace'; import './tinymce/plugins/table'; import './tinymce/plugins/wordcount'; export default function BundledEditor(props) { return ( ); } ``` 8. Add `BundleEditor` component with configuration into `App.jsx`. ```jsx import { useRef } from 'react'; import BundledEditor from './BundledEditor' import './App.css'; export default function App() { const editorRef = useRef(null); const log = () => { if (editorRef.current) { console.log(editorRef.current.getContent()); } }; return ( <> editorRef.current = editor} initialValue='

This is the initial content of the editor.

' init={{ height: 500, menubar: false, plugins: [ 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount' ], toolbar: 'undo redo | blocks | ' + 'bold italic forecolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | ' + 'removeformat | help', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' }} /> ); } ``` 9. Run the development server to test the application: ```sh npm run dev ``` ### Other resources - For information on bundling, see: [Introduction to bundling TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/introduction-to-bundling-tinymce/) - For examples of the TinyMCE React integration, see: [the tinymce-react storybook](https://tinymce.github.io/tinymce-react/). - For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). - For information on customizing: - TinyMCE integration, see: [TinyMCE React integration technical reference](https://www.tiny.cloud/docs/tinymce/latest/react-ref/). - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The React application, see: [Getting Started with Vite](https://vitejs.dev/guide/#getting-started) or [the React documentation](https://react.dev/learn). ## Bundling TinyMCE in Angular Source: https://www.tiny.cloud/docs/tinymce/latest/angular-pm-bundle/ Last updated: 2026-01-19T04:37:32Z This guide shows how to integrate TinyMCE in an Angular application using the [TinyMCE Angular component](https://github.com/tinymce/tinymce-angular). ### Prerequisites This procedure requires [Node.js (and NPM)](https://nodejs.org/). ### Procedure 1. From a terminal or command prompt, install the [Angular CLI Tool](https://angular.dev/tools/cli) globally. ```sh npm install -g @angular/cli ``` 2. Create a new Angular project named `tinymce-angular-demo`. ```sh ng new --defaults --skip-git tinymce-angular-demo ``` 3. Navigate to the newly project directory and install `tinymce` and `@tinymce/tinymce-angular`. ```sh cd tinymce-angular-demo && npm install tinymce @tinymce/tinymce-angular ``` 4. Create `src/app/editor.component.ts`. ```ts import { Component } from '@angular/core'; import { EditorComponent } from '@tinymce/tinymce-angular'; // Ensure you import TinyMCE to register the global variable required by other components import 'tinymce/tinymce'; // DOM model import 'tinymce/models/dom/model'; // Theme import 'tinymce/themes/silver'; // Toolbar icons import 'tinymce/icons/default'; // Editor styles import 'tinymce/skins/ui/oxide/skin.min.css'; // Import plugins import 'tinymce/plugins/advlist'; import 'tinymce/plugins/autolink'; import 'tinymce/plugins/link'; import 'tinymce/plugins/image'; import 'tinymce/plugins/lists'; import 'tinymce/plugins/table'; import 'tinymce/plugins/code'; import 'tinymce/plugins/help'; // Include resources that a plugin lazy-loads at the run-time import 'tinymce/plugins/help/js/i18n/keynav/en.js'; import 'tinymce/plugins/wordcount'; // Content styles, including inline UI like fake cursors import 'tinymce/skins/content/default/content.js'; import 'tinymce/skins/ui/oxide/content.js'; @Component({ selector: 'app-editor', standalone: true, imports: [EditorComponent], template: ` ` }) export class MyEditorComponent { init: EditorComponent['init'] = { height: 500, plugins: 'advlist autolink lists link image table code help wordcount', toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist | help' }; } ``` 5. Open `app.component.ts` and import `MyEditorComponent`. ```ts import { Component } from '@angular/core'; import { MyEditorComponent } from './editor.component'; @Component({ selector: 'app-root', standalone: true, imports: [MyEditorComponent], template: `

TinyMCE Angular Demo

` }) export class AppComponent {} ``` 6. Run the Angular development server ```sh ng serve ``` ### Other resources - For examples of the TinyMCE integration, see: [the tinymce-angular storybook](https://tinymce.github.io/tinymce-angular/). - For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). - For information on customizing: - TinyMCE integration, see: [Angular framework Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/). - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The Angular application, see: [the Angular documentation](https://angular.dev/). ## Bundling TinyMCE in React Source: https://www.tiny.cloud/docs/tinymce/latest/react-pm-bundle/ Last updated: 2026-01-19T04:37:32Z This guide shows how to bundle TinyMCE in a React application with the [TinyMCE React component](https://github.com/tinymce/tinymce-react). ### Prerequisites This procedure requires [Node.js (and NPM)](https://nodejs.org/). ### Procedure 1. Use [Vite](https://github.com/vitejs/vite) and [React SWC](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc) to create a new React project named `tinymce-react-demo`. ```sh # NPM 7+, extra double-dash is needed npm create vite@5 tinymce-react-demo -- --template react-swc ``` 2. Navigate to the project directory and install `@tinymce/tinymce-react` ```sh cd tinymce-react-demo && npm install @tinymce/tinymce-react ``` 3. Install the `tinymce` package. ```sh npm install tinymce ``` 4. Add `BundledEditor.jsx` and import `Editor` and `tinymce` components as below. ```jsx import { Editor } from '@tinymce/tinymce-react'; // Ensure to import tinymce first as other components expect // a global variable `tinymce` to exist import 'tinymce/tinymce'; // DOM model import 'tinymce/models/dom/model' // Theme import 'tinymce/themes/silver'; // Toolbar icons import 'tinymce/icons/default'; // Editor styles import 'tinymce/skins/ui/oxide/skin'; // Content styles, including inline UI like fake cursors import 'tinymce/skins/content/default/content'; import 'tinymce/skins/ui/oxide/content'; // Import plugins import 'tinymce/plugins/anchor'; import 'tinymce/plugins/advlist'; import 'tinymce/plugins/autolink'; import 'tinymce/plugins/charmap'; import 'tinymce/plugins/code'; import 'tinymce/plugins/media'; import 'tinymce/plugins/visualblocks'; import 'tinymce/plugins/fullscreen'; import 'tinymce/plugins/insertdatetime'; import 'tinymce/plugins/preview'; import 'tinymce/plugins/help'; // Include resources that a plugin lazy-loads at the run-time import 'tinymce/plugins/help/js/i18n/keynav/en'; import 'tinymce/plugins/image'; import 'tinymce/plugins/link'; import 'tinymce/plugins/lists'; import 'tinymce/plugins/searchreplace'; import 'tinymce/plugins/table'; import 'tinymce/plugins/wordcount'; export default function BundledEditor(props) { return ( ); } ``` 5. Add `BundledEditor` component with configuration into `App.jsx`. ```jsx import { useRef } from 'react'; import BundledEditor from './BundledEditor' import './App.css'; export default function App() { const editorRef = useRef(null); const log = () => { if (editorRef.current) { console.log(editorRef.current.getContent()); } }; return ( <> editorRef.current = editor} initialValue='

This is the initial content of the editor.

' init={{ height: 500, menubar: false, plugins: [ 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount' ], toolbar: 'undo redo | blocks | ' + 'bold italic forecolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | ' + 'removeformat | help', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' }} /> ); } ``` 6. Run the development server to test the application: ```sh npm run dev ``` ### Other resources - For information on bundling, see: [Introduction to bundling TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/introduction-to-bundling-tinymce/) - For examples of the TinyMCE React integration, see: [the tinymce-react storybook](https://tinymce.github.io/tinymce-react/). - For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). - For information on customizing: - TinyMCE integration, see: [TinyMCE React integration technical reference](https://www.tiny.cloud/docs/tinymce/latest/react-ref/). - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The React application, see: [Getting Started with Vite](https://vitejs.dev/guide/#getting-started) or [the React documentation](https://react.dev/learn). ## Bundling TinyMCE in Vue.js Source: https://www.tiny.cloud/docs/tinymce/latest/vue-pm-bundle/ Last updated: 2026-01-19T04:37:32Z This guide shows how to bundle TinyMCE into a Vue.js application using the [TinyMCE Vue.js component](https://github.com/tinymce/tinymce-vue). ### Prerequisites This procedure requires: - [Node.js LTS](https://nodejs.org/en/download/) (recommended). - [Vue CLI](https://cli.vuejs.org/) (optional). ### Procedure 1. Create a new Vue project named `tinymce-vue-demo` using the [Create Vue Tool](https://github.com/vuejs/create-vue). - From a command line or command prompt create a Vue.js 3.x project: `tinymce-vue-demo`. ```sh npm create vue@3 ``` - If a Vue.js 2.x project is required, instead use: ```sh npm create vue@2 ``` > **Note:** As per the [Vue FAQ](https://vuejs.org/about/faq.html#what-s-the-difference-between-vue-2-and-vue-3), *Vue 2 will reach End of Life by the end of 2023*. - Follow the prompts and type `tinymce-vue-demo` as the project name. 2. Navigate into the newly created directory. ```sh cd tinymce-vue-demo ``` 3. Install the `tinymce` and `tinymce-vue` packages. - For Vue.js 3.x users: ```sh npm install tinymce "@tinymce/tinymce-vue" ``` - For Vue.js 2.x users: ```sh npm install tinymce "@tinymce/tinymce-vue@^3" ``` 4. Create `src/editor.js` and set the contents to: ```js // Add the @tinymce/tinymce-vue wrapper to the bundle import Editor from '@tinymce/tinymce-vue'; // Ensure TinyMCE is imported to register the global variable required by other components import 'tinymce/tinymce'; // DOM model import 'tinymce/models/dom/model'; // Theme import 'tinymce/themes/silver'; // Toolbar icons import 'tinymce/icons/default'; // Editor styles import 'tinymce/skins/ui/oxide/skin.min.css'; // Import plugins import 'tinymce/plugins/advlist'; import 'tinymce/plugins/autolink'; import 'tinymce/plugins/link'; import 'tinymce/plugins/image'; import 'tinymce/plugins/lists'; import 'tinymce/plugins/table'; import 'tinymce/plugins/code'; import 'tinymce/plugins/help'; // Include resources that a plugin lazy-loads at the run-time import 'tinymce/plugins/help/js/i18n/keynav/en.js'; import 'tinymce/plugins/wordcount'; // Content styles, including inline UI like fake cursors import 'tinymce/skins/content/default/content.js'; import 'tinymce/skins/ui/oxide/content.js'; // Export Editor component for use in Vue components export default Editor; ``` 5. Update `src/App.vue` to import and configure `Editor`. ```jsx ``` 6. To start the development server, run: ```sh npm run dev ``` ### Other resources - For reporting issues, go to: [TinyMCE Vue.js issues](https://github.com/tinymce/tinymce-vue/issues). - For more examples of `tinymce-vue` wrapper, see: [the tinymce-vue storybook](https://tinymce.github.io/tinymce-vue/). - For information on bundling, see: [Introduction to bundling TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/introduction-to-bundling-tinymce/) - For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). - For information on customizing: - TinyMCE integration, see: [Vue.js framework Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/). - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The Vue.js application, see: [the Vue.js documentation](https://vuejs.org/). ## Bundling TinyMCE with a Svelte application Source: https://www.tiny.cloud/docs/tinymce/latest/svelte-pm-bundle/ Last updated: 2026-05-24T22:45:03Z The [Official TinyMCE Svelte component](https://github.com/tinymce/tinymce-svelte) integrates TinyMCE into [Svelte applications](https://svelte.dev/). This procedure creates a basic Svelte application containing a bundled TinyMCE editor. For examples of the TinyMCE integration, visit the [tinymce-svelte storybook](https://tinymce.github.io/tinymce-svelte/). ### Prerequisites Requires [Node.js (and npm)](https://nodejs.org/). ### Procedure 1. Use the [Vite](https://github.com/vitejs/vite) package to create a new Svelte project named `tinymce-svelte-demo`, such as: ```sh npm create vite@6 tinymce-svelte-demo -- --template svelte ``` 2. Change to the project directory. ```sh cd tinymce-svelte-demo ``` 3. Install project dependencies. ```sh npm install ``` 4. Install the `tinymce` and `tinymce-svelte` packages: ```sh npm install tinymce@^8 @tinymce/tinymce-svelte ``` 5. (Optional) For premium plugins, install the `tinymce-premium` package: ```sh npm install tinymce-premium@^8.3 ``` For more information, see: [Installing premium plugins](https://www.tiny.cloud/docs/tinymce/latest/npm-projects/#install-premium-plugins). > **Note:** For information on configuring premium plugins when bundling, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). 6. Using a text editor, create `src/editor.js` and set the contents to: ```js // Add the @tinymce/tinymce-svelte wrapper to the bundle import Editor from '@tinymce/tinymce-svelte'; // TinyMCE so the global var exists import 'tinymce/tinymce'; // DOM model import 'tinymce/models/dom/model'; // Theme import 'tinymce/themes/silver'; // Toolbar icons import 'tinymce/icons/default'; // Editor styles import 'tinymce/skins/ui/oxide/skin.min.css'; // Import plugins import 'tinymce/plugins/advlist'; import 'tinymce/plugins/autolink'; import 'tinymce/plugins/link'; import 'tinymce/plugins/image'; import 'tinymce/plugins/lists'; import 'tinymce/plugins/table'; import 'tinymce/plugins/code'; import 'tinymce/plugins/help'; import 'tinymce/plugins/wordcount'; // Import premium plugins from NPM import 'tinymce-premium/plugins/advcode'; import 'tinymce-premium/plugins/tinycomments'; // Always include the licensekeymanager plugin when using premium plugins with a commercial license. import 'tinymce-premium/plugins/licensekeymanager'; // Content styles, including inline UI like fake cursors import 'tinymce/skins/content/default/content.js'; import 'tinymce/skins/ui/oxide/content.js'; // Export Editor component for use in Svelte components export default Editor; ``` 7. Using a text editor, open `src/App.svelte` and replace the contents with: ```svelte

TinyMCE Svelte Demo

``` 8. Run the development server: ```sh npm run dev ``` The development server uses Vite to bundle your application on-the-fly. Vite processes all the `import` statements and includes the TinyMCE modules in the development bundle. 9. Build the application for production: ```sh npm run build ``` This command creates an optimized production bundle in the `dist` directory. 10. Preview the production build: ```sh npm run preview ``` 11. Update the `licenseKey` property in the editor component and include your [License Key](https://www.tiny.cloud/docs/tinymce/latest/license-key/). ### Next Steps - For information on bundling, see: [Introduction to bundling TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/introduction-to-bundling-tinymce/) - See the following for additional information: - [tinymce-svelte storybook](https://tinymce.github.io/tinymce-svelte/) - [TinyMCE basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/) - [TinyMCE Svelte integration technical reference](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/) - For the Svelte wrapper component, see: [the tinymce-svelte repository](https://github.com/tinymce/tinymce-svelte). ## Lazy-loading TinyMCE from a .zip package in Angular Source: https://www.tiny.cloud/docs/tinymce/latest/angular-zip/ Last updated: 2026-07-15T23:26:40Z This guide shows how to self-host and lazy-load TinyMCE from a `.zip` package into an Angular application using the [TinyMCE Angular component](https://github.com/tinymce/tinymce-angular). The steps below use standalone components. If using Angular Modules, see [Angular Modules](https://www.tiny.cloud/docs/tinymce/latest/angular-zip/#angular-modules). ### Prerequisites This procedure requires [Node.js (and NPM)](https://nodejs.org/). ### Procedure 1. From a terminal or command prompt, install the [Angular CLI Tool](https://angular.dev/tools/cli) globally. ```sh npm install -g @angular/cli ``` 2. Create a new Angular project named `tinymce-angular-demo` using default settings and without Git initialization. ```sh ng new --defaults --skip-git tinymce-angular-demo ``` 3. Navigate into the project directory and install `tinymce-angular`. ```sh cd tinymce-angular-demo && npm install @tinymce/tinymce-angular ``` 4. Update the root component `app.component.ts` to import `EditorComponent` component. ```ts import { Component } from '@angular/core'; import { EditorComponent } from '@tinymce/tinymce-angular'; @Component({ selector: 'app-root', imports: [EditorComponent], template: `

TinyMCE 8 Angular Demo

` }) export class AppComponent { init: EditorComponent['init'] = { plugins: 'lists link image table code help wordcount' }; } ``` 5. Unzip the content of the `tinymce/js` folder from the [TinyMCE zip](https://www.tiny.cloud/my-account/downloads/) into the `src` folder. 6. There are two options for including TinyMCE into an application: 1. Lazy load TinyMCE using the provided `TINYMCE_SCRIPT_SRC` dependency provider. ```ts import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular'; @Component({ /* ... */ standalone: true, imports: [EditorComponent], providers: [ { provide: TINYMCE_SCRIPT_SRC, useValue: '/tinymce/tinymce.min.js' } ] }) ``` 2. Add the relative path to TinyMCE to the `scripts` array in angular.json`. ```json "build": { "options": { // ... other options "scripts": [ "/tinymce.min.js" ] } } ``` 7. Then update `angular.json` to include TinyMCE and other components as `assets`. This will make them available to the application as static assets. ```json "assets": [ { "glob": "**/*", "input": "/tinymce", "output": "/tinymce" } ] ``` 8. Update the `base_url` and `suffix` options to configurate the location of other components like skins, icons, plugins, etc. ```ts export class AppComponent { /* ... */ init: EditorComponent['init'] = { /* ... */ base_url: '/tinymce', // Root for resources suffix: '.min' // Suffix to use when loading resources }; } ``` 9. Run the Angular a development server ```sh ng serve ``` ### Other resources - For examples of the TinyMCE integration, see: [the tinymce-angular storybook](https://tinymce.github.io/tinymce-angular/). - For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). - For information on customizing: - TinyMCE integration, see: [Angular framework Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/). - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The Angular application, see: [the Angular documentation](https://angular.dev/). ## Lazy-loading TinyMCE from a .zip package in React Source: https://www.tiny.cloud/docs/tinymce/latest/react-zip-host/ Last updated: 2026-01-19T04:37:32Z This guide shows how to self-host and lazy-load TinyMCE from a `.zip` package into a React application using the [TinyMCE React component](https://github.com/tinymce/tinymce-react). ### Prerequisites This procedure requires [Node.js (and NPM)](https://nodejs.org/). ### Procedure 1. Use [Vite](https://github.com/vitejs/vite) and [React SWC](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc) to create a new React project named `tinymce-react-demo`. ```sh # NPM 7+, extra double-dash is needed npm create vite@5 tinymce-react-demo -- --template react-swc ``` 2. Navigate to the project directory and install `@tinymce/tinymce-react` ```sh cd tinymce-react-demo && npm install @tinymce/tinymce-react ``` 3. Unzip the content of the `tinymce/js` folder from the [TinyMCE zip](https://www.tiny.cloud/my-account/downloads/) into the `public` folder. This will make `tinymce` avaiable to the application as static assets. 4. Add `'public/tinymce'` to the `ignores` array to `./eslint.config.js` file. Diff of `.eslint.config.js` ```patch export default tseslint.config( - { ignores: ['dist'] }, + { ignores: ['dist', 'public/tinymce'] }, { extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ['**/*.{ts,tsx}'], ``` 5. Update `App.jsx` with the below code snippet. **Note**: `tinymceSrcScript` references to the public `tinymce` using absolute root path. ```jsx import { useRef } from 'react'; import { Editor } from '@tinymce/tinymce-react'; import './App.css'; export default function App() { const editorRef = useRef(null); const log = () => { if (editorRef.current) { console.log(editorRef.current.getContent()); } }; return ( <> editorRef.current = editor} initialValue='

This is the initial content of the editor.

' init={{ height: 500, menubar: false, plugins: [ 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount' ], toolbar: 'undo redo | blocks | ' + 'bold italic forecolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | ' + 'removeformat | help', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' }} /> ); } ``` 6. Run the development server to test the application: ```sh npm run dev ``` ### Other resources - For examples of the TinyMCE React integration, see: [the tinymce-react storybook](https://tinymce.github.io/tinymce-react/). - For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). - For information on customizing: - TinyMCE integration, see: [TinyMCE React integration technical reference](https://www.tiny.cloud/docs/tinymce/latest/react-ref/). - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The React application, see: [Getting Started with Vite](https://vitejs.dev/guide/#getting-started) or [the React documentation](https://react.dev/learn). ## Lazy-loading TinyMCE from a .zip package in Vue.js Source: https://www.tiny.cloud/docs/tinymce/latest/vue-zip/ Last updated: 2026-01-19T04:37:32Z This guide shows how to self-host and lazy-load TinyMCE from a .zip package in a Vue.js application using the [TinyMCE Vue.js component](https://github.com/tinymce/tinymce-vue). ### Prerequisites This procedure requires: - [Node.js LTS](https://nodejs.org/en/download/) (recommended). - [Vue CLI](https://cli.vuejs.org/) (optional). ### Procedure 1. Create a new Vue project named `tinymce-vue-demo` using the [Create Vue](https://github.com/vuejs/create-vue) tool. - From a command line or command prompt, create a Vue.js 3.x project: `tinymce-vue-demo`. ```sh npm create vue@3 ``` - If a Vue.js 2.x project is required, instead use: ```sh npm create vue@2 ``` - Follow the prompts and type `tinymce-vue-demo` as the project name. 2. Change into the newly created directory. ```sh cd tinymce-vue-demo ``` 3. Install the `tinymce-vue` package. - For Vue.js 3.x users: ```sh npm install @tinymce/tinymce-vue ``` - For Vue.js 2.x users: ```sh npm install @tinymce/tinymce-vue@^3 ``` 4. Unzip the content of the `tinymce/js` folder from the [TinyMCE zip](https://www.tiny.cloud/my-account/downloads/) into the `public` folder. 5. Update `App.vue` with the below code snippet. **Note**: `tinymceSrcScript` references to the public `tinymce` using absolute root path. ```jsx ``` 6. To start the development server, run: ```sh npm run dev ``` ### Other resources - For examples of `tinymce-vue` wrapper, see: [the tinymce-vue storybook](https://tinymce.github.io/tinymce-vue/). - To report an issue, please go to: [TinyMCE Vue.js issues](https://github.com/tinymce/tinymce-vue/issues). - For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). - For information on customizing: - TinyMCE integration, see: [Vue.js framework Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/). - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The Vue.js application, see: [Vue.js Documentation](https://vuejs.org/v2/guide/). ## Lazy-loading TinyMCE in Angular Source: https://www.tiny.cloud/docs/tinymce/latest/angular-pm/ Last updated: 2026-07-15T23:26:40Z This guide shows how to integrate TinyMCE in an Angular application using the [TinyMCE Angular component](https://github.com/tinymce/tinymce-angular). The steps below use standalone components. If using Angular Modules, see [Angular Modules](https://www.tiny.cloud/docs/tinymce/latest/angular-pm/#angular-modules). ### Prerequisites This procedure requires [Node.js (and NPM)](https://nodejs.org/). ### Procedure 1. From a terminal or command prompt, install the [Angular CLI Tool](https://angular.dev/tools/cli) globally. ```sh npm install -g @angular/cli ``` 2. Create a new Angular project named `tinymce-angular-demo` using default settings and without Git initialization. ```sh ng new --defaults --skip-git tinymce-angular-demo ``` 3. Navigate into the project directory and install `tinymce-angular`. ```sh cd tinymce-angular-demo && npm install @tinymce/tinymce-angular ``` 4. Install the `tinymce`. ```sh npm install tinymce ``` 5. Update the root component `app.component.ts` to import `EditorComponent` component. ```ts import { Component } from '@angular/core'; import { EditorComponent } from '@tinymce/tinymce-angular'; @Component({ selector: 'app-root', imports: [EditorComponent], template: `

TinyMCE 8 Angular Demo

` }) export class AppComponent { init: EditorComponent['init'] = { plugins: 'lists link image table code help wordcount' }; } ``` 6. There are two options for including TinyMCE into an application: 1. Lazy load TinyMCE using the provided `TINYMCE_SCRIPT_SRC` dependency provider. ```ts import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular'; @Component({ /* ... */ standalone: true, imports: [EditorComponent], providers: [ { provide: TINYMCE_SCRIPT_SRC, useValue: '/tinymce/tinymce.min.js' } ] }) ``` 2. Add the relative path to TinyMCE to the `scripts` array in angular.json`. ```json "build": { "options": { // ... other options "scripts": [ "/tinymce.min.js" ] } } ``` 7. Then update `angular.json` to include TinyMCE and other components as `assets`. This will make them available to the application as static assets. ```json "assets": [ { "glob": "**/*", "input": "/tinymce", "output": "/tinymce" } ] ``` 8. Update the `base_url` and `suffix` options to configurate the location of other components like skins, icons, plugins, etc. ```ts export class AppComponent { /* ... */ init: EditorComponent['init'] = { /* ... */ base_url: '/tinymce', // Root for resources suffix: '.min' // Suffix to use when loading resources }; } ``` 9. Run the Angular a development server ```sh ng serve ``` ### Other resources - For examples of the TinyMCE integration, see: [the tinymce-angular storybook](https://tinymce.github.io/tinymce-angular/). - For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). - For information on customizing: - TinyMCE integration, see: [Angular framework Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/). - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The Angular application, see: [the Angular documentation](https://angular.dev/). ## Lazy-loading TinyMCE in Vue.js Source: https://www.tiny.cloud/docs/tinymce/latest/vue-pm/ Last updated: 2026-01-19T04:37:32Z This guide shows how to self-host and lazy-load TinyMCE in a Vue.js application using the [TinyMCE Vue.js component](https://github.com/tinymce/tinymce-vue). ### Prerequisites This procedure requires: - [Node.js LTS](https://nodejs.org/en/download/) (recommended). - [Vue CLI](https://cli.vuejs.org/) (optional). ### Procedure 1. Create a new Vue project named `tinymce-vue-demo` using the [Create Vue](https://github.com/vuejs/create-vue) tool. - From a command line or command prompt, create a Vue.js 3.x project: `tinymce-vue-demo`. ```sh npm create vue@3 ``` - If a Vue.js 2.x project is required, instead use: ```sh npm create vue@2 ``` - Follow the prompts and type `tinymce-vue-demo` as the project name. 2. Change into the newly created directory. ```sh cd tinymce-vue-demo ``` 3. Install the `tinymce` and `tinymce-vue` packages. - For Vue.js 3.x users: ```sh npm install tinymce @tinymce/tinymce-vue ``` - For Vue.js 2.x users: ```sh npm install tinymce @tinymce/tinymce-vue@^3 ``` 4. Update `App.vue` with the below code snippet. **Note**: `tinymceSrcScript` references to the public `tinymce` using absolute root path. .For example: ```jsx ``` 5. Setup a `postinstall` script to copy TinyMCE to `public` directory after each packages installation, which makes TinyMCE available to the application as static assets. 1. Install a library to help with copying assets. ```bash npm install -D fs-extra ``` 2. Add the following snipper to `postinstall.js` file. ```js import fse from 'fs-extra'; import path from 'path'; const topDir = import.meta.dirname; fse.emptyDirSync(path.join(topDir, 'public', 'tinymce')); fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'public', 'tinymce'), { overwrite: true }); ``` 3. Update `postinstall` target in `package.json` to run the `postinstall.js` script. ```json // ... other content omitted for brevity ... "scripts": { "postinstall": "node ./postinstall.js" } ``` 6. Exclude `public/tinymce` from Git tracking. ```.gitignore # ... other rules omitted for brevity ... /public/tinymce/ ``` 7. In this instance, run the `postinstall` to copy TinyMCE to the `public` directory. ```sh npm run postinstall ``` 8. To start the development server, run: ```sh npm run dev ``` ### Other resources - For examples of `tinymce-vue` wrapper, see: [the tinymce-vue storybook](https://tinymce.github.io/tinymce-vue/). - To report an issue, please go to: [TinyMCE Vue.js issues](https://github.com/tinymce/tinymce-vue/issues). - For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). - For information on customizing: - TinyMCE integration, see: [Vue.js framework Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/). - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The Vue.js application, see: [Vue.js Documentation](https://vuejs.org/v2/guide/). ## Self-hosting TinyMCE in React Source: https://www.tiny.cloud/docs/tinymce/latest/react-pm-host/ Last updated: 2026-01-19T04:37:32Z This guide shows how to self-host TinyMCE in a React application using the [TinyMCE React component](https://github.com/tinymce/tinymce-react). ### Prerequisites This procedure requires [Node.js (and NPM)](https://nodejs.org/). ### Procedure 1. Use [Vite](https://github.com/vitejs/vite) and [React SWC](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc) to create a new React project named `tinymce-react-demo`. ```sh # NPM 7+, extra double-dash is needed npm create vite@5 tinymce-react-demo -- --template react-swc ``` 2. Navigate to the project directory and install `@tinymce/tinymce-react` ```sh cd tinymce-react-demo && npm install @tinymce/tinymce-react ``` 3. Install the `tinymce` package. ```sh npm install tinymce ``` 4. Install `fs-extra` as a development dependency: ```sh npm install -D fs-extra ``` 5. Setup a `postinstall` script to copy TinyMCE to `public` directory, which automatically makes TinyMCE and other components available as static assets after each installation. Add `postinstall.js` file. ```js import fse from 'fs-extra'; import path from 'path'; const topDir = import.meta.dirname; fse.emptyDirSync(path.join(topDir, 'public', 'tinymce')); fse.copySync(path.join(topDir, 'node_modules', 'tinymce'), path.join(topDir, 'public', 'tinymce'), { overwrite: true }); ``` Update `postinstall` target in `package.json` to run the `postinstall.js` script. ```json { // ... other content omitted for brevity ... "scripts": { // ... other scripts omitted for brevity ... "postinstall": "node ./postinstall.js" } } ``` 6. Exclude `public/tinymce` from Git tracking ```.gitignore # ... other rules omitted for brevity ... /public/tinymce/ ``` 7. In this instance, run the `postinstall` to copy TinyMCE to the `public` directory. ```sh npm run postinstall ``` 8. Update `App.jsx` to include `Editor` component. **Note**: `tinymceSrcScript` references to the public `tinymce` using absolute root path. ```jsx import { useRef } from 'react'; import { Editor } from '@tinymce/tinymce-react'; import './App.css'; export default function App() { const editorRef = useRef(null); const log = () => { if (editorRef.current) { console.log(editorRef.current.getContent()); } }; return ( <> editorRef.current = editor} initialValue='

This is the initial content of the editor.

' init={{ height: 500, menubar: false, plugins: [ 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount' ], toolbar: 'undo redo | blocks | ' + 'bold italic forecolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | ' + 'removeformat | help', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' }} /> ); } ``` 9. Run the development server to test the application: ```sh npm run dev ``` ### Other resources - For examples of the TinyMCE React integration, see: [the tinymce-react storybook](https://tinymce.github.io/tinymce-react/). - For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). - For information on customizing: - TinyMCE integration, see: [TinyMCE React integration technical reference](https://www.tiny.cloud/docs/tinymce/latest/react-ref/). - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The React application, see: [Getting Started with Vite](https://vitejs.dev/guide/#getting-started) or [the React documentation](https://react.dev/learn). ## TinyMCE jQuery integration quick start guide Source: https://www.tiny.cloud/docs/tinymce/latest/jquery-cloud/ Last updated: 2026-06-03T01:46:17Z The [Official TinyMCE jQuery component](https://github.com/tinymce/tinymce-jquery) integrates TinyMCE into jQuery projects. ### Procedure This procedure creates a basic jQuery integration containing a TinyMCE editor based on our [Basic example](https://www.tiny.cloud/docs/tinymce/latest/basic-example/). 1. Open an HTML file 2. Add a ` ``` Replace `no-api-key` in the source script (` ``` 5. Add an initialization point for TinyMCE, such as: ```html
``` 6. Add the TinyMCE jQuery init script. The TinyMCE selector is defined in the jQuery prefix, and any other settings are defined in the object passed to the `tinymce` method. ```html ``` 7. Update the `api_key` property to include your [Tiny Cloud API key](https://www.tiny.cloud/auth/signup/). ### Example jQuery integration To load a TinyMCE editor similar to the [Basic example](https://www.tiny.cloud/docs/tinymce/latest/basic-example/), add the following code to an empty HTML file. ```html
``` ### TinyMCE in a jQuery UI Dialog To render TinyMCE instances inside jQuery UI dialogs, add the following code: ```js // Prevent jQuery UI dialog from blocking focusin $(document).on('focusin', function(e) { if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) { e.stopImmediatePropagation(); } }); ``` This code is required because jQuery blocks all `focusin` calls from elements outside the dialog. For a working example, [try this TinyMCE fiddle](http://fiddle.tiny.cloud/ZZhaab/4). ## TinyMCE jQuery integration quick start guide Source: https://www.tiny.cloud/docs/tinymce/latest/jquery-pm/ Last updated: 2026-06-03T01:46:17Z The [Official TinyMCE jQuery component](https://github.com/tinymce/tinymce-jquery) integrates TinyMCE into jQuery projects. ### Procedure This procedure creates a basic jQuery integration containing a TinyMCE editor based on our [Basic example](https://www.tiny.cloud/docs/tinymce/latest/basic-example/). 1. Install jQuery, TinyMCE, the TinyMCE jQuery integration and the library `fs-extra` from NPM: ```shell npm install --save jquery tinymce @tinymce/tinymce-jquery fs-extra ``` 2. Setup a `postinstall` script to copy the packages into a public directory whenever a new dependency is installed: postinstall.js ```js const fse = require('fs-extra'); const path = require('path'); const nodeModulesDir = path.join(__dirname, 'node_modules'); const publicDir = path.join(__dirname, 'public'); fse.emptyDirSync(path.join(publicDir, 'jquery')); fse.emptyDirSync(path.join(publicDir, 'tinymce')); fse.emptyDirSync(path.join(publicDir, 'tinymce-jquery')); fse.copySync(path.join(nodeModulesDir, 'jquery', 'dist'), path.join(publicDir, 'jquery'), { overwrite: true }); fse.copySync(path.join(nodeModulesDir, 'tinymce'), path.join(publicDir, 'tinymce'), { overwrite: true }); fse.copySync(path.join(nodeModulesDir, '@tinymce', 'tinymce-jquery', 'dist'), path.join(publicDir, 'tinymce-jquery'), { overwrite: true }); ``` package.json ```json { // ... snip ... "scripts": { "postinstall": "node ./postinstall.js" } } ``` 3. Run the `postinstall` script to copy the packages into your public directory: ```shell npm run postinstall ``` 4. Open an HTML file 5. Assuming the `public` directory is served at `/public`, add source scripts, such as: ```html ``` For information on self-hosting TinyMCE, see: [Installing TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/installation/). 6. Add an initialization point for TinyMCE, such as: ```html
``` 7. Add the TinyMCE jQuery init script. The TinyMCE selector is defined in the jQuery prefix, and any other settings are defined in the object passed to the `tinymce` method. ```html ``` ### Example jQuery integration To load a TinyMCE editor similar to the [Basic example](https://www.tiny.cloud/docs/tinymce/latest/basic-example/), add the following code to an empty HTML file. ```html
``` ### TinyMCE in a jQuery UI Dialog To render TinyMCE instances inside jQuery UI dialogs, add the following code: ```js // Prevent jQuery UI dialog from blocking focusin $(document).on('focusin', function(e) { if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) { e.stopImmediatePropagation(); } }); ``` This code is required because jQuery blocks all `focusin` calls from elements outside the dialog. For a working example, [try this TinyMCE fiddle](http://fiddle.tiny.cloud/ZZhaab/4). ## Using the TinyMCE .zip package with the Blazor framework Source: https://www.tiny.cloud/docs/tinymce/latest/blazor-zip/ Last updated: 2026-09-28T23:15:30Z The [Official TinyMCE Blazor component](https://github.com/tinymce/tinymce-blazor) integrates TinyMCE into [Blazor applications](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor). This procedure creates a basic Blazor application and adds a TinyMCE editor using the TinyMCE Blazor integration. The basic Blazor application is based on the following tutorial: [Microsoft .NET Blazor Tutorial - Build your first Blazor app](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/). Select from the following guides: - [Using Visual Studio Code (VS Code)](https://www.tiny.cloud/docs/tinymce/latest/blazor-zip/#using-visual-studio-code) - [Using Visual Studio](https://www.tiny.cloud/docs/tinymce/latest/blazor-zip/#using-visual-studio) - [Using a command prompt or terminal](https://www.tiny.cloud/docs/tinymce/latest/blazor-zip/#using-a-command-prompt-or-terminal) ### Using Visual Studio Code (VS Code) #### Prerequisites This procedure requires: - [Visual Studio Code (VS Code)](https://code.visualstudio.com/) - [.NET SDK](https://dotnet.microsoft.com/en-us/download) - [C# Dev Kit VS Code Extension](https://learn.microsoft.com/en-us/visualstudio/subscriptions/vs-c-sharp-dev-kit) Alternatively, the [.NET WinGet Configuration file](https://learn.microsoft.com/en-us/dotnet/core/install/windows#install-with-visual-studio-code) can be downloaded to install the necessary dependencies. #### Procedure 1. In VS Code, open the Command Palette by pressing `Ctrl+Shift+P`. Find `.NET: New Project` and select it to create a new project. 2. Select **Blazor Web App** from the list of templates and follow the steps to set up the project. 3. Using the Command Palette, find and select `.NuGet: Add NuGet Package`. Enter `TinyMCE.Blazor` and select the package along with the version to install. ### Using Visual Studio #### Prerequisites This procedure requires: - [Microsoft Visual Studio](https://docs.microsoft.com/en-us/visualstudio/windows/) - [Microsoft .NET](https://docs.microsoft.com/en-us/dotnet/core/install/) #### Procedure 1. On the Visual Studio toolbar, click the [**New Project** button](https://docs.microsoft.com/en-us/visualstudio/ide/create-new-project). 2. Select the **Blazor Web App** template and follow the steps to set up the project. 3. Use the NuGet package manager console to install the `TinyMCE.Blazor` package, such as: ```sh Install-Package TinyMCE.Blazor ``` 4. To test the application, run the application by pressing `Ctrl+F5`. ### Using a command prompt or terminal #### Prerequisites This procedure requires: - [Microsoft .NET](https://docs.microsoft.com/en-us/dotnet/core/install/) #### Procedure 1. Create a new Blazor project: ```sh dotnet new blazor -o BlazorApp --no-https ``` 2. Change into the new application directory: ```sh cd BlazorApp ``` 3. Install the TinyMCE Blazor integration: ```sh dotnet add package TinyMCE.Blazor ``` 4. Test the application using the .NET development server. - To start the development server, in the project’s root directory, run: ```sh dotnet watch run ``` This will start a local development server accessible at `http://localhost:{PORT}`, where `{PORT}` is specified in the project’s `Properties/launchSettings.json` file. - To stop the development server, select on the command line or command prompt and press *Ctrl+C*. ### Download TinyMCE Zip To use the self-hosted version of `TinyMCE`, download the [TinyMCE zip](https://www.tiny.cloud/my-account/downloads/). Unzip the content and place it in the project, such as in the `wwwroot` folder for storing public static assets. ### Post-installation 1. Verify the installation by checking the `ItemGroup` references in the project file. For example, if the project is named *BlazorApp*, the relevant file would be `BlazorApp.csproj` with the dependency referenced as follows: ```xml ``` 2. Add the `tinymce-blazor.js` script to the main page. If using the Blazor Web App, add the script in `Components/App.razor`, for example: ```html ``` > **Note:** The location of the script depends on the type of Blazor app, including Blazor Server and Blazor WebAssembly (WASM) which are not covered in this guide. > > - If using Blazor Server, add the script in `Pages/_Host.cshtml`, for example: > > ```html > > > ``` > - If using WASM, add the script in `wwwroot/index.html`, for example: > > ```html > > > ``` 3. Add the `Editor` component to a page by either: - Using the `using` directive: ```cs @using TinyMCE.Blazor ``` For example: *File:* `Pages/Index.razor` ```cs @page "/" @rendermode InteractiveServer @using TinyMCE.Blazor

Hello, world!

Welcome to your new app.

``` - Using the component with its namespace: ```cs ``` For example: *File:* `Pages/Index.razor` ```cs @page "/" @rendermode InteractiveServer @using TinyMCE.Blazor

Hello, world!

Welcome to your new app.

``` > **Important:** In a Blazor Web App, different render modes determine how components are rendered and how interactivity is handled. To enable JavaScript interactivity, ensure that `@rendermode InteractiveServer` is specified in a page component. 4. Update the `LicenseKey` option in the editor element and include your [License Key](https://www.tiny.cloud/docs/tinymce/latest/license-key/). ```cs ``` 5. To load TinyMCE from the self-hosted package instead of the Tiny Cloud, configure the `ScriptSrc` property: ```cs ``` > **Note:** The `gpl` license key is for self-hosting TinyMCE under the GNU General Public License (GPL). To use a commercial license, or to include premium plugins, replace `gpl` with a valid license key. For details, see [Setting the license](https://www.tiny.cloud/docs/tinymce/latest/license-key/#setting-the-license). ### Next Steps For information on customizing the integration, see: - [TinyMCE basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - [The TinyMCE Blazor integration technical reference](https://www.tiny.cloud/docs/tinymce/latest/blazor-ref/). ## Using the TinyMCE .zip package with the Svelte framework Source: https://www.tiny.cloud/docs/tinymce/latest/svelte-zip/ Last updated: 2025-12-10T03:38:03Z The [Official TinyMCE Svelte component](https://github.com/tinymce/tinymce-svelte) integrates TinyMCE into [Svelte applications](https://svelte.dev/). Creates a basic Svelte application containing a TinyMCE editor. For examples of the TinyMCE integration, visit the [tinymce-svelte storybook](https://tinymce.github.io/tinymce-svelte/). ### Prerequisites Requires [Node.js (and npm)](https://nodejs.org/). ### Procedure 1. Use the [Vite](https://github.com/vitejs/vite) package to create a new Svelte project named `tinymce-svelte-demo`, such as: ```sh npm create vite@6 tinymce-svelte-demo -- --template svelte ``` 2. Change to the project directory. ```sh cd tinymce-svelte-demo ``` 3. Install project dependencies. ```sh npm install ``` 4. Install the `tinymce-svelte` editor component: ```sh npm install @tinymce/tinymce-svelte ``` 5. Open `src/App.svelte` and replace the contents with: ```javascript

Hello Tiny

``` ### Run the Application Test the application using the Node.js development server. 1. To start the development server: ```sh npm run dev ``` 2. To stop the development server, use `Ctrl+C` in the terminal or command prompt. ### Next Steps - See the following for additional information: - [tinymce-svelte storybook](https://tinymce.github.io/tinymce-svelte/) - [TinyMCE basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/) - [TinyMCE Svelte integration technical reference](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/) ## Using the TinyMCE .zip package with the Web Component Source: https://www.tiny.cloud/docs/tinymce/latest/webcomponent-zip/ Last updated: 2025-12-10T03:38:03Z The [Official TinyMCE Web Component](https://github.com/tinymce/tinymce-webcomponent) integrates TinyMCE into Web Component projects. This procedure creates an HTML page containing a TinyMCE editor. ### Procedure To add a TinyMCE editor to a web page using the TinyMCE Web Component: 1. Add the following meta tags to the head section of the page: ```html ``` The second `meta` element is required for the editor to function correctly on mobile devices. For information on the viewport `meta` element, see: [MDN Web Docs - Using the viewport meta tag to control layout on mobile browsers](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics). 2. Add a `script` element sourcing the TinyMCE Web Component (`tinymce-webcomponent.min.js`), such as: ```html ``` The `tinymce-webcomponent` can also be sourced from [npmjs](https://www.npmjs.com/package/@tinymce/tinymce-webcomponent). 3. Add a `script` element sourcing TinyMCE, such as: ```html ``` If a `script` element sourcing TinyMCE is not provided, the TinyMCE Web Component will load TinyMCE from the Tiny Cloud. For information on the available options for sourcing TinyMCE, see: [Loading TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#loading-tinymce). 4. Add a `tinymce-editor` element where the editor should appear. ```html ``` The default TinyMCE editor will load at this location if the page is opened in a web browser. ### Next Steps - For information on customizing, see: - The TinyMCE Web Component, see: [The TinyMCE Web Component Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/). - [TinyMCE basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). ## Using the TinyMCE package with the Blazor framework Source: https://www.tiny.cloud/docs/tinymce/latest/blazor-pm/ Last updated: 2026-09-28T23:15:30Z The [Official TinyMCE Blazor component](https://github.com/tinymce/tinymce-blazor) integrates TinyMCE into [Blazor applications](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor). This procedure creates a basic Blazor application and adds a TinyMCE editor using the TinyMCE Blazor integration. The basic Blazor application is based on the following tutorial: [Microsoft .NET Blazor Tutorial - Build your first Blazor app](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/). Select from the following guides: - [Using Visual Studio Code (VS Code)](https://www.tiny.cloud/docs/tinymce/latest/blazor-pm/#using-visual-studio-code) - [Using Visual Studio](https://www.tiny.cloud/docs/tinymce/latest/blazor-pm/#using-visual-studio) - [Using a command prompt or terminal](https://www.tiny.cloud/docs/tinymce/latest/blazor-pm/#using-a-command-prompt-or-terminal) ### Using Visual Studio Code (VS Code) #### Prerequisites This procedure requires: - [Visual Studio Code (VS Code)](https://code.visualstudio.com/) - [.NET SDK](https://dotnet.microsoft.com/en-us/download) - [C# Dev Kit VS Code Extension](https://learn.microsoft.com/en-us/visualstudio/subscriptions/vs-c-sharp-dev-kit) Alternatively, the [.NET WinGet Configuration file](https://learn.microsoft.com/en-us/dotnet/core/install/windows#install-with-visual-studio-code) can be downloaded to install the necessary dependencies. #### Procedure 1. In VS Code, open the Command Palette by pressing `Ctrl+Shift+P`. Find `.NET: New Project` and select it to create a new project. 2. Select **Blazor Web App** from the list of templates and follow the steps to set up the project. 3. Using the Command Palette, find and select `.NuGet: Add NuGet Package`. Enter `TinyMCE.Blazor` and select the package along with the version to install. 4. To use the self-hosted version of `TinyMCE`, install the `TinyMCE` package from the Command Palette. 5. (Optional) For premium plugins, install the `tinymce-premium` package: ```sh npm install tinymce-premium@^8.3 ``` For more information, see: [Installing premium plugins](https://www.tiny.cloud/docs/tinymce/latest/npm-projects/#install-premium-plugins). ### Using Visual Studio #### Prerequisites This procedure requires: - [Microsoft Visual Studio](https://docs.microsoft.com/en-us/visualstudio/windows/) - [Microsoft .NET](https://docs.microsoft.com/en-us/dotnet/core/install/) #### Procedure 1. On the Visual Studio toolbar, click the [**New Project** button](https://docs.microsoft.com/en-us/visualstudio/ide/create-new-project). 2. Select the **Blazor Web App** template and follow the steps to set up the project. 3. Use the NuGet package manager console to install the `TinyMCE.Blazor` package, such as: ```sh Install-Package TinyMCE.Blazor ``` 4. Use the NuGet package manager console to install the `TinyMCE` package, such as: ```sh Install-Package TinyMCE ``` 5. To test the application, run the application by pressing `Ctrl+F5`. ### Using a command prompt or terminal #### Prerequisites This procedure requires: - [Microsoft .NET](https://docs.microsoft.com/en-us/dotnet/core/install/) #### Procedure 1. Create a new Blazor project: ```sh dotnet new blazor -o BlazorApp --no-https ``` 2. Change into the new application directory: ```sh cd BlazorApp ``` 3. Install the TinyMCE Blazor integration: ```sh dotnet add package TinyMCE.Blazor ``` 4. Install the `TinyMCE` package, such as: ```sh dotnet add package TinyMCE ``` 5. (Optional) For premium plugins, install the `tinymce-premium` package: ```sh npm install tinymce-premium@^8.3 ``` For more information, see: [Installing premium plugins](https://www.tiny.cloud/docs/tinymce/latest/npm-projects/#install-premium-plugins). 6. Test the application using the .NET development server. - To start the development server, in the project’s root directory, run: ```sh dotnet watch run ``` This will start a local development server accessible at `http://localhost:{PORT}`, where `{PORT}` is specified in the project’s `Properties/launchSettings.json` file. - To stop the development server, select on the command line or command prompt and press *Ctrl+C*. ### Post-installation 1. Verify the installation by checking the `ItemGroup` references in the project file. For example, if the project is named *BlazorApp*, the relevant file would be `BlazorApp.csproj` with the dependency referenced as follows: ```xml ``` 2. Add the `tinymce-blazor.js` script to the main page. If using the Blazor Web App, add the script in `Components/App.razor`, for example: ```html ``` > **Note:** The location of the script depends on the type of Blazor app, including Blazor Server and Blazor WebAssembly (WASM) which are not covered in this guide. > > - If using Blazor Server, add the script in `Pages/_Host.cshtml`, for example: > > ```html > > > ``` > - If using WASM, add the script in `wwwroot/index.html`, for example: > > ```html > > > ``` 3. Add the `Editor` component to a page by either: - Using the `using` directive: ```cs @using TinyMCE.Blazor ``` For example: *File:* `Pages/Index.razor` ```cs @page "/" @rendermode InteractiveServer @using TinyMCE.Blazor

Hello, world!

Welcome to your new app.

``` - Using the component with its namespace: ```cs ``` For example: *File:* `Pages/Index.razor` ```cs @page "/" @rendermode InteractiveServer @using TinyMCE.Blazor

Hello, world!

Welcome to your new app.

``` > **Important:** In a Blazor Web App, different render modes determine how components are rendered and how interactivity is handled. To enable JavaScript interactivity, ensure that `@rendermode InteractiveServer` is specified in a page component. 4. Update the `LicenseKey` option in the editor element and include your [License Key](https://www.tiny.cloud/docs/tinymce/latest/license-key/). ```cs ``` 5. To load TinyMCE from the self-hosted package instead of the Tiny Cloud, configure the `ScriptSrc` property: ```cs ``` > **Note:** The `gpl` license key is for self-hosting TinyMCE under the GNU General Public License (GPL). To use a commercial license, or to include premium plugins, replace `gpl` with a valid license key. For details, see [Setting the license](https://www.tiny.cloud/docs/tinymce/latest/license-key/#setting-the-license). ### Next Steps For information on customizing the integration, see: - [TinyMCE basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - [The TinyMCE Blazor integration technical reference](https://www.tiny.cloud/docs/tinymce/latest/blazor-ref/). ## Using the TinyMCE package with the Svelte framework Source: https://www.tiny.cloud/docs/tinymce/latest/svelte-pm/ Last updated: 2025-12-10T03:38:03Z The [Official TinyMCE Svelte component](https://github.com/tinymce/tinymce-svelte) integrates TinyMCE into [Svelte applications](https://svelte.dev/). Creates a basic Svelte application containing a TinyMCE editor. For examples of the TinyMCE integration, visit the [tinymce-svelte storybook](https://tinymce.github.io/tinymce-svelte/). ### Prerequisites Requires [Node.js (and npm)](https://nodejs.org/). ### Procedure 1. Use the [Vite](https://github.com/vitejs/vite) package to create a new Svelte project named `tinymce-svelte-demo`, such as: ```sh npm create vite@6 tinymce-svelte-demo -- --template svelte ``` 2. Change to the project directory. ```sh cd tinymce-svelte-demo ``` 3. Install project dependencies. ```sh npm install ``` 4. Install the `tinymce` and `tinymce-svelte` packages: ```sh npm install tinymce@^8 @tinymce/tinymce-svelte ``` 5. (Optional) For premium plugins, install the `tinymce-premium` package: ```sh npm install tinymce-premium@^8.3 ``` For more information, see: [Installing premium plugins](https://www.tiny.cloud/docs/tinymce/latest/npm-projects/#install-premium-plugins). 6. Install the `vite-plugin-static-copy` development dependency: ```sh npm install -D vite-plugin-static-copy ``` 7. Configure `vite.config.js` to copy TinyMCE to the `public/` directory: ```js import { defineConfig } from 'vite' import { svelte } from '@sveltejs/vite-plugin-svelte' import { viteStaticCopy } from 'vite-plugin-static-copy' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ viteStaticCopy({ targets: [ { src: 'node_modules/tinymce/*', dest: 'tinymce' } ] }), svelte() ], }) ``` 8. Open `src/App.svelte` and replace the contents with: ```svelte

Hello Tiny

``` ### Run the Application Test the application using the Node.js development server. 1. To start the development server: ```sh npm run dev ``` 2. To stop the development server, use `Ctrl+C` in the terminal or command prompt. ### Next Steps - See the following for additional information: - [tinymce-svelte storybook](https://tinymce.github.io/tinymce-svelte/) - [TinyMCE basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/) - [TinyMCE Svelte integration technical reference](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/) ## Using the TinyMCE package with the Web Component Source: https://www.tiny.cloud/docs/tinymce/latest/webcomponent-pm/ Last updated: 2025-12-10T03:38:03Z The [Official TinyMCE Web Component](https://github.com/tinymce/tinymce-webcomponent) integrates TinyMCE into Web Component projects. This procedure creates an HTML page containing a TinyMCE editor. ### Procedure To add a TinyMCE editor to a web page using the TinyMCE Web Component: 1. Add the following meta tags to the head section of the page: ```html ``` The second `meta` element is required for the editor to function correctly on mobile devices. For information on the viewport `meta` element, see: [MDN Web Docs - Using the viewport meta tag to control layout on mobile browsers](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics). 2. Add the `tinymce` and `tinymce-webcomponent` packages, such as: ```sh npm install tinymce @tinymce/tinymce-webcomponent ``` 3. (Optional) For premium plugins, install the `tinymce-premium` package: ```sh npm install tinymce-premium@^8.3 ``` For more information, see: [Installing premium plugins](https://www.tiny.cloud/docs/tinymce/latest/npm-projects/#install-premium-plugins). 4. Add a `script` element sourcing the output file, such as: ```html ``` If a `script` element sourcing TinyMCE is not provided, the TinyMCE Web Component will load TinyMCE from the Tiny Cloud. 5. Add a `tinymce-editor` element where the editor should appear. ```html ``` The default TinyMCE editor will load at this location if the page is opened in a web browser. ### Next Steps - For information on customizing, see: - The TinyMCE Web Component, see: [The TinyMCE Web Component Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/). - [TinyMCE basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). ## Using TinyMCE from the Tiny Cloud CDN with the Blazor framework Source: https://www.tiny.cloud/docs/tinymce/latest/blazor-cloud/ Last updated: 2026-09-28T23:15:30Z The [Official TinyMCE Blazor component](https://github.com/tinymce/tinymce-blazor) integrates TinyMCE into [Blazor applications](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor). This procedure creates a basic Blazor application and adds a TinyMCE editor using the TinyMCE Blazor integration. The basic Blazor application is based on the following tutorial: [Microsoft .NET Blazor Tutorial - Build your first Blazor app](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/). Select from the following guides: - [Using Visual Studio Code (VS Code)](https://www.tiny.cloud/docs/tinymce/latest/blazor-cloud/#using-visual-studio-code) - [Using Visual Studio](https://www.tiny.cloud/docs/tinymce/latest/blazor-cloud/#using-visual-studio) - [Using a command prompt or terminal](https://www.tiny.cloud/docs/tinymce/latest/blazor-cloud/#using-a-command-prompt-or-terminal) ### Using Visual Studio Code (VS Code) #### Prerequisites This procedure requires: - [Visual Studio Code (VS Code)](https://code.visualstudio.com/) - [.NET SDK](https://dotnet.microsoft.com/en-us/download) - [C# Dev Kit VS Code Extension](https://learn.microsoft.com/en-us/visualstudio/subscriptions/vs-c-sharp-dev-kit) Alternatively, the [.NET WinGet Configuration file](https://learn.microsoft.com/en-us/dotnet/core/install/windows#install-with-visual-studio-code) can be downloaded to install the necessary dependencies. #### Procedure 1. In VS Code, open the Command Palette by pressing `Ctrl+Shift+P`. Find `.NET: New Project` and select it to create a new project. 2. Select **Blazor Web App** from the list of templates and follow the steps to set up the project. 3. Using the Command Palette, find and select `.NuGet: Add NuGet Package`. Enter `TinyMCE.Blazor` and select the package along with the version to install. ### Using Visual Studio #### Prerequisites This procedure requires: - [Microsoft Visual Studio](https://docs.microsoft.com/en-us/visualstudio/windows/) - [Microsoft .NET](https://docs.microsoft.com/en-us/dotnet/core/install/) #### Procedure 1. On the Visual Studio toolbar, click the [**New Project** button](https://docs.microsoft.com/en-us/visualstudio/ide/create-new-project). 2. Select the **Blazor Web App** template and follow the steps to set up the project. 3. Use the NuGet package manager console to install the `TinyMCE.Blazor` package, such as: ```sh Install-Package TinyMCE.Blazor ``` 4. To test the application, run the application by pressing `Ctrl+F5`. ### Using a command prompt or terminal #### Prerequisites This procedure requires: - [Microsoft .NET](https://docs.microsoft.com/en-us/dotnet/core/install/) #### Procedure 1. Create a new Blazor project: ```sh dotnet new blazor -o BlazorApp --no-https ``` 2. Change into the new application directory: ```sh cd BlazorApp ``` 3. Install the TinyMCE Blazor integration: ```sh dotnet add package TinyMCE.Blazor ``` 4. Test the application using the .NET development server. - To start the development server, in the project’s root directory, run: ```sh dotnet watch run ``` This will start a local development server accessible at `http://localhost:{PORT}`, where `{PORT}` is specified in the project’s `Properties/launchSettings.json` file. - To stop the development server, select on the command line or command prompt and press *Ctrl+C*. ### Post-installation 1. Verify the installation by checking the `ItemGroup` references in the project file. For example, if the project is named *BlazorApp*, the relevant file would be `BlazorApp.csproj` with the dependency referenced as follows: ```xml ``` 2. Add the `tinymce-blazor.js` script to the main page. If using the Blazor Web App, add the script in `Components/App.razor`, for example: ```html ``` > **Note:** The location of the script depends on the type of Blazor app, including Blazor Server and Blazor WebAssembly (WASM) which are not covered in this guide. > > - If using Blazor Server, add the script in `Pages/_Host.cshtml`, for example: > > ```html > > > ``` > - If using WASM, add the script in `wwwroot/index.html`, for example: > > ```html > > > ``` 3. Add the `Editor` component to a page by either: - Using the `using` directive: ```cs @using TinyMCE.Blazor ``` For example: *File:* `Pages/Index.razor` ```cs @page "/" @rendermode InteractiveServer @using TinyMCE.Blazor

Hello, world!

Welcome to your new app.

``` - Using the component with its namespace: ```cs ``` For example: *File:* `Pages/Index.razor` ```cs @page "/" @rendermode InteractiveServer @using TinyMCE.Blazor

Hello, world!

Welcome to your new app.

``` > **Important:** In a Blazor Web App, different render modes determine how components are rendered and how interactivity is handled. To enable JavaScript interactivity, ensure that `@rendermode InteractiveServer` is specified in a page component. 4. Update the `ApiKey` option in the editor element and include your [Tiny Cloud API key](https://www.tiny.cloud/auth/signup/). ```cs ``` ### Next Steps For information on customizing the integration, see: - [TinyMCE basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - [The TinyMCE Blazor integration technical reference](https://www.tiny.cloud/docs/tinymce/latest/blazor-ref/). ## Using TinyMCE from the Tiny Cloud CDN with the Svelte framework Source: https://www.tiny.cloud/docs/tinymce/latest/svelte-cloud/ Last updated: 2026-05-07T05:55:46Z The [Official TinyMCE Svelte component](https://github.com/tinymce/tinymce-svelte) integrates TinyMCE into [Svelte applications](https://svelte.dev/). Creates a basic Svelte application containing a TinyMCE editor. For examples of the TinyMCE integration, visit the [tinymce-svelte storybook](https://tinymce.github.io/tinymce-svelte/). ### Prerequisites Requires [Node.js (and npm)](https://nodejs.org/). ### Procedure 1. Use the [Vite](https://github.com/vitejs/vite) package to create a new Svelte project named `tinymce-svelte-demo`, such as: ```sh npm create vite@6 tinymce-svelte-demo -- --template svelte ``` 2. Change to the project directory. ```sh cd tinymce-svelte-demo ``` 3. Install project dependencies. ```sh npm install ``` 4. Install the `tinymce-svelte` editor component: ```sh npm install @tinymce/tinymce-svelte ``` 5. Open `src/App.svelte` and replace the contents with: ```html

Hello Tiny

``` > **Note:** Replace `no-api-key` with a valid Tiny Cloud API key. > > To register for a Tiny Cloud API key, visit the [Tiny Account sign-up page](https://www.tiny.cloud/auth/signup/). To retrieve the Tiny Cloud API key for an existing Tiny Account, login and visit the [Tiny Account Dashboard](https://www.tiny.cloud/my-account/). ### Run the Application Test the application using the Node.js development server. 1. To start the development server: ```sh npm run dev ``` 2. To stop the development server, use `Ctrl+C` in the terminal or command prompt. ### Next Steps - See the following for additional information: - [tinymce-svelte storybook](https://tinymce.github.io/tinymce-svelte/) - [TinyMCE basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/) - [TinyMCE Svelte integration technical reference](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/) ## Using TinyMCE from the Tiny Cloud CDN with the Web Component Source: https://www.tiny.cloud/docs/tinymce/latest/webcomponent-cloud/ Last updated: 2026-05-07T05:55:46Z The [Official TinyMCE Web Component](https://github.com/tinymce/tinymce-webcomponent) integrates TinyMCE into Web Component projects. This procedure creates an HTML page containing a TinyMCE editor. ### Procedure To add a TinyMCE editor to a web page using the TinyMCE Web Component: 1. Add the following meta tags to the head section of the page: ```html ``` The second `meta` element is required for the editor to function correctly on mobile devices. For information on the viewport `meta` element, see: [MDN Web Docs - Using the viewport meta tag to control layout on mobile browsers](https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_basics). 2. Add a `script` element sourcing the TinyMCE Web Component (`tinymce-webcomponent.js`), such as: ```html ``` The `tinymce-webcomponent` can also be sourced from [npmjs](https://www.npmjs.com/package/@tinymce/tinymce-webcomponent). 3. Add a `tinymce-editor` element where the editor should appear and include your Tiny Cloud API key from [Tiny Account](https://www.tiny.cloud/my-account/). ```html ``` ### Example: adding the TinyMCE Web Component to an HTML page The following example shows the TinyMCE Web Component in an HTML page, with: - Various TinyMCE configuration options set using attributes. - TinyMCE sourced from the Tiny Cloud. **Example** ### Next Steps - For information on customizing, see: - The TinyMCE Web Component, see: [The TinyMCE Web Component Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/). - [TinyMCE basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). ## Using TinyMCE from Tiny Cloud in Angular Source: https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/ Last updated: 2026-07-15T23:26:40Z This guide shows how to integrate TinyMCE from Tiny Cloud into an Angular application using the [TinyMCE Angular component](https://github.com/tinymce/tinymce-angular). The steps below use standalone components. If using Angular Modules, see [Angular Modules](https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/#angular-modules). ### Prerequisites This procedure requires [Node.js (and NPM)](https://nodejs.org/). ### Procedure 1. From a terminal or command prompt, install the [Angular CLI Tool](https://angular.dev/tools/cli) globally. ```sh npm install -g @angular/cli ``` 2. Create a new Angular project named `tinymce-angular-demo` using default settings and without Git initialization. ```sh ng new --defaults --skip-git tinymce-angular-demo ``` 3. Navigate into the project directory and install `tinymce-angular`. ```sh cd tinymce-angular-demo && npm install @tinymce/tinymce-angular ``` 4. Update the root component `app.component.ts` to import `EditorComponent` component. ```ts import { Component } from '@angular/core'; import { EditorComponent } from '@tinymce/tinymce-angular'; @Component({ selector: 'app-root', imports: [EditorComponent], template: `

TinyMCE 8 Angular Demo

` }) export class AppComponent { init: EditorComponent['init'] = { plugins: 'lists link image table code help wordcount' }; } ``` 5. Update the `apiKey` with your own [Tiny Cloud API key](https://www.tiny.cloud/auth/signup/). 6. Run the Angular a development server ```sh ng serve ``` ### Other resources - For examples of the TinyMCE integration, see: [the tinymce-angular storybook](https://tinymce.github.io/tinymce-angular/). - For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). - For information on customizing: - TinyMCE integration, see: [Angular framework Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/). - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The Angular application, see: [the Angular documentation](https://angular.dev/). ## Using TinyMCE from Tiny Cloud in React Source: https://www.tiny.cloud/docs/tinymce/latest/react-cloud/ Last updated: 2026-05-07T05:55:46Z This guide shows how to integrate TinyMCE from Tiny Cloud into a React application using the [TinyMCE React component](https://github.com/tinymce/tinymce-react). ### Prerequisites This procedure requires [Node.js (and NPM)](https://nodejs.org/). ### Procedure 1. Use [Vite](https://github.com/vitejs/vite) and [React SWC](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc) to create a new React project named `tinymce-react-demo`. ```sh # NPM 7+, extra double-dash is needed npm create vite@5 tinymce-react-demo -- --template react-swc ``` 2. Navigate to the project directory and install `@tinymce/tinymce-react` ```sh cd tinymce-react-demo && npm install @tinymce/tinymce-react ``` 3. Update `App.jsx` to include `Editor` from `tinymce/tinymce-react` as below. ```jsx import { useRef } from 'react'; import { Editor } from '@tinymce/tinymce-react'; import './App.css'; export default function App() { const editorRef = useRef(null); const log = () => { if (editorRef.current) { console.log(editorRef.current.getContent()); } }; return ( <> editorRef.current = editor } initialValue="

This is the initial content of the editor.

" init={{ height: 500, menubar: false, plugins: [ 'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'preview', 'help', 'wordcount', ], toolbar: 'undo redo | blocks | ' + 'bold italic forecolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | ' + 'removeformat | help', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }' }} /> ); } ``` 4. Update the `apiKey` prop with your [Tiny Cloud API key](https://www.tiny.cloud/auth/signup/). 5. Run the development server to test the application: ```sh npm run dev ``` ### Other resources - For examples of the TinyMCE React integration, see: [the tinymce-react storybook](https://tinymce.github.io/tinymce-react/). - For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). - For information on customizing: - TinyMCE integration, see: [TinyMCE React integration technical reference](https://www.tiny.cloud/docs/tinymce/latest/react-ref/). - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The React application, see: [Getting Started with Vite](https://vitejs.dev/guide/#getting-started) or [the React documentation](https://react.dev/learn). ## Using TinyMCE from Tiny Cloud in Vue.js Source: https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/ Last updated: 2026-05-07T05:55:46Z This guide shows how to integrate TinyMCE from Tiny Cloud into a Vue.js application using the [TinyMCE Vue.js component](https://github.com/tinymce/tinymce-vue). ### Prerequisites This procedure requires: - [Node.js LTS](https://nodejs.org/en/download/) (recommended). - [Vue CLI](https://cli.vuejs.org/) (optional). ### Procedure 1. Create a new Vue project named `tinymce-vue-demo` using the [Create Vue](https://github.com/vuejs/create-vue) tool. - From a command line or command prompt, create a Vue.js 3.x project: `tinymce-vue-demo`. ```sh npm create vue@3 ``` - If a Vue.js 2.x project is required, instead use: ```sh npm create vue@2 ``` - Follow the prompts and type `tinymce-vue-demo` as the project name. 2. Change into the newly created directory. ```sh cd tinymce-vue-demo ``` 3. Install the `tinymce-vue` package. - For Vue.js 3.x users: ```sh npm install @tinymce/tinymce-vue ``` - For Vue.js 2.x users: ```sh npm install @tinymce/tinymce-vue@^3 ``` 4. Update `App.vue` to include `Editor` from `tinymce/tinymce-vue` as below: .For example: ```jsx ``` 5. Update the `apiKey` prop with your [Tiny Cloud API key](https://www.tiny.cloud/auth/signup/). 6. To start the development server, run: ```sh npm run dev ``` ### Other resources - For examples of `tinymce-vue` wrapper, see: [the tinymce-vue storybook](https://tinymce.github.io/tinymce-vue/). - To report an issue, please go to: [TinyMCE Vue.js issues](https://github.com/tinymce/tinymce-vue/issues). - For guides on integrating TinyMCE premium plugins, see: [Using premium plugins](https://www.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins). - For information on customizing: - TinyMCE integration, see: [Vue.js framework Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/). - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The Vue.js application, see: [Vue.js Documentation](https://vuejs.org/v2/guide/). # Framework Integrations: Backend Frameworks ## Integrating TinyMCE into an Express JS App Source: https://www.tiny.cloud/docs/tinymce/latest/expressjs-pm/ Last updated: 2026-09-28T23:15:30Z This quick start guide walks through creating a [basic Express JS application](https://expressjs.com/en/starter/generator.html) containing a TinyMCE editor. > **Note:** Tiny Cloud users should use the [Tiny Cloud quick start guide](https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start/). ### Prerequisites This procedure requires [Node.js (and npm)](https://nodejs.org/). ### Procedure 1. On a command line or command prompt, create a basic Express JS application: ```sh npx express-generator --git --no-view my_tinymce_app ``` 2. Change into the newly created directory. ```sh cd my_tinymce_app ``` 3. Add the `tinymce` package to your `package.json` with `--save`. ```sh npm install --save tinymce ``` 4. Download and install the TinyMCE and Express JS Node modules (and their dependencies): ```sh npm install ``` 5. Using a text editor, open `/path/to/my_tinymce_app/app.js` and add the following route: ```js app.use('/tinymce', express.static(path.join(__dirname, 'node_modules', 'tinymce'))); ``` For example: ```js var express = require('express'); var path = require('path'); var cookieParser = require('cookie-parser'); var logger = require('morgan'); var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); var app = express(); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); /* New Route to the TinyMCE Node module */ app.use('/tinymce', express.static(path.join(__dirname, 'node_modules', 'tinymce'))); app.use('/', indexRouter); app.use('/users', usersRouter); module.exports = app; ``` 6. Create a new javascript file containing the TinyMCE configuration (`tinymce.init`), such as: Linux/macOS/Unix: ```sh touch public/javascripts/my-tinymce-config.js ``` Windows: ```sh > type nul >public/javascripts/my-tinymce-config.js ``` 7. Add the TinyMCE configuration to the newly created javascript file (`my-tinymce-config.js`): ```js tinymce.init({ selector: 'textarea#my-expressjs-tinymce-app', license_key: 'gpl', plugins: 'lists link image table code help wordcount' }); ``` > **Note:** The `gpl` license key is for self-hosting TinyMCE under the GNU General Public License (GPL). To use a commercial license, or to include premium plugins, replace `gpl` with a valid license key. For details, see [Setting the license](https://www.tiny.cloud/docs/tinymce/latest/license-key/#setting-the-license). 8. Update `public/index.html` to include: - The document type declaration, ``. - A ` ``` 9. Test the application using the Node.js development server. - To start the development server, navigate to the `my_tinymce_app` directory and run: ```sh npm start ``` - Visit [http://localhost:3000](http://localhost:3000/) to view the application. - To stop the development server, select on the command line or command prompt and press *Ctrl+C*. ### Next Steps - For information on customizing: - TinyMCE, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The Express JS application, see: [the Express JS Documentation](https://expressjs.com/). ## Using the TinyMCE .zip package with the Django framework Source: https://www.tiny.cloud/docs/tinymce/latest/django-zip/ Last updated: 2026-09-28T23:15:30Z > **Important:** This Integration is maintained by a third-party developer. Tiny Technologies, Inc. bears no responsibility for this integration, which is not covered by the Tiny Self-Hosted Software License Agreement. For issues related to the integration, contact the third-party project directly. For information on adding TinyMCE to a Django project, try using the Python-based `django-tinymce` package. For information on setting up `django-tinymce`, see: [the django-tinymce Documentation](https://django-tinymce.readthedocs.io/en/latest/index.html). To download TinyMCE and use it with the `django-tinymce` package: 1. Get the package from [TinyMCE Downloads](https://www.tiny.cloud/get-tiny/). 2. Unzip the package and move the `'path/to/tinymce/'` directory into the django project. 3. Add a URL path to the `tinymce` directory. 4. Add the relevant configuration setting: - If you do not need the `TINYMCE_COMPRESSOR` (`TINYMCE_COMPRESSOR = False`), add `TINYMCE_JS_URL` to the project’s `settings.py` file pointing to `tinymce/tinymce.min.js`. Such as: ```py TINYMCE_JS_URL = os.path.join(MEDIA_URL, "path/to/tinymce/tinymce.min.js") TINYMCE_COMPRESSOR = False ``` - If you do need the `TINYMCE_COMPRESSOR` (`TINYMCE_COMPRESSOR = TRUE`), add `TINYMCE_JS_ROOT` to the project’s `settings.py` file pointing to the `tinymce/` root directory. Such as: ```py TINYMCE_JS_ROOT = os.path.join(MEDIA_URL, "path/to/tinymce") TINYMCE_COMPRESSOR = True ``` 5. Set `license_key` in `TINYMCE_DEFAULT_CONFIG` in the project’s `settings.py` file. `TINYMCE_DEFAULT_CONFIG` replaces the default `django-tinymce` configuration, so include any other options the editor needs. Such as: ```py TINYMCE_DEFAULT_CONFIG = { "license_key": "gpl", "height": 500, "menubar": False, "browser_spellcheck": True, "plugins": "advlist,autolink,lists,link,image,charmap,preview,anchor," "searchreplace,visualblocks,code,fullscreen,insertdatetime,media,table," "help,wordcount", "toolbar": "undo redo | blocks | bold italic backcolor | alignleft aligncenter " "alignright alignjustify | bullist numlist outdent indent | removeformat | help", } ``` > **Note:** The `gpl` license key is for self-hosting TinyMCE under the GNU General Public License (GPL). To use a commercial license, or to include premium plugins, replace `gpl` with a valid license key. For details, see [Setting the license](https://www.tiny.cloud/docs/tinymce/latest/license-key/#setting-the-license). ## Using the TinyMCE .zip package with the Laravel framework Source: https://www.tiny.cloud/docs/tinymce/latest/laravel-zip-install/ Last updated: 2026-09-28T23:15:30Z [Laravel](https://laravel.com/) is a scaleable web application framework built on PHP. This guide assists with adding TinyMCE from the TinyMCE .zip package to pages or views in Laravel. The example Laravel project created in this procedure is based on the Laravel project documented in the Laravel Docs, under [Installation Via Composer](https://laravel.com/docs/8.x/installation#installation-via-composer). The guide will create two blades: one for the JavaScript and another for the editor placeholder, to reflect how TinyMCE should be used in production environments. ### Requirements This procedure assumes the following prerequisites have been installed: - [PHP](https://www.php.net/) - [Composer](https://getcomposer.org/) - [Node.js](https://nodejs.org/) ### Procedure 1. On a command line (or command prompt), create a new Laravel project named `my-example-app` by running the following command: ```sh composer create-project laravel/laravel my-example-app ``` 2. Change into the root directory of the Laravel application, such as: ```sh cd my-example-app ``` 3. Install the required Node.js components, including [Laravel Mix](https://laravel.com/docs/8.x/mix): ```sh npm install ``` 4. Download TinyMCE. - For Self-hosted Enterprise customers, visit [Tiny - Self-hosted releases](https://www.tiny.cloud/get-tiny/self-hosted/) - For the self-hosted TinyMCE community edition, visit [Tiny Account - Downloads](https://www.tiny.cloud/my-account/downloads/) 5. Extract (or unzip) the downloaded TinyMCE `.zip` file into the `resources/js/` directory of the Laravel project, such as: ```sh unzip ../tinymce_latest.zip -d resources/js ``` 6. Add a Laravel Mix task to copy TinyMCE to the public files when Mix is run, such as: *File:* `webpack.mix.js` ```js mix.copyDirectory('resources/js/tinymce/js/tinymce', 'public/js/tinymce'); ``` 7. Run Laravel Mix to copy TinyMCE to the `public/js/` directory: ```sh npx mix ``` 8. Create a new reusable [component (`blade.php`)](https://laravel.com/docs/8.x/blade#components) for the TinyMCE configuration, such as: ```sh php artisan make:component Head/tinymceConfig ``` This will create the blade `resources/views/components/head/tinymce-config.blade.php`. 9. Open the newly created `.blade.php` file in a text editor and replace the contents with: - The TinyMCE source script. - A TinyMCE configuration. For example: *File:* `resources/views/components/head/tinymce-config.blade.php` ```html ``` > **Note:** The `gpl` license key is for self-hosting TinyMCE under the GNU General Public License (GPL). To use a commercial license, or to include premium plugins, replace `gpl` with a valid license key. For details, see [Setting the license](https://www.tiny.cloud/docs/tinymce/latest/license-key/#setting-the-license). 10. Create a second blade containing a placeholder HTML element for TinyMCE, such as: ```sh php artisan make:component Forms/tinymceEditor ``` This will create the blade `resources/views/components/forms/tinymce-editor.blade.php`. 11. Open the newly created `.blade.php` file in a text editor and replace the contents with a placeholder, matching the CSS selector provided to the `selector` option in the editor configuration. For example: *File:* `resources/views/components/forms/tinymce-editor.blade.php` ```html ``` 12. Add the blade components on the pages or views where TinyMCE is needed. The configuration blade (`Head/tinymceConfig` in this example) can be added to the `` or at the end of the `` on the target page or view. The placeholder blade (`Forms/tinymceEditor`) should be added where TinyMCE is required on the page. For example: *File:* `resources/views/welcome.blade.php` ```html TinyMCE in Laravel

TinyMCE in Laravel

``` 13. Start the Laravel development server to verify that TinyMCE loads on the page or view, such as running the following command and opening the page on the localhost. ```sh php artisan serve ``` ### Next Steps For information on: - Setting the license, see: [Setting the license](https://www.tiny.cloud/docs/tinymce/latest/license-key/#setting-the-license). - Customizing TinyMCE, see: [Basic Setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The three editor modes, see: - [TinyMCE classic editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-classic/). - [TinyMCE inline editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/). - [TinyMCE distraction-free editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-distraction-free/). - Adding TinyMCE plugins, see: [Work with plugins to extend TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/work-with-plugins/). - Localizing the TinyMCE editor, see: [Localize TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/localize-your-language/). - For information on the CSS required to render some TinyMCE elements outside of the editor, see: [CSS for rendering TinyMCE content outside the editor](https://www.tiny.cloud/docs/tinymce/latest/editor-content-css/). ## Using the TinyMCE .zip package with the Ruby on Rails framework Source: https://www.tiny.cloud/docs/tinymce/latest/rails-zip/ Last updated: 2026-09-28T23:15:30Z Self-hosted instances of TinyMCE can be integrated into Ruby on Rails projects. This procedure creates a [basic Ruby on Rails application](https://guides.rubyonrails.org/getting_started.html) containing a TinyMCE editor. ### Prerequisites This procedure requires the following programs: - [Node.js](https://nodejs.org/) - [Yarn](https://yarnpkg.com/) - [Ruby](https://www.ruby-lang.org/) - [SQLite 3+](https://sqlite.org/index.html) - [Ruby on Rails](https://rubyonrails.org/) ### Procedure On a command line or command prompt: 1. Create a new Ruby on Rails project. ```sh rails new myTinySite ``` 2. Navigate into the project directory. ```sh cd myTinySite/ ``` 3. Create a new Rails controller, such as: ```sh rails generate controller Welcome index ``` This creates a controller named `Welcome` with an action named `index`. 4. Set the project home page to `index`. 1. Using a text editor, open `config/routes.rb`, such as: ```sh nano config/routes.rb ``` 2. Add `root 'welcome#index'` to set `index` as the project home page. For example: ```ruby Rails.application.routes.draw do get 'welcome/index' root 'welcome#index' end ``` 5. Add the following lines within the `` element of `app/views/layouts/application.html.erb` to automatically include TinyMCE on pages using the `application` layout: ```html ``` > **Note:** The `gpl` license key is for self-hosting TinyMCE under the GNU General Public License (GPL). To use a commercial license, or to include premium plugins, replace `gpl` with a valid license key. For details, see [Setting the license](https://www.tiny.cloud/docs/tinymce/latest/license-key/#setting-the-license). 6. Create a ` ``` 11. Add the blade components on the pages or views where TinyMCE is needed. The configuration blade (`Head/tinymceConfig` in this example) can be added to the `` or at the end of the `` on the target page or view. The placeholder blade (`Forms/tinymceEditor`) should be added where TinyMCE is required on the page. For example: *File:* `resources/views/welcome.blade.php` ```html TinyMCE in Laravel

TinyMCE in Laravel

``` 12. Start the Laravel development server to verify that TinyMCE loads on the page or view, such as running the following command and opening the page on the localhost. ```sh php artisan serve ``` ### Next Steps For information on: - Setting the license, see: [Setting the license](https://www.tiny.cloud/docs/tinymce/latest/license-key/#setting-the-license). - Customizing TinyMCE, see: [Basic Setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The three editor modes, see: - [TinyMCE classic editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-classic/). - [TinyMCE inline editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/). - [TinyMCE distraction-free editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-distraction-free/). - Adding TinyMCE plugins, see: [Work with plugins to extend TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/work-with-plugins/). - Localizing the TinyMCE editor, see: [Localize TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/localize-your-language/). - For information on the CSS required to render some TinyMCE elements outside of the editor, see: [CSS for rendering TinyMCE content outside the editor](https://www.tiny.cloud/docs/tinymce/latest/editor-content-css/). ## Using the TinyMCE package with the Ruby on Rails framework Source: https://www.tiny.cloud/docs/tinymce/latest/rails-third-party/ Last updated: 2026-09-28T23:15:30Z > **Important:** This Integration is maintained by a third-party developer. Tiny Technologies, Inc. bears no responsibility for this integration, which is not covered by the Tiny Self-Hosted Software License Agreement. For issues related to the integration, contact the third-party project directly. Sam Pohlenz maintains the [TinyMCE Ruby on Rails gem](https://github.com/spohlenz/tinymce-rails) for integrating TinyMCE into the Ruby on Rails asset pipeline. This procedure creates a [basic Ruby on Rails application](https://guides.rubyonrails.org/getting_started.html) containing a TinyMCE editor based on our [Basic example](https://www.tiny.cloud/docs/tinymce/latest/basic-example/). ### Prerequisites This procedure requires the following programs: - [Node.js](https://nodejs.org/) - [Yarn](https://yarnpkg.com/) - [Ruby](https://www.ruby-lang.org/) - [SQLite 3+](https://sqlite.org/index.html) - [Ruby on Rails](https://rubyonrails.org/) ### Procedure On a command line or command prompt: 1. Create a new Ruby on Rails project. ```sh rails new myTinySite ``` 2. Navigate into the project directory. ```sh cd myTinySite/ ``` 3. Create a new Rails controller, such as: ```sh rails generate controller Welcome index ``` This creates a controller named `Welcome` with an action named `index`. 4. Set the project home page to `index`. 1. Using a text editor, open `config/routes.rb`, such as: ```sh nano config/routes.rb ``` 2. Add `root 'welcome#index'` to set `index` as the project home page. For example: ```ruby Rails.application.routes.draw do get 'welcome/index' root 'welcome#index' end ``` 5. Using a text editor, open the project `Gemfile` and add the line: ```sh gem 'tinymce-rails' ``` Do not add this line within a `group` - `end` element. 6. Install the `tinymce-rails` gem using `bundle`: ```sh bundle install ``` 7. Create a TinyMCE configuration file. 1. Create the `config/tinymce.yml` file: ```sh touch config/tinymce.yml ``` 2. Add a TinyMCE configuration. The configuration must be in the [YAML format](https://yaml.org/spec/1.2/spec.html), such as: ```yml license_key: gpl height: 500 menubar: false toolbar: - undo redo | blocks | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | removeformat | help plugins: - insertdatetime lists media table code help wordcount ``` > **Note:** The `gpl` license key is for self-hosting TinyMCE under the GNU General Public License (GPL). To use a commercial license, or to include premium plugins, replace `gpl` with a valid license key. For details, see [Setting the license](https://www.tiny.cloud/docs/tinymce/latest/license-key/#setting-the-license). 8. Add the following lines within the `` element of `app/views/layouts/application.html.erb` to automatically include TinyMCE on pages using the `application` layout: ```erb <%= tinymce_assets %> ``` 9. Create a ` ``` 8. Add the blade components on the pages or views where TinyMCE is needed. The configuration blade (`Head/tinymceConfig` in this example) can be added to the `` or at the end of the `` on the target page or view. The placeholder blade (`Forms/tinymceEditor`) should be added where TinyMCE is required on the page. For example: *File:* `resources/views/welcome.blade.php` ```html TinyMCE in Laravel

TinyMCE in Laravel

``` 9. Start the Laravel development server to verify that TinyMCE loads on the page or view, such as running the following command and opening the page on the localhost. ```sh php artisan serve ``` ### Next Steps For information on: - Getting and setting the editor content, see: [`getContent`](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#getContent) and [`setContent`](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#setContent). - Customizing TinyMCE, see: [Basic Setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). - The three editor modes, see: - [TinyMCE classic editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-classic/). - [TinyMCE inline editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/). - [TinyMCE distraction-free editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-distraction-free/). - Adding TinyMCE plugins, see: [Work with plugins to extend TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/work-with-plugins/). - Localizing the TinyMCE editor, see: [Localize TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/localize-your-language/). - For information on the CSS required to render some TinyMCE elements outside of the editor, see: [CSS for rendering TinyMCE content outside the editor](https://www.tiny.cloud/docs/tinymce/latest/editor-content-css/). # Framework Integrations: Other Integrations ## Bootstrap skin demo Source: https://www.tiny.cloud/docs/tinymce/latest/bootstrap-demo/ Last updated: 2022-03-30T07:08:51Z This demo shows an example form using Bootstrap together with TinyMCE and the Tiny *Bootstrap* skin and *Bootstrap* icon pack. It’s designed to closely match the *colors, forms, and buttons* of the default Bootstrap framework UI. > **Note:** The focus outline on the editor is not part of the skin. Take a look in the JS tab below for inspiration on how to add it. **Example** ```js tinymce.init({ selector: 'textarea#premiumskinsandicons-bootstrap', skin: 'bootstrap', icons: 'bootstrap', plugins: 'image lists link anchor charmap', toolbar: 'blocks | bold italic bullist numlist | link image charmap', menubar: false, setup: (editor) => { editor.on('init', () => { editor.getContainer().style.transition='border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out'; }); editor.on('focus', () => { editor.getContainer().style.boxShadow='0 0 0 .2rem rgba(0, 123, 255, .25)'; editor.getContainer().style.borderColor='#80bdff'; }); editor.on('blur', () => { editor.getContainer().style.boxShadow=''; editor.getContainer().style.borderColor=''; }); } }); ``` ## Installing TinyMCE for .NET Source: https://www.tiny.cloud/docs/tinymce/latest/dotnet-projects/ Last updated: 2026-09-11T04:39:13Z ### Install TinyMCE using NuGet TinyMCE 8 is a powerful and flexible rich text editor that can be embedded in web applications. This quick start covers how to add a TinyMCE editor to a web page using NuGet. To add TinyMCE to a .NET project, run the following on a command line: - Using the NuGet package manager console, run the following: ```sh Install-Package TinyMCE ``` - Using the `dotnet` CLI, run the following: ```sh dotnet add package TinyMCE ``` Ensure the `tinymce` directory containing the `tinymce.min.js` file is accessible for the target page or application by either: - Using a webserver route, or - Copying the `tinymce` directory to a public folder using a build tool. ### Include the TinyMCE script Include the following line of code in the `` of a HTML page: ```html ``` ### Initialize TinyMCE as part of a web form Initialize TinyMCE 8 on any element (or elements) on the web page by passing an object containing a `selector` value to `tinymce.init()`. The `selector` value can be any valid [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors). For example, to replace ` ``` Adding this content to an HTML file and opening it in a web browser will load a TinyMCE editor, such as: **Example** ```js tinymce.init({ selector: 'textarea#default' }); ``` ### Save the content from the editor To retrieve content from the editor, either process the content with a form handler or use the [getContent API](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#getContent). If you use a form handler, once the `
` is submitted, TinyMCE 8 will `POST` the content in the same way as a normal HTML `
``` Adding this content to an HTML file and opening it in a web browser will load a TinyMCE editor, such as: **Example** ```js tinymce.init({ selector: 'textarea#default' }); ``` ### Save the content from the editor To retrieve content from the editor, either process the content with a form handler or use the [getContent API](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#getContent). If you use a form handler, once the `
` is submitted, TinyMCE 8 will `POST` the content in the same way as a normal HTML ` ``` 4. Add the TinyMCE init script. ```html ``` > **Note:** The `gpl` license key is for self-hosting TinyMCE under the GNU General Public License (GPL). To use a commercial license, or to include premium plugins, replace `gpl` with a valid license key. For details, see [Setting the license](https://www.tiny.cloud/docs/tinymce/latest/license-key/#setting-the-license). ### Using TinyMCE in a Bootstrap dialog To render TinyMCE instances inside Bootstrap UI dialogs, add the following code: **Bootstrap 4 or below** ```js // Prevent Bootstrap dialog from blocking focusin $(document).on('focusin', function(e) { if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) { e.stopImmediatePropagation(); } }); ``` **Bootstrap 5 or above** ```js // Prevent Bootstrap dialog from blocking focusin document.addEventListener('focusin', (e) => { if (e.target.closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) { e.stopImmediatePropagation(); } }); ``` This code is required because Bootstrap blocks all `focusin` calls from elements outside the dialog. For a working example, [try this TinyMCE fiddle](http://fiddle.tiny.cloud/gRgaab). ## Using TinyMCE from the Tiny Cloud CDN with the Bootstrap framework Source: https://www.tiny.cloud/docs/tinymce/latest/bootstrap-cloud/ Last updated: 2026-09-28T23:15:30Z Using TinyMCE with bootstrap does not require any special configuration. The TinyMCE jQuery integration can be used with bootstrap. For information on using the jQuery integration, see: [jQuery Tiny Cloud integration](https://www.tiny.cloud/docs/tinymce/latest/jquery-cloud/). This procedure creates a basic Bootstrap integration containing a TinyMCE editor. ### Setup 1. In an HTML file, add a source script for Bootstrap JS. If the project loads Bootstrap from [https://www.bootstrapcdn.com/](https://www.bootstrapcdn.com/), use the script provided by the [Bootstrap CDN](https://www.bootstrapcdn.com/), which includes the `integrity` and `crossorigin` attributes. 2. To source TinyMCE from the Tiny Cloud, add the following `script` element to the `` of the document: ```html ``` Replace `no-api-key` in the source script (` ``` ### Using TinyMCE in a Bootstrap dialog To render TinyMCE instances inside Bootstrap UI dialogs, add the following code: **Bootstrap 4 or below** ```js // Prevent Bootstrap dialog from blocking focusin $(document).on('focusin', function(e) { if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) { e.stopImmediatePropagation(); } }); ``` **Bootstrap 5 or above** ```js // Prevent Bootstrap dialog from blocking focusin document.addEventListener('focusin', (e) => { if (e.target.closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) { e.stopImmediatePropagation(); } }); ``` This code is required because Bootstrap blocks all `focusin` calls from elements outside the dialog. For a working example, [try this TinyMCE fiddle](http://fiddle.tiny.cloud/gRgaab). ## WordPress integration Source: https://www.tiny.cloud/docs/tinymce/latest/wordpress/ Last updated: 2024-06-28T04:32:26Z > **Important:** This Integration is maintained by a third-party developer. Tiny Technologies, Inc. bears no responsibility for this integration, which is not covered by the Tiny Self-Hosted Software License Agreement. For issues related to the integration, contact the third-party project directly. To use TinyMCE in WordPress, Advanced Editor Tools is a great option. ### Advanced Editor Tools [Advanced Editor Tools](https://wordpress.org/plugins/tinymce-advanced/) is a WordPress plugin built by [Andrew Ozz](https://profiles.wordpress.org/azaozz/) that will let you add, remove, and arrange the buttons that are shown on the Visual Editor toolbar. **Some of the features added by this plugin** - Support for creating and editing tables - More options when inserting lists - Search and Replace in the editor - Ability to set Font Family and Font Size For details, visit: - [WordPress.org Plugins - Advanced Editor Tools](https://wordpress.org/plugins/tinymce-advanced/). # Framework Integrations: Technical References ## TinyMCE AI on-premises reference Source: https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-reference/ Last updated: 2026-05-28T04:31:35Z ### Environment variable reference Alphabetized. Required-ness is marked relative to a minimum working deployment. | Variable | Required | Default | Description | | --- | --- | --- | --- | | `ALLOWED_ORIGINS` | Recommended | - | Comma-separated list of CORS-allowed editor origins. Required for cross-origin editor deployments. See [Cross-origin requests](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-frameworks/#_cross_origin_requests_to_the_ai_service) for format, wildcards, and verification. | | `DATABASE_DATABASE` | Yes | - | Database name (`ai_service` is the convention). | | `DATABASE_DRIVER` | Yes | - | `mysql` or `postgres`. | | `DATABASE_HOST` | Yes | - | Database hostname or IP. | | `DATABASE_PASSWORD` | Yes | - | Database password. | | `DATABASE_PORT` | No | 3306 (MySQL) / 5432 (PostgreSQL) | Database port. | | `DATABASE_SCHEMA` | PostgreSQL only | `cs-on-premises` | PostgreSQL schema name. Pre-create or set to `public`. | | `DATABASE_SSL_CA` | No | - | Path to CA cert for database Transport Layer Security (TLS). | | `DATABASE_SSL_CERT` | No | - | Path to client cert. | | `DATABASE_SSL_KEY` | No | - | Path to client key. | | `DATABASE_USER` | Yes | - | Database user. | | `ENABLE_METRIC_LOGS` | No | `false` | Emit JSON request logs to stdout. | | `ENVIRONMENTS_MANAGEMENT_SECRET_KEY` | Yes | - | Management Panel login secret. **Not** used to sign user JSON Web Tokens (JWTs). | | `LANGFUSE_BASE_URL` | No | `https://cloud.langfuse.com` | Self-hosted Langfuse URL. | | `LANGFUSE_DEBUG` | No | - | Verbose Langfuse logging. | | `LANGFUSE_PUBLIC_KEY` | If using Langfuse | - | Langfuse public key. | | `LANGFUSE_SECRET_KEY` | If using Langfuse | - | Langfuse secret key. | | `LICENSE_KEY` | Yes | - | AI service license key (long string from Tiny). The same key is shared across all replicas of a deployment — no per-pod licensing is required. | | `LLM_TELEMETRY_ENABLED` | No | `false` | Primary OpenTelemetry switch. | | `LLM_TIMEOUT_MS` | No | 180000 | Per-request large language model (LLM) timeout in ms. Raise for large self-hosted models. | | `MCP_OAUTH_CALLBACK_URL` | If using MCP OAuth | - | URL of the OAuth callback page hosted by the integrating web application. Used as the OAuth `redirect_uri` for all OAuth-enabled MCP servers (unless overridden per server). See [OAuth 2.0 authentication](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-mcp/#mcp-oauth). | | `MCP_SERVERS` | No | - | JSON object; Model Context Protocol (MCP) server configuration. Supports static-token and OAuth 2.0 authentication per server. See [MCP integration](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-mcp/#mcp-integration). | | `MODELS` | Yes (Azure, Bedrock, Vertex, openai-compatible); recommended for all providers | - | JSON array defining exposed models. Required for Azure, Bedrock, Vertex, and openai-compatible providers. Recommended for OpenAI, Anthropic, and Google direct. See [LLM providers](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-providers/). | | `OTEL_DEBUG` | No | - | Verbose OpenTelemetry Protocol (OTLP) diagnostic logging. | | `OTEL_EXPORTER_OTLP_TRACES_ENDPOINT` | If using OTEL | - | OTLP traces endpoint URL. | | `OTEL_TRACES_SAMPLER_ARG` | No | `1.0` | OTLP sampling rate (0.0 to 1.0). | | `PROVIDERS` | Yes | - | JSON object; LLM provider configuration. See [LLM providers](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-providers/). | | `REDIS_CLUSTER_NODES` | No | - | Comma-separated `host:port[:password]` for Redis Cluster mode. | | `REDIS_DB` | No | 1 | Redis database number. | | `REDIS_HOST` | Yes | - | Redis hostname. | | `REDIS_IP_FAMILY` | No | - | Set to `6` for IPv6. | | `REDIS_PASSWORD` | No | - | Redis password. | | `REDIS_PORT` | No | 6379 | Redis port. | | `REDIS_TLS_CA` | No | - | Path to CA cert for Redis TLS. | | `REDIS_TLS_CERT` | No | - | Path to Redis client cert. | | `REDIS_TLS_ENABLE` | No | `false` | Enable Redis TLS. | | `REDIS_TLS_KEY` | No | - | Path to Redis client key. | | `REDIS_USER` | No | - | Redis username (ACL). | | `STORAGE_ACCESS_KEY_ID` | If using S3 | - | S3 access key. | | `STORAGE_ACCOUNT_KEY` | If using Azure Blob | - | Azure storage account key. | | `STORAGE_ACCOUNT_NAME` | If using Azure Blob | - | Azure storage account name. | | `STORAGE_BUCKET` | If using S3 | - | S3 bucket name. | | `STORAGE_CONTAINER` | If using Azure Blob | - | Azure container name. | | `STORAGE_DRIVER` | Yes | - | `database`, `filesystem`, `s3`, or `azure`. | | `STORAGE_ENDPOINT` | No | - | Custom endpoint (S3-compatible or Azure-compatible). | | `STORAGE_LOCATION` | If using filesystem | - | Mount point for filesystem storage. Must be writable by the container user. | | `STORAGE_REGION` | If using S3 | - | S3 region. | | `STORAGE_SECRET_ACCESS_KEY` | If using S3 | - | S3 secret access key. | | `WEBRESOURCES_ENABLED` | No | `false` | Enable web scraping endpoint forwarding. See [Web scraping and web search](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-mcp/#web-scraping-and-search). | | `WEBRESOURCES_ENDPOINT` | If web resources enabled | - | Scraper URL. | | `WEBRESOURCES_REQUEST_TIMEOUT` | No | - | Scraper request timeout in ms. | | `WEBSEARCH_ENABLED` | No | `false` | Enable web search forwarding. See [Web scraping and web search](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-mcp/#web-scraping-and-search). | | `WEBSEARCH_ENDPOINT` | If web search enabled | - | Search URL. | | `WEBSEARCH_HEADERS` | No | - | Colon-CSV format (`Header-Name: value, Another: value`). Extra headers sent to the search endpoint. Do not use JSON — see [Web scraping and web search](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-mcp/#web-scraping-and-search). | | `WEBSEARCH_REQUEST_TIMEOUT` | No | - | Search request timeout in ms. | ### Complete `docker run` reference A single command with all required environment variables for a minimal production deployment (MySQL, OpenAI, S3 storage): ```bash docker run --init -d -p 8000:8000 \ --name ai-service \ -e LICENSE_KEY='' \ -e ENVIRONMENTS_MANAGEMENT_SECRET_KEY='' \ -e DATABASE_DRIVER='mysql' \ -e DATABASE_HOST='' \ -e DATABASE_PORT='3306' \ -e DATABASE_USER='' \ -e DATABASE_PASSWORD='' \ -e DATABASE_DATABASE='ai_service' \ -e REDIS_HOST='' \ -e REDIS_PORT='6379' \ -e PROVIDERS='{"openai":{"type":"openai","apiKeys":[""]}}' \ -e MODELS='[{"id":"gpt-4.1","provider":"openai","name":"GPT-4.1","features":["conversations","reviews","actions"]}]' \ -e STORAGE_DRIVER='s3' \ -e STORAGE_BUCKET='' \ -e STORAGE_REGION='' \ -e STORAGE_ACCESS_KEY_ID='' \ -e STORAGE_SECRET_ACCESS_KEY='' \ -e ALLOWED_ORIGINS='https://' \ -e ENABLE_METRIC_LOGS='true' \ registry.containers.tiny.cloud/ai-service-tiny: ``` For PostgreSQL, change `DATABASE_DRIVER` to `'postgres'` and add `-e DATABASE_SCHEMA='cs-on-premises'` (or `'public'`). For Redis authentication, add `-e REDIS_PASSWORD=''`. For Redis TLS, add `-e REDIS_TLS_ENABLE='true'`. ### API endpoint reference | Method | Path | Auth | Description | | --- | --- | --- | --- | | GET | `/health` | None | Liveness probe. Returns `{"serviceName":"on-premises-http","uptime":}`. Not metric-logged. | | GET | `/docs/` | None | ReDoc-rendered API documentation. | | GET | `/v1/api/doc.json` | None | OpenAPI 3 JSON spec. | | GET | `/panel/` | Management secret (login form) | Management Panel UI. Sign in with `ENVIRONMENTS_MANAGEMENT_SECRET_KEY` through the browser login form. | | GET | `/v1/models/1` | JWT | List available models for the current token. The compatibility version literal `1` is the only accepted value; `v1`, `v2`, `latest` all return 500. | | POST | `/v1/conversations` | JWT | Create a conversation. Body **must** include client-supplied `id`. | | GET | `/v1/conversations` | JWT | List conversations for the current `sub`. | | GET | `/v1/conversations/{id}` | JWT | Read one conversation. | | POST | `/v1/conversations/{id}/messages` | JWT | Send a message. Returns Server-Sent Events (SSE) stream. | | POST | `/v1/conversations/{id}/web-resources` | JWT | Fetch a web page through the configured scrape endpoint. Body: `{"url":"https://…​"}`. Returns 201 on success, 422 on scrape failure. Requires `WEBRESOURCES_ENABLED='true'`. See [Web scraping](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-mcp/#web-scraping). | | DELETE | `/v1/conversations/{id}` | JWT | Delete a conversation. | | POST | `/v1/actions/{actionId}` | JWT | Run a quick action. Body shape: `{"content":[{"type":"text","content":"…​"}]}` (no `modelId`). | | POST | `/v1/reviews/{reviewId}` | JWT | Run a review. | | GET | `/v1/mcp/oauth/status` | JWT | Connection status for all OAuth-enabled MCP servers. See [OAuth REST endpoints](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-mcp/#mcp-oauth-endpoints). | | POST | `/v1/mcp/oauth/{serverName}/initialize` | JWT | Start the OAuth authorization flow. | | POST | `/v1/mcp/oauth/{serverName}/complete` | JWT | Complete the OAuth flow with the authorization code. | | DELETE | `/v1/mcp/oauth/{serverName}` | JWT | Revoke the OAuth connection for the calling user. | > **Note:** The OAuth endpoints are available only when at least one MCP server has an `oauth` block configured. The interactive API documentation at `/docs/` may not include these endpoints; they are documented in the [MCP OAuth section](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-mcp/#mcp-oauth). > **Note:** Environment management (create, read, update, delete) is handled through the Management Panel UI at `/panel/`. ### Server-Sent Events reference The message endpoint returns `Content-Type: text/event-stream`. Events use named types: | Event | Payload shape | Meaning | | --- | --- | --- | | `message-metadata` | `{"messageId":"…​"}` | Sent once at the start of each message. | | `text-delta` | `{"textDelta":"…​"}` | Incremental text fragment. The editor concatenates these. | | `tool-call` | `{"toolName":"…​","arguments":{…​}}` | Emitted when the model invokes an MCP tool. | | `tool-result` | `{"toolName":"…​","result":{…​}}` | Emitted when an MCP tool returns. | | `error` | `{"message":"…​","cause":{…​}}` | Provider error. HTTP status remains 200; the error is in-stream. | | `done` | `{}` | Sent once at the end of the stream. | Healthy stream example: ```text event: message-metadata data: {"messageId":"abc123"} event: text-delta data: {"textDelta":"Hello "} event: text-delta data: {"textDelta":"there!"} event: done data: {} ``` Error stream example: ```text event: message-metadata data: {"messageId":"abc123"} event: error data: {"message":"Incorrect API key provided","cause":{"providerStatusCode":401}} ``` Browser client parsing notes: - Each event is two lines: `event: ` and `data: `, separated from the next event by a blank line. - `data` is always valid JSON. - Unknown `event` types carry informational payloads and can be ignored for forward compatibility. - `text-delta` is the only event that contributes to the visible response body. ### Error code reference Error codes returned in HTTP 4xx responses and inside SSE `event: error` payloads. | Code | Origin | Likely cause | Fix | | --- | --- | --- | --- | | `invalid-jwt-signature` | JWT verifier | Wrong API Secret, or used `ENVIRONMENTS_MANAGEMENT_SECRET_KEY`, or signed with RS256 | Re-sign with HS256 using the correct API Secret | | `invalid-jwt-payload` | JWT verifier | `aud` does not match a real Environment ID, OR environment created through raw API not Panel UI | Re-copy env ID from `/panel/`, or recreate the env through the Panel UI | | `invalid-jwt` | JWT verifier | Token >60 s past `exp` | Issue tokens with shorter lifetime and refresh sooner | | `Environment not found` | AI runtime | Same as `invalid-jwt-payload` second sub-cause | Recreate env through Panel UI | | `missing-permissions` | Permission checker | `auth.ai.permissions` array does not cover the requested action | Add the missing permission string | | `invalid-request-data` | Input validator | Field validation failed (most commonly the 100,000 char prompt cap) | Fix the request body. See error message | | `environment-not-found` | AI runtime | Same as `Environment not found` | Recreate through Panel UI | | `conversation in use` | Conversation runtime | Stream-abort left stale state | Start a new conversation | | `conversation does not exist` | Conversation runtime | Follow-up to `conversation in use` | Start a new conversation | | `NoValidApiKeysFoundError` | Bedrock / Vertex adapter | Inline credentials missing | Inline `credentials` in `PROVIDERS` | | `AccessDeniedException` | Bedrock | Missing model access or IAM permissions | Enable Bedrock model access; attach the IAM policy from [LLM providers](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-providers/) | | `INVALID_PAYMENT_INSTRUMENT` | Bedrock | Anthropic on Bedrock without Marketplace subscription | Subscribe through AWS Marketplace | | `ValidationException` | Bedrock | Wrong model ID format (regional instead of cross-region) | Use the inference profile ID for Claude 4.x | | `DeploymentNotFound` | Azure | `MODELS[].id` does not match Azure deployment name | Set `MODELS[].id` to the exact deployment name | | `invalid_grant` | Vertex | Mangled `private_key` newlines | Build `PROVIDERS` from `json.dumps()` of the SA key | | `SERVICE_DISABLED` | Vertex | `aiplatform.googleapis.com` not enabled | `gcloud services enable aiplatform.googleapis.com` | | `API_KEY_INVALID` | Vertex | Account-bound API key blocked by org policy | Grant policy exception | | `Incorrect API key provided` | OpenAI / Anthropic / Google | Bad API key | Update `PROVIDERS` and `--force-recreate` | | `Wrong license key.` | AI service startup | Truncated or whitespace-padded license key | Re-paste as a single line | ### Known limits | Limit | Value | Notes | | --- | --- | --- | | Maximum prompt length | 100,000 characters | Hard limit enforced by the service. Requests exceeding this return `invalid-request-data`. Summarize or shorten source content before it exceeds this threshold. | | Conversation create | Client-supplied `id` required | The plugin auto-generates `tiny-`. Raw API callers must supply a unique `id` in the create body. | | Stream-abort recovery | Stop button leaves stale state | The next message returns `409 conversation in use` then `404 conversation does not exist`. Recovery: start a new conversation or reload. | | Built-in rate limiting | None | Front the service with nginx `limit_req` or ALB rate-limit rules. See [Rate limiting](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-production/#rate-limiting). | | File support (OpenAI-compatible providers) | Images only (`image/*`) | PDFs, text, and Office files are not forwarded to OpenAI-compatible providers. Use a non-OpenAI-compatible provider for non-image file attachments. | | MCP tool availability | Conversations only | MCP tools are not available in reviews or quick actions. | | MCP authentication | Static token or OAuth 2.0, configured independently for each server | Static tokens use the `headers` field (shared across all users, fixed at deploy time). Per-user authentication is supported through OAuth 2.0 (Authorization Code with PKCE). See [OAuth 2.0 authentication](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-on-premises-mcp/#mcp-oauth). | | PostgreSQL default schema | `cs-on-premises` (with hyphen) | Pre-create with `CREATE SCHEMA "cs-on-premises";` or set `DATABASE_SCHEMA=public`. | | `/v1/models/{compatibilityVersion}` | Only accepts `1` | Values such as `v1`, `v2`, or `latest` return 500. | | Environment creation through raw API | Not supported | Always create environments through the Management Panel UI. | | Bedrock credentials | Inline only | The SDK default credential chain (IAM Roles for Service Accounts (IRSA), instance roles, `AWS_PROFILE`) is not used. | | Vertex credentials | Inline only | Application Default Credentials, `GOOGLE_APPLICATION_CREDENTIALS`, and the metadata server are not used. | | Azure `MODELS[].id` | Must equal deployment name | There is no separate `deploymentName` field. The ID is the deployment name. | | OpenAI-compatible `baseUrl` | Must include `/v1` suffix | Omitting it produces a "Not Found" SSE error. | ## TinyMCE Angular integration technical reference Source: https://www.tiny.cloud/docs/tinymce/latest/angular-ref/ Last updated: 2026-01-19T04:37:32Z **Covered in this section:** - [Supported Angular versions](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#supported-angular-versions) - [Installing the TinyMCE Angular integration using NPM](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#installing-the-tinymce-angular-integration-using-npm) - [Using the TinyMCE Angular integration](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#using-the-tinymce-angular-integration) - [Configuring the editor](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#configuring-the-editor) - [`apiKey`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#apikey) - [`licenseKey`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#licensekey) - [`cloudChannel`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#cloudchannel) - [`disabled`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#disabled) - [`readonly`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#readonly) - [`id`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#id) - [`init`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#init) - [`initialValue`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#initialvalue) - [`inline`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#inline) - [`outputFormat`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#outputformat) - [`plugins`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#plugins) - [`tagName`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#tagname) - [`toolbar`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#toolbar) - [Using the `ngModel` directive](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#using-the-ngmodel-directive) - [`modelEvents`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#modelevents) - [Using with reactive forms](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#using-with-reactive-forms) - [Event binding](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#event-binding) - [Supported browser events](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#supported-browser-events) - [Supported TinyMCE events](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#supported-tinymce-events) - [`allowedEvents`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#allowedevents) - [`ignoreEvents`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#ignoreevents) - [`Angular module`](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#angular-modules) ### Supported Angular versions The following table shows the supported versions of Angular and the required version of the `tinymce-angular` integration package. | Angular Version | `tinymce-angular` version | | --- | --- | | 16+ | 8.x | | 14 or 15 | 7.x | | 13 | 6.x | | 9 to 12 | 4.x | | 5 to 8 | 3.x | | 4 or older | Not Supported | ### Installing the TinyMCE Angular integration using NPM To install the `tinymce-angular` package and save it to your `package.json`. ```sh npm install @tinymce/tinymce-angular ``` ### Using the TinyMCE Angular integration 1. Import the `EditorModule` from the NPM package using: ```ts import { EditorModule } from '@tinymce/tinymce-angular'; ``` Add the `EditorModule` to `@NgModule({imports})`: ```ts // This might look different depending on how you have set up your app // but the important part is the imports array @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, EditorModule // <- Important part ], providers: [], bootstrap: [AppComponent] }) ``` 2. Add the editor to the Angular application template, such as: ```html ``` ### Configuring the editor The editor accepts the following properties: ```jsx ``` None of the configuration properties are **required** for `tinymce-angular` to work. Specify a Tiny Cloud API key using `apiKey` to remove the "A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more." warning message. #### `apiKey` Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor. To register for a Tiny Cloud API key, visit the [Tiny Account sign-up page](https://www.tiny.cloud/auth/signup/). To retrieve the Tiny Cloud API key for an existing Tiny Account, login and visit the [Tiny Account Dashboard](https://www.tiny.cloud/my-account/). **Type:** `String` **Default value:** `'no-api-key'` ##### Example: using `apiKey` ```html ``` #### `licenseKey` Specifies the TinyMCE license key. Required for self-hosted deployments of TinyMCE. This property is **not required** for cloud-only deployments using the Tiny Cloud as your cloud subscription automatically includes the commercial license. For more information, see: [License Key](https://www.tiny.cloud/docs/tinymce/latest/license-key/). **Type:** `String` **Default value:** `undefined` **Possible values:** * `undefined` - Use this when loading from Tiny Cloud with an API key * `'gpl'` - For open source projects using GPL license * `'T8LK:…​'` - For commercial TinyMCE installations (must use this prefix for version 8+) * `'GPL+T8LK:'` - For open source projects that require premium features while maintaining GPL compliance. > **Note:** In hybrid deployments (using both cloud and self-hosted features): > > - You can provide both an API key and a license key > - The editor will use cloud services when available > - It will automatically fall back to the local license key if cloud services are not contactable ##### Example: Commercial license ```html ``` ##### Example: using `licenseKey` with GPL ```html ``` > **Tip:** The `licenseKey="gpl"` property must be set on the `` component when using TinyMCE 8 and above. #### `cloudChannel` **Type:** `String` **Default value:** `'8'` **Possible values:** `'8'`, `'8-testing'`, `'8-dev'`, `'8.9'` Changes the TinyMCE build used for the editor to one of the following Tiny Cloud channels: - `8` (**Default**): The current enterprise release of TinyMCE. - `8-testing`: The current release candidate for the next enterprise release of TinyMCE. - `8-dev`: The nightly-build version of TinyMCE. - A version number such as `8.9`: The specific enterprise release version of TinyMCE. Such as: ```html ``` For information TinyMCE development channels, see: [Specifying the TinyMCE editor version deployed from Cloud - dev, testing, and stable releases](https://www.tiny.cloud/docs/tinymce/latest/editor-plugin-version/#8-8-testing-and-8-dev-release-channels). #### `disabled` The `disabled` property can dynamically switch the editor between a "disabled" (read-only) mode (`true`) and the standard editable mode (`false`). **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` ##### Example: using `disabled` ```html ``` #### `readonly` The `readonly` property can dynamically switch the editor between a "read-only" mode (`true`) and the standard editable mode (`false`). **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` ##### Example: using `readonly` ```html ``` #### `id` An id for the editor. Used for retrieving the editor instance using the `tinymce.get('ID')` method. **Type:** `String` **Default value:** Automatically generated [UUID](https://tools.ietf.org/html/rfc4122) ##### Example: using `id` ```html ``` #### `init` Object sent to the `tinymce.init` method used to initialize the editor. For information on the TinyMCE selector (`tinymce.init`), see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). **Type:** `Object` **Default value:** `{ }` ##### Example: using `init` ```html ``` #### `initialValue` Initial content of the editor when the editor is initialized. **Type:** `String` **Default value:** `' '` ##### Example: using `initialValue` ```html ``` #### `inline` Used to set the editor to inline mode. Using `` is the same as setting `{inline: true}` in the TinyMCE selector (`tinymce.init`). For information on inline mode, see: [User interface options - `inline`](https://www.tiny.cloud/docs/tinymce/latest/inline-editor-options/#inline) and [Setup inline editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/). **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` ##### Example: using `inline` ```html ``` #### `plugins` Used to include plugins for the editor. Using `` is the same as setting `{plugins: 'lists code'}` in the TinyMCE selector (`tinymce.init`). For information on adding plugins to TinyMCE, see: [Add plugins to TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/work-with-plugins/). **Type:** `String` ##### Example: using `plugins` ```html ``` #### `outputFormat` Used to specify the format of the content emitted by the `tinymce-angular` component when used in conjunction with forms or plain data bindings. **Type:** `String` **Default value:** `'html'` **Possible values:** `'html'`, `'text'` ##### Example: using `outputFormat` ```html ``` #### `tagName` Only valid when [``](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#inline). Used to define the HTML element for the editor in inline mode. **Type:** `String` **Default value:** `'div'` ##### Example: using `tagName` ```html ``` #### `toolbar` Used to set the toolbar for the editor. Using `` is the same as setting `{toolbar: 'bold italic'}` in the TinyMCE selector (`tinymce.init`). For information setting the toolbar for TinyMCE, see: [User interface options - toolbar](https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar). **Type:** `String` **Possible values:** See [Toolbar Buttons Available for TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/available-toolbar-buttons/). ##### Example: using `toolbar` ```html ``` ### Using the `ngModel` directive The `ngModel` directive can be added to use the editor in a form: ```html ``` For information on using `NgModel`, see: [Angular documentation - NgModel](https://angular.dev/api/forms/NgModel). #### `modelEvents` > **Note:** This property requires `tinymce-angular` 4.0.0 or newer Used to specify the events that trigger the `NgModelChange` to emit. **Type:** `String` **Default value:** `'change input undo redo'`. **Possible values:** A space separated list of TinyMCE editor events. ##### Example: using `modelEvents` ```html ``` ### Using with reactive forms To use TinyMCE Angular component with reactive forms: 1. Include the `` configuration within the `formGroup`. 2. Add the `formControlName` directive to the editor configuration. For example: ```html ``` For information on using reactive forms, see: [Angular documentation - Reactive Forms](https://angular.dev/guide/forms/reactive-forms). ### Event binding Functions can be bound to editor events, such as: ```html ``` When the handler is called (`handleEvent` in this example), it is called with an event containing two properties: - `event` - The TinyMCE event object. - `editor` - A reference to the editor. The following events are available: #### Supported browser events - `onBeforePaste` - `onBlur` - `onClick` - `onContextMenu` - `onCompositionEnd` - `onCompositionStart` - `onCompositionUpdate` - `onCopy` - `onCut` - `onDblclick` - `onDrag` - `onDragDrop` - `onDragEnd` - `onDragGesture` - `onDragOver` - `onDrop` - `onFocus` - `onFocusIn` - `onFocusOut` - `onInput` - `onKeyDown` - `onKeyPress` - `onKeyUp` - `onMouseDown` - `onMouseEnter` - `onMouseLeave` - `onMouseMove` - `onMouseOut` - `onMouseOver` - `onMouseUp` - `onPaste` - `onSelectionChange` #### Supported TinyMCE events - `onActivate` - `onAddUndo` - `onBeforeAddUndo` - `onBeforeExecCommand` - `onBeforeGetContent` - `onBeforeRenderUI` - `onBeforeSetContent` - `onChange` - `onClearUndos` - `onDeactivate` - `onDirty` - `onExecCommand` - `onGetContent` - `onHide` - `onInit` - `onInitNgModel` - `onLoadContent` - `onNodeChange` - `onPostProcess` - `onPostRender` - `onPreInit` - `onPreProcess` - `onProgressState` - `onRedo` - `onRemove` - `onReset` - `onSaveContent` - `onSetAttrib` - `onObjectResizeStart` - `onObjectResized` - `onObjectSelected` - `onSetContent` - `onShow` - `onSubmit` - `onUndo` - `onVisualAid` By default, all the available events will trigger from the editor to the `tinymce-angular` component. To limit the events triggering in the component, use the `allowedEvents` and `ignoreEvents` properties. #### `allowedEvents` > **Note:** This property requires `tinymce-angular` 4.2.0 or newer Used to provide an allow-list of valid events to trigger from the editor to the `tinymce-angular` component. By default, the component will emit all the events listed in the [Event binding section](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/#event-binding). **Type:** `String` **Possible values:** A comma separated list of events to allow. ##### Example: using `allowedEvents` ```jsx ``` #### `ignoreEvents` > **Note:** This property requires `tinymce-angular` 4.2.0 or newer Used to block a list of events from the `tinymce-angular` component. **Type:** `String` **Possible values:** A comma separated list of events to ignore. ##### Example: using `ignoreEvents` ```jsx ``` ## TinyMCE Blazor integration technical reference Source: https://www.tiny.cloud/docs/tinymce/latest/blazor-ref/ Last updated: 2025-07-23T02:45:48Z Covered in this section: - [Configuring the TinyMCE Blazor integration](https://www.tiny.cloud/docs/tinymce/latest/blazor-ref/#configuring-the-tinymce-blazor-integration) - [Component binding](https://www.tiny.cloud/docs/tinymce/latest/blazor-ref/#component-binding) ### Configuring the TinyMCE Blazor integration The `TinyMCE.Blazor` `Editor` component accepts the following properties: ```cs ``` None of the configuration properties are required for the TinyMCE Blazor integration to work. #### `ApiKey` Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor. **Type:** `String` **Default value:** `'no-api-key'` ##### Example using ApiKey ```cs ``` #### `CloudChannel` Specifies the Tiny Cloud channel to use. For information on TinyMCE development channels, see: [Specifying the TinyMCE editor version deployed from Cloud](https://www.tiny.cloud/docs/tinymce/latest/editor-plugin-version/). **Type:** `String` **Default value:** `'8'` **Possible values:** `'8'`, `'8-testing'`, `'8-dev'`, `'8.9'` ##### Example using CloudChannel ```cs ``` #### `Id` Specified an Id for the editor. Used for retrieving the editor instance using the `tinymce.get('ID')` method. **Type:** `String` **Default value:** Automatically generated [UUID](https://tools.ietf.org/html/rfc4122) ##### Example using Id ```cs ``` #### `ClassName` Specifies the class of the Editor’s container `div` in the component. This `div` is the parent of the Editor and adding styles to it will not add styles to the editor. **Type:** `String` **Default value:** `'tinymce-wrapper'` ##### Examples using ClassName Setting a static class name: ```cs ``` Setting a dynamic class name: ```cs ``` #### `Inline` Set the editor to inline mode. **Type:** `Boolean` **Default value:** `false` ##### Example using Inline ```cs ``` #### `Disable` Sets the editor to a disable state. **Type:** `Boolean` **Default value:** `false` ##### Example using Disable ```cs ``` #### `Readonly` Sets the editor to readonly mode. **Type:** `Boolean` **Default value:** `false` ##### Example using Readonly ```cs ``` #### `JsConfSrc` Use a JS object as base configuration for the editor by specifying the path to the object relative to the window object. **Type:** `String` **Default value:** `null` ##### Example using JsConfSrc In your `_Host.cshtml`: ```cs window.sample = { height: 300, toolbar: 'undo redo | bold italic' } ``` In your component: ```cs ``` #### `LicenseKey` Specifies the TinyMCE license key. Required for self-hosted deployments of TinyMCE. This property is **not required** for cloud-only deployments using the Tiny Cloud as your cloud subscription automatically includes the commercial license. For more information, see: [License Key](https://www.tiny.cloud/docs/tinymce/latest/license-key/). **Type:** `String` **Default value:** `undefined` **Possible values:** * `undefined` - Use this when loading from Tiny Cloud with an API key * `'gpl'` - For open source projects using GPL license * `'T8LK:…​'` - For commercial TinyMCE installations (must use this prefix for version 8+) * `'GPL+T8LK:'` - For open source projects that require premium features while maintaining GPL compliance. > **Note:** In hybrid deployments (using both cloud and self-hosted features): > > - You can provide both an API key and a license key > - The editor will use cloud services when available > - It will automatically fall back to the local license key if cloud services are not contactable ##### Example: Commercial license (TinyMCE 8+) ```cs ``` Use this example when you have a commercial license for TinyMCE 8 or newer. The T8LK prefix is required. ##### Example: Open source GPL license ```cs ``` Use this example when you’re using TinyMCE under the open source GPL license in a self-hosted environment. #### `ScriptSrc` Use the `ScriptSrc` property to specify the location of TinyMCE to lazy load when the application is not using Tiny Cloud. This setting is required if the application uses a self-hosted version of TinyMCE, such as the [TinyMCE NuGet package](https://www.nuget.org/packages/TinyMCE/) or a .zip package of TinyMCE. **Type:** `String` ##### Example using ScriptSrc ```cs ``` #### `Conf` Specify a set of properties for the `Tinymce.init` method to initialize the editor. **Type:** `Dictionary` **Default value:** `null` ##### Example using Conf ```cs @code { private Dictionary editorConf = new Dictionary{ {"toolbar", "undo redo | bold italic"}, {"width", 400} }; } ``` ### Component binding #### Input binding The editor component allows developers to bind the contents of editor to a variable. By specifying the `@bind-Value` directive, developers can create a two-way binding on a selected variable. ##### Example using input binding ```cs @code { private string content = "

Hello world

"; } ``` #### Binding Text output Starting from TinyMCE.Blazor v0.0.4, the editor exposes the `@bind-Text` property, which developers can `bind` to retrieve a read-only value of the editor content as text. Changes will not propagate up to the editor if the `text` bound variable changes. It will only propagate changes from the editor. ##### Example using output text binding ```cs @code { private string content = ""; } ``` ## TinyMCE React integration technical reference Source: https://www.tiny.cloud/docs/tinymce/latest/react-ref/ Last updated: 2025-07-23T02:45:48Z **Covered in this section:** - [Installing the TinyMCE React integration using NPM or Yarn](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#installing-the-tinymce-react-integration-using-npm-or-yarn) - [Using TinyMCE React integration in a Bootstrap dialog](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#using-tinymce-react-integration-in-a-bootstrap-dialog) - [Configuring the editor](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#configuring-the-editor) - [Available props](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#available-props) - [`apiKey`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#apikey) - [`licenseKey`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#licenseKey) - [`cloudChannel`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#cloudchannel) - [`disabled`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#disabled) - [`readonly`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#readonly) - [`id`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#id) - [`init`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#init) - [`initialValue`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#initialvalue) - [`inline`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#inline) - [`onEditorChange`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#oneditorchange) - [`outputFormat` (*removed*)](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#outputformat) - [`plugins`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#plugins) - [`rollback`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#rollback) - [`scriptLoading`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#scriptloading) - [`tagName`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#tagname) - [`textareaName`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#textareaname) - [`toolbar`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#toolbar) - [`tinymceScriptSrc`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#tinymcescriptsrc) - [`value`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#value) - [`tabIndex`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#tabIndex) - [Using the TinyMCE React component as a uncontrolled component](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#using-the-tinymce-react-component-as-a-uncontrolled-component) - [Using the TinyMCE React component as a controlled component](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#using-the-tinymce-react-component-as-a-controlled-component) - [Event binding](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#event-binding) ### Installing the TinyMCE React integration using NPM or Yarn To install the `tinymce-react` package and save it to your `package.json`. ```sh npm install @tinymce/tinymce-react ``` or with Yarn ```sh yarn add @tinymce/tinymce-react ``` ### Using TinyMCE React integration in a Bootstrap dialog To use the TinyMCE React integration inside Bootstrap UI dialogs, add the following React effect hook to a component that renders with the editor. This code is required because Bootstrap blocks all `focusin` calls from elements outside the dialog. #### Bootstrap 5 > **Note:** For Bootstrap 5, the React effect hook contains no JQuery. ```jsx useEffect(() => { const handler = (e) => { if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) { e.stopImmediatePropagation(); } }; document.addEventListener("focusin", handler); return () => document.removeEventListener("focusin", handler); }, []); ``` #### Bootstrap 4 ```js useEffect(function() { var handler = function(e) { if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) { e.stopImmediatePropagation(); } }; $(document).on('focusin', handler); return function() { $(document).off('focusin', handler); }; }, []); ``` ### Configuring the editor The `tinymce-react` component provides props for: - [Configuring editor source](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#configuring-editor-source) - [Configuring page elements](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#configuring-page-elements) - [Configuring editor options](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#configuring-editor-options) - [Managing the editor](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#managing-the-editor) #### Configuring editor source The `tinymce-react` integration will try to source TinyMCE in the following order: 1. The global `tinymce` will be used, if it is present on the page. 2. If the `tinymceScriptSrc` prop is provided, then a script tag will be added to the page to load TinyMCE from the given URL. 3. If none of the above conditions apply, then a script tag will be added to the page to load TinyMCE from Tiny Cloud. These props are used to configure how the editor is sourced: [`apiKey`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#apikey) The Tiny Cloud API key. When loading from Tiny Cloud, use this prop to remove the "A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more." warning message. [`licenseKey`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#licenseKey) The Tiny Cloud License key. Use this when self-hosting TinyMCE instead of loading from Tiny Cloud. [`cloudChannel`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#cloudchannel) The channel of TinyMCE used when loading from Tiny Cloud. [`scriptLoading`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#scriptloading) The script loading behavior prop. Allows setting of the `async` and `defer` attributes, as well as adding an additional delay in milliseconds. [`tinymceScriptSrc`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#tinymcescriptsrc) The URL to use for sourcing TinyMCE, when loading a self-hosted version of TinyMCE. #### Configuring page elements These props provide some control over the page elements that the integration creates: [`id`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#id) The id attribute of the element that the editor is initialized on. [`inline`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#inline) Load the editor as part of the page; sharing the page styles and selection. [`tagName`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#tagname) The tag used for creating an inline editor. Ignored for a classic (iframe) editor. [`textareaName`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#textareaname) The name attribute on the textarea tag (HTML element). Used for creating the classic (iframe) editor. Ignored for an inline editor. #### Configuring editor options These props are read when the editor is initialized. Changes after the editor has launched are ignored. [`init`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#init) Additional options passed to TinyMCE when it is initialized. [`plugins`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#plugins) Specify the editor plugins. This will be *combined* with `plugins` in the `init` prop. [`toolbar`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#toolbar) Specify the editor toolbar. This will **override** the `toolbar` in the `init` prop. #### Managing the editor These props can be updated after the editor is initialized. Note that there are [other events](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#event-binding) not mentioned here. [`disabled`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#disabled) Should the editor be disabled. [`readonly`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#readonly) Should the editor be in read-only mode. [`initialValue`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#initialvalue) The starting value of the editor. Changing this value after the editor has loaded will reset the editor (including the editor content). [`onBeforeAddUndo`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#event-binding) An event handler for notifying when the editor is about to create an undo level, and preventing it if required. This is important for controlled components that restrict the allowed values of the editor. [`onEditorChange`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#oneditorchange) An event handler for detecting editor changes. Useful when implementing TinyMCE as a controlled component. [`onInit`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#event-binding) An event handler for notifying when the editor has initialized. Useful for getting the initial value of the editor or obtaining a reference to the editor that can be used for a uncontrolled component. [`value`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#value) Sets and enforces the value of the editor. Only used for a controlled component. [`value`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#tabIndex) Sets the tabindex of the target element that the editor wraps. ### Available props None of the configuration props are **required** for the TinyMCE React component; however, if the `apiKey` prop is not configured when loading from Tiny Cloud, a warning message will be shown in the editor. For guidance about which props to use, see: [Configuring the editor](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#configuring-the-editor). #### `apiKey` Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor without the warning message "A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more". To register for a Tiny Cloud API key, visit the [Tiny Account sign-up page](https://www.tiny.cloud/auth/signup/). To retrieve the Tiny Cloud API key for an existing Tiny Account, login and visit the [Tiny Account Dashboard](https://www.tiny.cloud/my-account/). **Type:** `String` **Default value:** `'no-api-key'` ##### Example: using `apiKey` ```jsx ``` #### `licenseKey` Specifies the TinyMCE license key. Required for self-hosted deployments of TinyMCE. This property is **not required** for cloud-only deployments using the Tiny Cloud as your cloud subscription automatically includes the commercial license. For more information, see: [License Key](https://www.tiny.cloud/docs/tinymce/latest/license-key/). **Type:** `String` **Default value:** `undefined` **Possible values:** * `undefined` - Use this when loading from Tiny Cloud with an API key * `'gpl'` - For open source projects using GPL license * `'T8LK:…​'` - For commercial TinyMCE installations (must use this prefix for version 8+) * `'GPL+T8LK:'` - For open source projects that require premium features while maintaining GPL compliance. > **Note:** In hybrid deployments (using both cloud and self-hosted features): > > - You can provide both an API key and a license key > - The editor will use cloud services when available > - It will automatically fall back to the local license key if cloud services are not contactable ##### Example: Commercial license ```jsx ``` ##### Example: using `licenseKey` with GPL ```jsx ``` #### `cloudChannel` Changes the TinyMCE build used for the editor to either a specific version or a channel indicating a stability level. **Type:** `String` **Default value:** `'8'` **Possible values:** `'8'`, `'8-testing'`, `'8-dev'`, `'8.9'` Changes the TinyMCE build used for the editor to one of the following Tiny Cloud channels: - `8` (**Default**): The current enterprise release of TinyMCE. - `8-testing`: The current release candidate for the next enterprise release of TinyMCE. - `8-dev`: The nightly-build version of TinyMCE. - A version number such as `8.9`: The specific enterprise release version of TinyMCE. Such as: ```jsx ``` For information TinyMCE development channels, see: [Specifying the TinyMCE editor version deployed from Cloud - dev, testing, and stable releases](https://www.tiny.cloud/docs/tinymce/latest/editor-plugin-version/#8-8-testing-and-8-dev-release-channels). #### `disabled` The `disabled` prop can dynamically toggle the editor’s disabled state. **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` ##### Example: using `disabled` ```jsx ``` #### `readonly` The `readonly` prop can dynamically switch the editor between a read-only mode (`true`) and the standard editable mode (`false`). **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` ##### Example: using `readonly` ```jsx ``` #### `id` An id for the editor. Used for retrieving the editor instance using the `tinymce.get('ID')` method. **Type:** `String` **Default value:** Automatically generated [UUID](https://tools.ietf.org/html/rfc4122) ##### Example: using `id` ```jsx ``` #### `init` Additional settings passed to the `tinymce.init({...})` method used to initialize the editor. For information on the TinyMCE `tinymce.init({...})` method, see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). When using `tinymce-react`: - The `init` prop does not require the `selector` or `target` options - If the `selector`, `target`, `readonly`, or `license_key` options are set using the `init` prop, they will be *overridden* by the integration. **Type:** `Object` **Default value:** `{ }` ##### Example: using `init` ```jsx ``` #### `initialValue` The initial HTML content of the editor. This will reset the editor undo state and the cursor position when changed. This may be set either before the editor loads, or soon afterwards by an asynchronous process. > **Important:** Ensure that this is **not** updated by `onEditorChange` or the editor will be unusable. **Type:** `String` **Default value:** `''` ##### Example: using static `initialValue` ```jsx ``` ##### Example: using asynchronous `initialValue` ```jsx const [initialValue, setInitialValue] = useState(undefined); useEffect(() => { // a real application might do a fetch request here to get the content setTimeout(() => setInitialValue('

Once upon a time...

'), 500); }, []); return ( ); ``` #### `inline` Used to set the editor to inline mode. Using `` is the same as setting `{inline: true}` in the TinyMCE `tinymce.init({...})` method. For information on inline mode, see: [User interface options - `inline`](https://www.tiny.cloud/docs/tinymce/latest/inline-editor-options/#inline) and [Setup inline editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/). **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` ##### Example: using `inline` ```jsx ``` #### `onEditorChange` Used to store the state of the editor outside the TinyMCE React component. This prop is commonly used when using the TinyMCE React component as a controlled component. It is called with two arguments: `value` The current value of the editor. This is HTML. `editor` A reference to the editor. For detailed information on using `onEditorChange`, see: [Using the TinyMCE React component as a controlled component](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#using-the-tinymce-react-component-as-a-controlled-component). **Type:** `EventHandler` #### `outputFormat` (*removed*) > **Important:** This option was removed with the release of the TinyMCE React component 4.0.0. This option was used to specify the format of the content produced by the [`onEditorChange`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#oneditorchange) event, however as it did not change the input format it was almost impossible to use correctly. ##### Example: replacing usage of `outputFormat` ```jsx const [value, setValue] = useState('

The quick brown fox jumps over the lazy dog

'); const [text, setText] = useState(''); return ( <> { setText(editor.getContent({format: 'text'})); }} onEditorChange={(newValue, editor) => { setValue(newValue); setText(editor.getContent({format: 'text'})); }} /> 
{text}
); ``` #### `plugins` Used to include plugins for the editor. Using `` is the same as setting `{plugins: 'lists'}` in the TinyMCE `tinymce.init({...})` method. For information on adding plugins to TinyMCE, see: [Add plugins to TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/work-with-plugins/). **Type:** `String` or `Array` ##### Example: using `plugins` ```jsx ``` #### `rollback` Used to configure the rollback timer. This is the milliseconds between an event being emitted by the [`onEditorChange`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#oneditorchange) prop and the [`value`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#value) prop being enforced. When `rollback` is `false` the [`value`](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#value) prop will not be enforced unless it changes. **Type:** `Number` or `false` **Default value:** `200` ##### Example: using `rollback` ```jsx ``` #### `scriptLoading` Used to configure the script tag created to load TinyMCE. **Type:** `Object` ```ts type ScriptLoading = { async?: boolean; defer?: boolean; delay?: number; }; ``` Contains 3 settings: `async` Sets the [`async`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async) attribute on the script tag created to load TinyMCE. > For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available. — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async **Type:** `Boolean` **Default value:** `false` `defer` Sets the [`defer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer) attribute on the script tag created to load TinyMCE. > This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded. — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer **Type:** `Boolean` **Default value:** `false` `delay` The script tag to load TinyMCE will be added after the specified delay in milliseconds. **Type:** `Number` **Default value:** `0` ##### Example: loading TinyMCE asynchronously ```jsx ``` ##### Example: delaying load of TinyMCE for 500 milliseconds ```jsx ``` #### `tagName` Only valid when [``](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#inline). Used to define the HTML element for the editor in inline mode. **Type:** `String` **Default value:** `'div'` ##### Example: using `tagName` ```jsx ``` #### `textareaName` Only valid when the editor is in classic (iframe) mode. Sets the `name` attribute for the `textarea` element used for the editor in forms. **Type:** `String` ##### Example: using `textareaName` ```jsx ``` #### `toolbar` Used to set the toolbar for the editor. Using `` is the same as setting `{toolbar: 'bold'}` in the TinyMCE method `tinymce.init({...})`. For information setting the toolbar for TinyMCE, see: [User interface options - toolbar](https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar). **Type:** `String` **Possible values:** See [Toolbar Buttons Available for TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/available-toolbar-buttons/). ##### Example: using `toolbar` ```jsx ``` #### `tinymceScriptSrc` Use the `tinymceScriptSrc` prop to specify an external version of TinyMCE to lazy load. **Type:** `String` ##### Example: using `tinymceScriptSrc` ```jsx ``` #### `value` Sets the HTML content of the editor when operating as a controlled component. When this prop is different to the current editor content, the editor content will be changed to match (within 200 milliseconds) and an undo level will be created. When the editor content changes by this mechanism, the editor will attempt to retain the selection, however if the previous selection does not exist in the new content, the cursor returns to the start of the document. This prop allows the editor to be used as a controlled component by setting the `value` prop and using the `onEditorChange` event to update the `value`. For detailed information on using the `value` prop, see: [Using the TinyMCE React component as a controlled component](https://www.tiny.cloud/docs/tinymce/latest/react-ref/#using-the-tinymce-react-component-as-a-controlled-component). **Type:** `String` #### `tabIndex` Use the `tabIndex` prop to set the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) on the target element that the editor wraps. **Type:** `Number` ##### Example: using `tabIndex` ```jsx ``` ### Using the TinyMCE React component as a uncontrolled component The TinyMCE React component is designed to be used as an uncontrolled component, which allows the editor to perform well on larger documents. When using the editor as an uncontrolled component, avoid using the `value` and `onEditorChange` props. Tiny recommends retrieving the editor content when it is needed. The `onInit` event handler can be used to store a editor reference when the editor is loaded to assist with retrieving the content. To provide visual feedback to the user when the content is ready to be saved, use the `onDirty` event handler; combined with clearing the editor’s "dirty" state when saving the editor content. > **Note:** The editor is "dirty" (or in a "dirty" state) when the user modifies editor content after initialization or the last `tinymce.editor.save()` call. This includes changes made using undo or redo. #### Example: functional uncontrolled component with save button and dirty state ```jsx function MyComponent({initialValue}) { const editorRef = useRef(null); const [dirty, setDirty] = useState(false); useEffect(() => setDirty(false), [initialValue]); const save = () => { if (editorRef.current) { const content = editorRef.current.getContent(); setDirty(false); editorRef.current.setDirty(false); // an application would save the editor content to the server here console.log(content); } }; return ( <> editorRef.current = editor} onDirty={() => setDirty(true)} /> {dirty &&

You have unsaved content!

} ); } ``` ### Using the TinyMCE React component as a controlled component > **Caution:** The controlled component can have performance problems on large documents as it requires converting the entire document to a string on each keystroke or modification. To use the editor as a [controlled component](https://legacy.reactjs.org/docs/forms.html#controlled-components), both the `value` and `onEditorChange` props are required. The `value` prop is used to set and re-set the editor content. If it is not updated to the latest version of the editor content, the editor will rollback any changes. The `onEditorChange` prop is used to provide an event handler that will be run when any change is made to the editor content. Changes to the editor must be applied to the `value` prop within *200 milliseconds* to prevent the changes being rolled back. #### Example: functional controlled component ```jsx function MyComponent({initialValue}) { const [value, setValue] = useState(initialValue ?? ''); useEffect(() => setValue(initialValue ?? ''), [initialValue]); return ( setValue(newValue)} /> ); } ``` #### Example: class controlled component ```jsx class MyComponent extends React.Component { constructor(props) { super(props); this.state = { value: props.initialValue ?? '' }; this.handleEditorChange = this.handleEditorChange.bind(this); } componentDidUpdate(prevProps) { if (this.props.initialValue !== prevProps.initialValue) { this.setState({ value: this.props.initialValue ?? '' }) } } handleEditorChange(value, editor) { this.setState({ value }); } render() { return ( ) } } ``` When the editor must be restricted to avoid invalid states, such as exceeding a maximum length, then a handler for `onBeforeAddUndo` must be added to avoid those states in the undo history. #### Example: limited length controlled component ```jsx function MyComponent({initialValue, limit}) { const sizeLimit = limit ?? 50; const [ value, setValue ] = React.useState(initialValue ?? ''); const [ length, setLength ] = React.useState(0); const handleInit = (evt, editor) => { setLength(editor.getContent({ format: 'text' }).length); }; const handleUpdate = (value, editor) => { const length = editor.getContent({ format: 'text' }).length; if (length <= sizeLimit) { setValue(value); setLength(length); } }; const handleBeforeAddUndo = (evt, editor) => { const length = editor.getContent({ format: 'text' }).length; // note that this is the opposite test as in handleUpdate // because we are determining when to deny adding an undo level if (length > sizeLimit) { evt.preventDefault(); } }; return ( <>

Remaining: {sizeLimit - length}

); }; ``` For information on controlled components in React, see: [React Docs - Controlled Components](https://legacy.reactjs.org/docs/forms.html#controlled-components). ### Event binding Functions can be bound to editor events, such as: ```jsx ``` When the handler is called (**handlerFunction** in this example), it is called with two arguments: `event` The TinyMCE event object. `editor` A reference to the editor. The following events are available: - `onActivate` - `onAddUndo` - `onBeforeAddUndo` - `onBeforeExecCommand` - `onBeforeGetContent` - `onBeforeRenderUI` - `onBeforeSetContent` - `onBeforePaste` - `onBlur` - `onChange` - `onClearUndos` - `onClick` - `onContextMenu` - `onCompositionEnd` - `onCompositionStart` - `onCompositionUpdate` - `onCopy` - `onCut` - `onDblclick` - `onDeactivate` - `onDirty` - `onDrag` - `onDragDrop` - `onDragEnd` - `onDragGesture` - `onDragOver` - `onDrop` - `onExecCommand` - `onFocus` - `onFocusIn` - `onFocusOut` - `onGetContent` - `onHide` - `onInit` - `onInput` - `onKeyDown` - `onKeyPress` - `onKeyUp` - `onLoadContent` - `onMouseDown` - `onMouseEnter` - `onMouseLeave` - `onMouseMove` - `onMouseOut` - `onMouseOver` - `onMouseUp` - `onNodeChange` - `onObjectResizeStart` - `onObjectResized` - `onObjectSelected` - `onPaste` - `onPostProcess` - `onPostRender` - `onPreProcess` - `onProgressState` - `onRedo` - `onRemove` - `onReset` - `onSaveContent` - `onSelectionChange` - `onSetAttrib` - `onSetContent` - `onShow` - `onSubmit` - `onUndo` - `onVisualAid` ## TinyMCE Svelte integration technical reference Source: https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/ Last updated: 2026-04-14T00:06:56Z Covered in this section: - [Configuring the TinyMCE Svelte integration](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/#configuring-the-tinymce-svelte-integration) - [apiKey](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/#apikey) - [licenseKey](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/#licensekey) - [channel](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/#channel) - [id](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/#id) - [inline](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/#inline) - [disabled](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/#disabled) - [readonly](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/#readonly) - [scriptsrc](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/#scriptsrc) - [conf](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/#conf) - [Component binding](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/#component-binding) - [Event binding](https://www.tiny.cloud/docs/tinymce/latest/svelte-ref/#event-binding) ### Configuring the TinyMCE Svelte integration The `tinymce-svelte` `Editor` component accepts the following properties: ```jsx ``` #### `apiKey` Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor. To register for a Tiny Cloud API key, visit the [Tiny Account sign-up page](https://www.tiny.cloud/auth/signup/). To retrieve the Tiny Cloud API key for an existing Tiny Account, login and visit the [Tiny Account Dashboard](https://www.tiny.cloud/my-account/). **Type:** `String` **Default value:** `'no-api-key'` ##### Example using `apiKey` ```jsx ``` #### `licenseKey` Specifies the TinyMCE license key. Required for self-hosted deployments of TinyMCE. This property is **not required** for cloud-only deployments using the Tiny Cloud as your cloud subscription automatically includes the commercial license. For more information, see: [License Key](https://www.tiny.cloud/docs/tinymce/latest/license-key/). **Type:** `String` **Default value:** `undefined` **Possible values:** * `undefined` - Use this when loading from Tiny Cloud with an API key * `'gpl'` - For open source projects using GPL license * `'T8LK:…​'` - For commercial TinyMCE installations (must use this prefix for version 8+) * `'GPL+T8LK:'` - For open source projects that require premium features while maintaining GPL compliance. > **Note:** In hybrid deployments (using both cloud and self-hosted features): > > - You can provide both an API key and a license key > - The editor will use cloud services when available > - It will automatically fall back to the local license key if cloud services are not contactable ##### Example: Commercial license ```jsx ``` ##### Example: using `licenseKey` with GPL ```jsx ``` #### `channel` Specifies the Tiny Cloud channel to use. For information on Tiny Cloud deployment channels, see: [Specifying the TinyMCE editor version deployed from Cloud](https://www.tiny.cloud/docs/tinymce/latest/editor-plugin-version/). **Type:** `String` **Default value:** `'8'` **Possible values:** `'8'`, `'8-testing'`, `'8-dev'`, `'8.9'` ##### Example using `channel` ```jsx ``` #### `id` Specified an Id for the editor. Used for retrieving the editor instance using the `tinymce.get('ID')` method. **Type:** `String` **Default value:** Automatically generated [UUID](https://tools.ietf.org/html/rfc4122) ##### Example using `id` ```jsx ``` #### `inline` Sets the editor to use inline mode. **Type:** `Boolean` **Default value:** `false` ##### Example using `inline` ```jsx ``` #### `disabled` Set the editor to disabled. **Type:** `Boolean` **Default value:** `false` ##### Example using `disabled` ```jsx ``` #### `readonly` Set the editor to readonly mode. **Type:** `Boolean` **Default value:** `false` ##### Example using `readonly` ```jsx ``` #### `scriptSrc` Use the `scriptSrc` property to specify the location of TinyMCE to lazy load when the application is not using Tiny Cloud. This setting is required if the application uses a self-hosted version of TinyMCE, such as the TinyMCE NPM package or a .zip package of TinyMCE. **Type:** `String` ##### Example using `scriptSrc` ```jsx ``` #### `conf` Specify a set of properties for the `Tinymce.init` method to initialize the editor. **Type:** `Object` **Default value:** `{}` ##### Example using `conf` ```jsx
``` ### Component binding #### Input binding The editor component allows developers to bind the contents of editor to a variable. By specifying the `bind:value`, developers can create a two-way binding on a selected variable. #### Example of input binding ```jsx
{@html value}
``` #### Binding text output The editor exposes the `text` property, which developers can `bind` to retrieve a read-only value of the editor content as text. Changes will not propagate up to the editor if the `text` bound variable changes. It will only propagate changes from the editor. #### Example of text binding ```jsx
{text}
``` ### Event binding Functions can be bound to editor events, such as: ```svelte ``` When the handler is called (**handlerFunction** in this example), it is called with two arguments: `event` The TinyMCE event object. `editor` A reference to the editor. #### Example of event binding ```svelte
``` > **Tip:** Specify event names in lower-case (event names are case-sensitive). The following events are available: - `activate` - `addundo` - `beforeaddundo` - `beforeexeccommand` - `beforegetcontent` - `beforerenderui` - `beforesetcontent` - `beforepaste` - `blur` - `change` - `clearundos` - `click` - `commentchange` - `compositionend` - `compositionstart` - `compositionupdate` - `contextmenu` - `copy` - `cut` - `dblclick` - `deactivate` - `dirty` - `drag` - `dragdrop` - `dragend` - `draggesture` - `dragover` - `drop` - `execcommand` - `focus` - `focusin` - `focusout` - `getcontent` - `hide` - `init` - `input` - `keydown` - `keypress` - `keyup` - `loadcontent` - `mousedown` - `mouseenter` - `mouseleave` - `mousemove` - `mouseout` - `mouseover` - `mouseup` - `nodechange` - `objectresizestart` - `objectresized` - `objectselected` - `paste` - `postprocess` - `postrender` - `preprocess` - `progressstate` - `redo` - `remove` - `reset` - `resizeeditor` - `savecontent` - `selectionchange` - `setattrib` - `setcontent` - `show` - `submit` - `undo` - `visualaid` ## TinyMCE Vue.js integration technical reference Source: https://www.tiny.cloud/docs/tinymce/latest/vue-ref/ Last updated: 2025-07-23T02:45:48Z **Covered in this section:** - [Installing the TinyMCE Vue.js integration using NPM](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#installing-the-tinymce-vuejs-integration-using-npm) - [Using the TinyMCE Vue.js integration](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#using-the-tinymce-vuejs-integration) - [Configuring the editor](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#configuring-the-editor) - [`api-key`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#api-key) - [`licenseKey`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#license-key) - [`cloud-channel`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#cloud-channel) - [`disabled`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#disabled) - [`readonly`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#readonly) - [`id`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#id) - [`init`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#init) - [`initial-value`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#initial-value) - [`inline`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#inline) - [`model-events`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#model-events) - [`output-format`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#output-format) - [`plugins`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#plugins) - [`tag-name`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#tag-name) - [`toolbar`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#toolbar) - [`tinymce-script-src`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#tinymce-script-src) - [Form Input Bindings: `v-model`](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#form-input-bindings-v-model) - [Event binding](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#event-binding) ### Installing the TinyMCE Vue.js integration using NPM To install the `tinymce-vue` package. - For Vue.js 3.x users: ```sh npm install "@tinymce/tinymce-vue" ``` - For Vue.js 2.x users: ```sh npm install "@tinymce/tinymce-vue@^3" ``` ### Using the TinyMCE Vue.js integration 1. Load the component. - For bundle loader users (such as `webpack`, `rollup`, or `browserify`): ```js // es modules import Editor from '@tinymce/tinymce-vue'; // commonjs require // NOTE: default needed after require var Editor = require('@tinymce/tinymce-vue').default; ``` - To load `tinymce-vue` in an HTML file: ```html ``` 2. Add the editor to the `components` property of the app: ```js // This might look different depending on how you have set up your app // but the important part is the components property var app = new Vue({ el: '#app', data: { /* Your data */ }, components: { 'editor': Editor // <- Important part }, methods: { /* Your methods */} }) ``` 3. Add the `` tag to the `template` ```html ``` ### Configuring the editor The editor accepts the following properties: ```html ``` > **Note:** None of the configuration properties are **required** for `tinymce-vue` to work. Specify a Tiny Cloud API key using `api-key` to remove the "A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more." warning message. #### `api-key` Tiny Cloud API key. Required for deployments using the Tiny Cloud to provide the TinyMCE editor. To register for a Tiny Cloud API key, visit the [Tiny Account sign-up page](https://www.tiny.cloud/auth/signup/). To retrieve the Tiny Cloud API key for an existing Tiny Account, login and visit the [Tiny Account Dashboard](https://www.tiny.cloud/my-account/). **Type:** `String` **Default value:** `'no-api-key'` ##### Example: using `api-key` ```html ``` #### `licenseKey` Specifies the TinyMCE license key. Required for self-hosted deployments of TinyMCE. This property is **not required** for cloud-only deployments using the Tiny Cloud as your cloud subscription automatically includes the commercial license. For more information, see: [License Key](https://www.tiny.cloud/docs/tinymce/latest/license-key/). **Type:** `String` **Default value:** `undefined` **Possible values:** * `undefined` - Use this when loading from Tiny Cloud with an API key * `'gpl'` - For open source projects using GPL license * `'T8LK:…​'` - For commercial TinyMCE installations (must use this prefix for version 8+) * `'GPL+T8LK:'` - For open source projects that require premium features while maintaining GPL compliance. > **Note:** In hybrid deployments (using both cloud and self-hosted features): > > - You can provide both an API key and a license key > - The editor will use cloud services when available > - It will automatically fall back to the local license key if cloud services are not contactable ##### Example: Commercial license ```html ``` ##### Example: using `licenseKey` with GPL ```html ``` #### `cloud-channel` **Type:** `String` **Default value:** `'8'` **Possible values:** `'8'`, `'8-testing'`, `'8-dev'`, `'8.9'` Changes the TinyMCE build used for the editor to one of the following Tiny Cloud channels: - `8` (**Default**): The current enterprise release of TinyMCE. - `8-testing`: The current release candidate for the next enterprise release of TinyMCE. - `8-dev`: The nightly-build version of TinyMCE. - A version number such as `8.9`: The specific enterprise release version of TinyMCE. Such as: ```html ``` For information TinyMCE development channels, see: [Specifying the TinyMCE editor version deployed from Cloud - dev, testing, and stable releases](https://www.tiny.cloud/docs/tinymce/latest/editor-plugin-version/#8-8-testing-and-8-dev-release-channels). #### `disabled` The `disabled` property can dynamically switch the editor between a "disabled" (read-only) mode (`true`) and the standard editable mode (`false`). **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` ##### Example: using `disabled` ```html ``` #### `readonly` The `readonly` property can dynamically switch the editor between a "read-only" mode (`true`) and the standard editable mode (`false`). **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` ##### Example: using `readonly` ```html ``` #### `id` An `id` for the editor. Used for retrieving the editor instance using the `tinymce.get('ID')` method. **Type:** `String` **Default value:** Automatically generated [UUID](https://tools.ietf.org/html/rfc4122) ##### Example: using `id` ```html ``` #### `init` Object sent to the `tinymce.init` method used to initialize the editor. For information on the TinyMCE selector (`tinymce.init`), see: [Basic setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). **Type:** `Object` **Default value:** `'{ }'` ##### Example: using `init` ```html ``` #### `initial-value` Initial content of the editor when the editor is initialized. **Type:** `String` **Default value:** `' '` ##### Example: using `initial-value` ```html ``` #### `inline` Used to set the editor to inline mode. Using `` is the same as setting `{inline: true}` in the TinyMCE selector (`tinymce.init`). For information on inline mode, see: [User interface options - `inline`](https://www.tiny.cloud/docs/tinymce/latest/inline-editor-options/#inline) and [Setup inline editing mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/). **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` ##### Example: using `inline` ```html ``` #### `model-events` Sets the trigger events for [v-model events](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#form-input-bindings-v-model). For a list of available TinyMCE events, see: [Available Events - Editor events](https://www.tiny.cloud/docs/tinymce/latest/events/#editor-core-events). **Type:** `String` **Default value:** `'change keyup undo redo'`. ##### Example: using `model-events` ```html ``` #### `output-format` Used to specify the format of the content emitted via the `input` event. This affects the format of the content used in conjunction with data binding. **Type:** `String` **Default value:** `'html'` **Possible values:** `'html'`, `'text'` ##### Example: using `output-format` ```html ``` #### `plugins` Used to include plugins for the editor. Using `` is the same as setting `{plugins: 'lists code'}` in the TinyMCE selector (`tinymce.init`). For information on adding plugins to TinyMCE, see: [Add plugins to TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/work-with-plugins/). **Type:** `String` or `Array` ##### Example: using `plugins` ```html ``` #### `tag-name` Only valid when [``](https://www.tiny.cloud/docs/tinymce/latest/vue-ref/#inline). Used to define the HTML element for the editor in inline mode. **Type:** `String` **Default value:** `'div'` ##### Example: using `tag-name` ```html ``` #### `toolbar` Used to set the toolbar for the editor. Using `` is the same as setting `{toolbar: 'bold italic'}` in the TinyMCE selector (`tinymce.init`). For information setting the toolbar for TinyMCE, see: [User interface options - toolbar](https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar). **Type:** `String` **Possible values:** See [Toolbar Buttons Available for TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/available-toolbar-buttons/). ##### Example: using `toolbar` ```html ``` #### `tinymce-script-src` Use the `tinymce-script-src` prop to specify an external version of TinyMCE to lazy load from. **Type:** `String` ##### Example: using `tinymce-script-src` ```html ``` ### Form Input Bindings: `v-model` The `v-model` directive can be used to create a two-way data binding. For example: ```html ``` For information on `v-model` and form input bindings, see: [Vue.js documentation - Form Input Bindings](https://vuejs.org/guide/essentials/forms.html). ### Event binding Functions can be bound to editor events, such as: ```html ``` For older versions of Vue (Vue 2) supported by v3.x, the syntax for event bindings are: `` or ``. When the handler is called (**handlerFunction** in this example), it is called with two arguments: - `event` - The TinyMCE event object. - `editor` - A reference to the editor. The following events are available: - `activate` - `addUndo` - `beforeAddUndo` - `beforeExecCommand` - `beforeGetContent` - `beforeRenderUI` - `beforeSetContent` - `beforePaste` - `blur` - `change` - `clearUndos` - `click` - `contextMenu` - `commentChange` - `compositionEnd` - `compositionStart` - `compositionUpdate` - `copy` - `cut` - `dblclick` - `deactivate` - `dirty` - `drag` - `dragDrop` - `dragEnd` - `dragGesture` - `dragOver` - `drop` - `execCommand` - `focus` - `focusIn` - `focusOut` - `getContent` - `hide` - `init` - `input` - `keyDown` - `keyPress` - `keyUp` - `loadContent` - `mouseDown` - `mouseEnter` - `mouseLeave` - `mouseMove` - `mouseOut` - `mouseOver` - `mouseUp` - `nodeChange` - `objectResizeStart` - `objectResized` - `objectSelected` - `paste` - `postProcess` - `postRender` - `preProcess` - `progressState` - `redo` - `remove` - `reset` - `saveContent` - `selectionChange` - `setAttrib` - `setContent` - `show` - `submit` - `undo` - `visualAid` ## TinyMCE Web Component technical reference Source: https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/ Last updated: 2025-07-23T02:45:48Z **Covered in this section:** - [Use a cloud version of the TinyMCE Web Component integration](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#use-a-cloud-version-of-the-tinymce-web-component-integration) - [Installing the TinyMCE Web Component integration](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#installing-the-tinymce-web-component-integration) - [Loading TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#loading-tinymce) - [Setting the license key](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#licensekey) - [Configuring the editor](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#configuring-the-editor) - [Setting the initial content](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-initial-content) - [Loading plugins](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#loading-plugins) - [Setting the editor width](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-editor-width) - [Setting the editor height](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-editor-height) - [Setting the editor to readonly](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-readonly) - [Setting the editor to disabled](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-disabled) - [Setting the toolbar](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-toolbar) - [Setting the toolbar mode](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-toolbar-mode) - [Setting the menu bar](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-menu-bar) - [Setting context menu](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-context-menu) - [Setting the quick-insert toolbar](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-quick-insert-toolbar) - [Setting the quick-selection toolbar](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-quick-selection-toolbar) - [Setting content stylesheets](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-content-stylesheets) - [Setting content styling](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-content-styling) - [Setting PowerPaste’s word import method](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-powerpastes-word-import-method) - [Setting PowerPaste’s html import method](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-powerpastes-html-import-method) - [Setting PowerPaste to allow local images](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-powerpaste-to-allow-local-images) - [Showing resize handles](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#showing-resize-handles) - [Setting the editor setup function](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-editor-setup-function) - [Setting the editor skin](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-editor-skin) - [Setting the images upload URL](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-images-upload-url) - [Setting the images upload handler](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-images-upload-handler) - [Setting the images upload base path](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-images-upload-base-path) - [Setting the images upload to have credentials](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-images-upload-to-have-credentials) - [Setting the images upload to reuse filenames](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-images-upload-to-reuse-filenames) - [Setting the icon pack](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-icon-pack) - [Setting the icon pack URL](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-icon-pack-url) - [Setting additional configuration options](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-additional-configuration-options) - [Event binding](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#event-binding) - [Supported browser events](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#supported-browser-events) - [Supported TinyMCE events](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#supported-tinymce-events) ### Use a cloud version of the TinyMCE Web Component integration To use a cloud version of Web Component, the integration is accessible from [JSDelivr](https://www.jsdelivr.com/package/npm/@tinymce/tinymce-webcomponent). For example: ```html ``` ### Installing the TinyMCE Web Component integration To add the TinyMCE Web Component integration to a JavaScript project, on command line or command prompt, run the following: - NPM users: ```sh npm i @tinymce/tinymce-webcomponent ``` - Yarn users: ```sh yarn add @tinymce/tinymce-webcomponent ``` ### Loading TinyMCE The integration requires both the TinyMCE Web Component (`tinymce-webcomponent.min.js`) and TinyMCE (`tinymce.min.js`). If TinyMCE is not available for TinyMCE Web Component, the latest version of TinyMCE will be automatically loaded from the Tiny Cloud. To use TinyMCE Web Component with a self-hosted copy of TinyMCE, ensure that the self-hosted copy of TinyMCE can be loaded in the same location as the TinyMCE Web Component (such as the same web page). To use TinyMCE from the Tiny Cloud, add the `api-key` attribute to the `tinymce-editor` element with an API from [Tiny Account](https://www.tiny.cloud/my-account/). ### Setting the license key Specifies the TinyMCE license key. Required for self-hosted deployments of TinyMCE. This property is **not required** for cloud-only deployments using the Tiny Cloud as your cloud subscription automatically includes the commercial license. For more information, see: [License Key](https://www.tiny.cloud/docs/tinymce/latest/license-key/). **Type:** `String` **Default value:** `undefined` **Possible values:** * `undefined` - Use this when loading from Tiny Cloud with an API key * `'gpl'` - For open source projects using GPL license * `'T8LK:…​'` - For commercial TinyMCE installations (must use this prefix for version 8+) * `'GPL+T8LK:'` - For open source projects that require premium features while maintaining GPL compliance. > **Note:** In hybrid deployments (using both cloud and self-hosted features): > > - You can provide both an API key and a license key > - The editor will use cloud services when available > - It will automatically fall back to the local license key if cloud services are not contactable #### Example: Commercial license ```html ``` #### Example: Open source GPL license ```html ``` > **Important:** > - The license key is only required when self-hosting TinyMCE > - License keys starting with "T8LK:" use client-side validation. > - Do not use both an API key and a license key - use API key for cloud deployments, and license key for self-hosted deployments For more information on licensing, see: [License Key](https://www.tiny.cloud/docs/tinymce/latest/license-key/). ### Configuring the editor The editor is configured by setting attributes on the `tinymce-editor` custom element. All attributes may be represented as strings, however some attributes will accept boolean or number inputs. Where an array, object, or function is a valid input; examples have been provided. #### Setting the initial content To set the initial editor content, add encoded HTML to the `tinymce-editor` element as content, such as: ```html <p>This will be the initial content of the editor.</p> ``` The editor will load the text content in the `tinymce-editor` element as the initial HTML. > **Important:** The HTML must be encoded as text to prevent injected javascript from running, which may have an unintended impact on the surrounding document. #### Loading plugins To add plugins and extend the functionality of the editor, add a string of plugin identifiers using the `plugins` attribute, such as: ```html ``` For information on plugins, see: [Add plugins to TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/work-with-plugins/). #### Setting the editor width To set the width of the editor (content area and user interface), use the `width` attribute. For example: ##### Setting a pixel-based editor width ```html ``` ##### Setting a CSS unit based editor width ```html ``` #### Setting the editor height To set the height of the editor (content area and user interface), use the `height` attribute. For example: ##### Setting a pixel-based editor height ```html ``` ##### Setting a CSS unit based height ```html ``` #### Setting readonly mode To set the editor’s mode to `readonly`. ```html ``` #### Setting disabled state To set the editor to a disabled state. ```html ``` #### Setting the toolbar To set the editor toolbar buttons, use the `toolbar` attribute. For example: ```html ``` The `toolbar` attribute accepts a space-separated string of toolbar buttons with pipe characters (`|`) for grouping buttons. For a list of available toolbar buttons, see: [Toolbar Buttons Available for TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/available-toolbar-buttons/). ##### Disabling the toolbar To disable the toolbar, set the `toolbar` attribute to `"false"`. For example: ```html ``` #### Setting the toolbar mode To control the behavior of the toolbar, set the `toolbar_mode` attribute. For example: ```html ``` For information on the available toolbar modes, see: [User interface options - `toolbar_mode`](https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar_mode). #### Setting the menu bar To set the menus shown on the editor menu bar, add the `menubar` attribute. For example: ```html ``` To change the menu items shown in the menus, or define custom menus, set the `menu` configuration option using the `config` attribute. For information on: - The `menubar` configuration option, see: [User interface options - `menubar`](https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menubar). - The `menu` configuration option, see: [User interface options - `menu`](https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#menu). - The `config` attribute, see: [Setting additional configuration options](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-additional-configuration-options). #### Setting context menu To change the context menu sections that can be shown in the editor context menu, use the `contextmenu` attribute. Such as: ```html ``` For a list of available context menu sections, see: [Available context menu sections](https://www.tiny.cloud/docs/tinymce/latest/editor-context-menu-identifiers/). For information on context menus, see: [User interface options - `contextmenu`](https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#contextmenu). #### Setting the quick-insert toolbar The quick-insert toolbar is shown when a new line is added, providing buttons for inserting objects such as tables and images. To add a quick-insert toolbar, add `"quickbars"` to the `plugins` attribute. To change the quick-insert toolbar, set the `quickbars_insert_toolbar` attribute, such as: ```html ``` The `quickbars_insert_toolbar` attribute accepts a space-separated string of toolbar buttons with pipe characters (`|`) for grouping buttons. For a list of available toolbar buttons, see: [Toolbar Buttons Available for TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/available-toolbar-buttons/). To disable the quick-insert toolbar, set the `quickbars_insert_toolbar` attribute to `"false"`. For example: ```html ``` #### Setting the quick-selection toolbar The quick-selection toolbar is shown when text is selected, providing formatting buttons such as: `bold`, `italic`, and `link`. To add a quick-selection toolbar, add `"quickbars"` to the `plugins` attribute. To change the quick-selection toolbar, set the `quickbars_selection_toolbar` attribute, such as: ```html ``` The `quickbars_selection_toolbar` attribute accepts a space-separated string of toolbar buttons with pipe characters (`|`) for grouping buttons. For a list of available toolbar buttons, see: [Toolbar Buttons Available for TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/available-toolbar-buttons/). To disable the quick-selection toolbar, set the `quickbars_selection_toolbar` attribute to `"false"`. For example: ```html ``` #### Setting content stylesheets To set the CSS for the content area of the editor, use the `content_css` attribute. For example, to use one of the TinyMCE CSS configurations: ```html ``` To use a custom CSS file, provide a relative or abolute path to the css file, such as: ```html ``` Tiny recommends using: - The `content_style` option to apply a small set of CSS styles. - The `content_css` option for applying large or complex CSS configurations. For information on the `content_css` option, see: [Content appearance options - `content_css`](https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_css). #### Setting content styling To apply a small set of CSS styles to the editor, use the `content_style` attribute. For example: ```html ``` Tiny recommends using: - The `content_style` option to apply a small set of CSS styles. - The `content_css` option for applying large or complex CSS configurations. For information on the `content_style` option, see: [Content appearance options - `content_style`](https://www.tiny.cloud/docs/tinymce/latest/add-css-options/#content_style). #### Settings for when PowerPaste plugin enabled > **Note:** These settings only apply if the PowerPaste plugin (`powerpaste`) is enabled. ##### PowerPaste’s word import method To control how content pasted from Microsoft Word is filtered, use the `powerpaste_word_import` attribute. For example: ```html ``` For information on the `powerpaste_word_import` option, including supported values, see: [The PowerPaste plugin - `powerpaste_word_import`](https://www.tiny.cloud/docs/tinymce/latest/powerpaste-options/#powerpaste_word_import). ##### PowerPaste’s html import method To control how content pasted from sources other than Microsoft Word is filtered, use the `powerpaste_html_import` attribute. For example: ```html ``` For information on the `powerpaste_html_import` option, including supported values, see: [The PowerPaste plugin - `powerpaste_html_import`](https://www.tiny.cloud/docs/tinymce/latest/powerpaste-options/#powerpaste_html_import). ##### PowerPaste to allow local images To prevent Base64 encoded images with a data URI from being pasted into the editor, set `powerpaste_allow_local_images` to `"false"`. For example: ```html ``` For information on the `powerpaste_allow_local_images` option, including supported values, see: [The PowerPaste plugin - `powerpaste_allow_local_images`](https://www.tiny.cloud/docs/tinymce/latest/powerpaste-options/#powerpaste_allow_local_images). #### Showing resize handles The `resize` attribute gives you the ability to disable the resize handle or set it to resize the editor both horizontal and vertically. By default the editor will resize vertically (`resize="true"`). To remove the resize handle and disable resizing of the editor, set the `resize` attribute to `"false"`. Such as: ```html ``` To allow the user to resize the editor both horizontally and vertically, set the `resize` attribute to `"both"`. For example: ```html ``` For information on the `resize` option, see: [User interface options - `resize`](https://www.tiny.cloud/docs/tinymce/latest/editor-size-options/#resize). #### Setting the editor setup function To execute a javascript callback before the editor instance is rendered, use the `setup` attribute. For example: ```html ``` For information on the `setup` option, see: [Integration and setup options - `setup`](https://www.tiny.cloud/docs/tinymce/latest/editor-important-options/#setup). #### Setting the editor skin To apply a custom skin to the editor, use the `skin` attribute. For example: ```html ``` For information on: - Using the `skin` option, see: [User interface options - `skin`](https://www.tiny.cloud/docs/tinymce/latest/editor-skin/#skin). - Tiny enhanced skins, see: [Enhanced Skins & Icon Packs](https://www.tiny.cloud/docs/tinymce/latest/enhanced-skins-and-icon-packs/). - Creating a custom skin for TinyMCE, see: [Create a skin for TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin/). #### Setting the images upload URL To specify the location of a server-side upload handler, use the `images_upload_url` attribute. For example: ```html ``` The upload handler should return the location of the uploaded file in the following format: ```json { "location": "folder/sub-folder/new-location.png" } ``` For information on using the `images_upload_url`, see: [Image uploads - `images_upload_url`](https://www.tiny.cloud/docs/tinymce/latest/file-image-upload/#images_upload_url). #### Setting the images upload handler To specify custom image upload handler callback function, use the `images_upload_handler` attribute. ```html ``` For information on using the `images_upload_handler` option, see: [Image uploads - `images_upload_handler`](https://www.tiny.cloud/docs/tinymce/latest/file-image-upload/#images_upload_handler). #### Setting the images upload base path To specify the basepath to prepend to URLs returned from the configured `images_upload_url` script, use the `images_upload_base_path` attribute. For example: ```html ``` For information on using the `images_upload_base_path` option, see: [Image uploads - `images_upload_base_path`](https://www.tiny.cloud/docs/tinymce/latest/file-image-upload/#images_upload_base_path). #### Setting the images upload to have credentials To receive credentials (such as cookies, authorization headers, or TLS client certificates) for cross-domain image uploads, set the `images_upload_credentials` attribute to `"true"`. ```html ``` For information on using the `images_upload_credentials` option, see: [Image uploads - `images_upload_credentials`](https://www.tiny.cloud/docs/tinymce/latest/file-image-upload/#images_upload_credentials). #### Setting the images upload to reuse filenames To force the editor to use the same filename for a given image, regardless of the number of times it is uploaded within a given instance, set the `images_reuse_filename` attribute to `"true"`. ```html ``` For information on using the `images_reuse_filename` option, see: [Image uploads - `images_reuse_filename`](https://www.tiny.cloud/docs/tinymce/latest/file-image-upload/#images_reuse_filename). #### Setting the icon pack To apply a bundled set of custom or premium icons to the editor, use the `icons` attribute. For example: ```html ``` Use this attribute if the icon pack is bundled with TinyMCE (including custom icon packs). If the icon pack is hosted on a web site, use the [`icons_url` attribute](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-icon-pack-url). For information on: - Using the `icons` option, see: [User interface options - `icons`](https://www.tiny.cloud/docs/tinymce/latest/editor-icons/#icons). - Tiny premium icon packs, see: [Enhanced Skins & Icon Packs](https://www.tiny.cloud/docs/tinymce/latest/enhanced-skins-and-icon-packs/). - Creating a custom icon pack for TinyMCE, see: [Create an icon pack for TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/creating-an-icon-pack/). #### Setting the icon pack URL To apply a hosted set of custom or premium icons to the editor, use the `icons_url` attribute. For example: ```html ``` Use this attribute if the icon pack is hosted on a web site. If the icon pack is bundled with TinyMCE (including custom icon packs), use the [`icons` attribute](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-icon-pack). For information on: - Using the `icons_url` option, see: [User interface options - `icons_url`](https://www.tiny.cloud/docs/tinymce/latest/editor-icons/#icons_url). - Tiny premium icon packs, see: [Enhanced Skins & Icon Packs](https://www.tiny.cloud/docs/tinymce/latest/enhanced-skins-and-icon-packs/). - Creating a custom icon pack for TinyMCE, see: [Create an icon pack for TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/creating-an-icon-pack/). #### Setting additional configuration options To configure any TinyMCE option that does not have a corresponding attribute, use the `config` attribute. For example: ```html ``` Configuration options that have an attribute can also be passed to the `config` attribute. ### Event binding There are two methods to bind events for the TinyMCE Web Component. - The `setup` attribute, as described in [Setting the editor setup function](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#setting-the-editor-setup-function). For example: ```html ``` - The `on-` attributes, such as the `on-NodeChange` attribute. For example: ```html ``` If these attributes are later removed, the event will be automatically unbound. For the full list of supported `on-` attributes, see: [Supported browser events](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#supported-browser-events) and [Supported TinyMCE events](https://www.tiny.cloud/docs/tinymce/latest/webcomponent-ref/#supported-tinymce-events). #### Supported browser events Bind the following browser events using the corresponding TinyMCE Web Component attribute. | Browser event | Attribute | | --- | --- | | `BeforePaste` | `on-BeforePaste` | | `Blur` | `on-Blur` | | `Click` | `on-Click` | | `ContextMenu` | `on-ContextMenu` | | `Copy` | `on-Copy` | | `Cut` | `on-Cut` | | `Dblclick` | `on-Dblclick` | | `Drag` | `on-Drag` | | `DragDrop` | `on-DragDrop` | | `DragEnd` | `on-DragEnd` | | `DragGesture` | `on-DragGesture` | | `DragOver` | `on-DragOver` | | `Drop` | `on-Drop` | | `Focus` | `on-Focus` | | `FocusIn` | `on-FocusIn` | | `FocusOut` | `on-FocusOut` | | `KeyDown` | `on-KeyDown` | | `KeyPress` | `on-KeyPress` | | `KeyUp` | `on-KeyUp` | | `MouseDown` | `on-MouseDown` | | `MouseEnter` | `on-MouseEnter` | | `MouseLeave` | `on-MouseLeave` | | `MouseMove` | `on-MouseMove` | | `MouseOut` | `on-MouseOut` | | `MouseOver` | `on-MouseOver` | | `MouseUp` | `on-MouseUp` | | `Paste` | `on-Paste` | | `SelectionChange` | `on-SelectionChange` | #### Supported TinyMCE events Bind the following TinyMCE events using the corresponding TinyMCE Web Component attribute. | TinyMCE event | Attribute | | --- | --- | | `Activate` | `on-Activate` | | `AddUndo` | `on-AddUndo` | | `BeforeAddUndo` | `on-BeforeAddUndo` | | `BeforeExecCommand` | `on-BeforeExecCommand` | | `BeforeGetContent` | `on-BeforeGetContent` | | `BeforeRenderUI` | `on-BeforeRenderUI` | | `BeforeSetContent` | `on-BeforeSetContent` | | `Change` | `on-Change` | | `ClearUndos` | `on-ClearUndos` | | `Deactivate` | `on-Deactivate` | | `Dirty` | `on-Dirty` | | `ExecCommand` | `on-ExecCommand` | | `GetContent` | `on-GetContent` | | `Hide` | `on-Hide` | | `Init` | `on-Init` | | `LoadContent` | `on-LoadContent` | | `NodeChange` | `on-NodeChange` | | `PostProcess` | `on-PostProcess` | | `PostRender` | `on-PostRender` | | `PreProcess` | `on-PreProcess` | | `ProgressState` | `on-ProgressState` | | `Redo` | `on-Redo` | | `Remove` | `on-Remove` | | `Reset` | `on-Reset` | | `SaveContent` | `on-SaveContent` | | `SetAttrib` | `on-SetAttrib` | | `ObjectResizeStart` | `on-ObjectResizeStart` | | `ObjectResized` | `on-ObjectResized` | | `ObjectSelected` | `on-ObjectSelected` | | `SetContent` | `on-SetContent` | | `Show` | `on-Show` | | `Submit` | `on-Submit` | | `Undo` | `on-Undo` | | `VisualAid` | `on-VisualAid` | # Configuration & Setup ## APIs for custom dialogs Source: https://www.tiny.cloud/docs/tinymce/latest/dialog-apis/ Last updated: 2022-04-07T05:31:36Z When a dialog is created, a dialog instance API is returned. For example, `const instanceApi = editor.windowManager.open(config);`. The dialog API instance is also passed to some of the [dialog configuration options](https://www.tiny.cloud/docs/tinymce/latest/dialog-configuration/#options). The instance API is a JavaScript object containing methods attached to the dialog instance. When the dialog is closed, the instance API is destroyed. ### Dialog data and state All dialogs have an internal data store, which is used to track the value and/or state of the dialog’s panel components. This data store takes the form of a JavaScript object, where the object’s keys are the `name` of the configured panel components. For example, if a dialog contains a [checkbox](https://www.tiny.cloud/docs/tinymce/latest/dialog-components/#checkbox) component configured with `name: myCheckbox` and the checkbox is not checked then the dialog’s data object will contain `{ myCheckbox: false }`. The current value of a dialog’s data store can be accessed using the dialog instance API’s `getData()` function. It can also be set using `setData()` which will automatically update the relevant components. For example, if you call `setData({ myCheckbox: true })` with the previous example, the checkbox would be toggled to checked. To set initial values for components when the dialog is opened, use the `initialData` [dialog configuration option](https://www.tiny.cloud/docs/tinymce/latest/dialog-configuration/#options). For example, you could set the checkbox in the previous example to be checked when the dialog opens by including `initialData: { myCheckbox: true }` in the dialog’s configuration. ### Dialog API methods | Methods | Description | | --- | --- | | `getData() => ` | `getData()` returns a key-value object matching the structure of the `initialData`. The object keys in the returned data object represent a component’s `name`. | | `setData(newConfig: object) => void` | `setData(newData)` updates the data set. This method also works with partial data sets. | | `setEnabled(name: string, state: string) => void` | Calling `setEnabled()` and passing the component’s `name` and the `state` will either enable or disable the component. | | `focus(name: string) => void` | Calling `focus()` and passing the component’s `name` will set the browser’s focus to the component. | | `block(message: string) => void` | Calling `block()` and passing a message string will disable the entire dialog window and show a loading image. This is useful for handling asynchronous data. The message is used for screen reader accessibility. When the data is ready use `unblock()` to unblock the dialog. | | `unblock() => void` | Calling `unblock()` will unblock the dialog restoring functionality. | | `close() => void` | Calling the `close()` method will close the dialog. When closing the dialog, all DOM elements and dialog data are destroyed. When `windowManager.open(config)` is called again, all DOM elements and data are recreated from the config. | | `redial(config) => void` | Calling `redial()` and passing a dialog body configuration will destroy and recreate the body of the dialog. See the [Redial](https://www.tiny.cloud/docs/tinymce/latest/dialog-apis/#redial) documentation. | | `showTab(name: string) => void` | **This method only applies to [tab panel](https://www.tiny.cloud/docs/tinymce/latest/dialog-components/#tabpanel) dialogs.** Calling `showTab()` and passing the `name` of a tab will make the dialog switch to the named tab. | ### Redial **Redial** is a concept that allows developers to replace a dialog’s configuration with a new configuration. This can be used for advanced applications such as: - Programmatically changing the information displayed in a dialog while it is open. - Changing panel components on user action. For example, updating the options in a `selectbox` component based on user input to another interactive component. - Creating a multipage form where a button leads to the next page. To redial a dialog, pass a new dialog configuration to the `redial()` method from the [dialog instance API](https://www.tiny.cloud/docs/tinymce/latest/dialog-apis/#dialog-api-methods). > **Note:** At the moment, Redial does not support partial dialog replacement or the replacement of specific components. Redial must be passed an entire dialog configuration. See the [redial example](https://www.tiny.cloud/docs/tinymce/latest/dialog-examples/#interactive-example-using-redial) for more information on how to use Redial. ## Basic setup Source: https://www.tiny.cloud/docs/tinymce/latest/basic-setup/ Last updated: 2025-07-23T02:45:48Z This introduction to TinyMCE details the options used in traditional form-based layouts, useful information for creating streamlined user experiences, and examples of using TinyMCE as an inline editor. The four most common configuration options for TinyMCE are: 1. [*(Required)* The Selector configuration](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/#selector-configuration) 2. [The Plugin configuration](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/#plugin-configuration) 3. [The Toolbar configuration](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/#toolbar-configuration) 4. [The Menu and Menu Bar configuration](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/#menu-and-menu-bar-configuration) ### A note about code snippet examples Code snippets are provided as example implementations throughout the TinyMCE documentation. Example code snippet: ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'a_tinymce_plugin', a_plugin_option: true, a_configuration_option: 400 }); ``` Snippets include the `selector` option, which is described below. Change the value of the working code block according to the HTML. Insert the snippet into an HTML document between the ` ``` #### Break-down of the basic configuration example The following section is a break-down of the options used in the basic configuration example. Selects the `textarea` with the id `myTextarea` to be replaced by the editor. ```js selector: '#myTextarea', ``` Sets the width and height of the editable area in pixels as numeric values. ```js width: 600, height: 300, ``` Selects the plugins to be included on load. ```js plugins: [ 'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak', 'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'emoticons', 'help' ], ``` Selects the toolbar buttons displayed to the user. Use a comma or space as a separator. ```js toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media | forecolor backcolor emoticons', ``` Adds an additional menu named "My Favorites" with `menu`, then adds it to the menu bar using `menubar`. ```js menu: { favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' } }, menubar: 'favs file edit view insert format tools table help', ``` Sets the styling of the editable area using `content_css`. ```js content_css: 'css/content.css', ``` **Example** ```js tinymce.init({ selector: '#basic-conf', width: 600, height: 300, plugins: [ 'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak', 'searchreplace', 'wordcount', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table', 'emoticons', 'help' ], toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' + 'bullist numlist outdent indent | link image | print preview media fullscreen | ' + 'forecolor backcolor emoticons | help', menu: { favs: { title: 'My Favorites', items: 'code visualaid | searchreplace | emoticons' } }, menubar: 'favs file edit view insert format tools table help', content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }' }); ``` #### Additional information - For a full list of configuration options, review the following pages in the side navigation: - Initial configuration - For initial configuration and important settings. - Interface - For customizing the look and feel of the editor. - Content - For customizing the allowed content and the associated behaviors. - For information on Plugins and their options, see: [Add plugins to TinyMCE](https://www.tiny.cloud/docs/tinymce/latest/work-with-plugins/). - For information on the CSS required to render some TinyMCE elements outside of the editor, see: [Boilerplate content CSS](https://www.tiny.cloud/docs/tinymce/latest/editor-content-css/). ## Check spelling in TinyMCE Source: https://www.tiny.cloud/docs/tinymce/latest/spell-checking/ Last updated: 2026-09-28T00:27:52Z ### Browser-based spell checking Assign the [`browser_spellcheck`](https://www.tiny.cloud/docs/tinymce/latest/spelling/#browser_spellcheck) configuration option the value of `true` to utilize the browser’s native spell check functionality. Disabling the [`contextmenu`](https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/#contextmenu) option *may* be required depending on the right-click or context usability requirement. ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML browser_spellcheck: true, contextmenu: false }); ``` > **Note:** When the TinyMCE context menu is *enabled*, users can still access the browser context menu, including the browser spellchecker, using the `Ctrl+Right click` shortcut. However if the `contextmenu_never_use_native` option is enabled, holding the `Ctrl` key will have no effect. ### TinyMCE Spell Checker plugin Use the [Spell Checker plugin](https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-spellchecker/) for scalable enterprise-grade spell check as-you-type functionality. **Spell Checker** requires both a client-side plugin to be configured and a server-side component to be installed and configured. ## Cloud Deployment Guide Source: https://www.tiny.cloud/docs/tinymce/latest/cloud-deployment-guide/ Last updated: 2026-09-28T00:27:52Z - **[Cloud deployment of editor & plugins](https://www.tiny.cloud/docs/tinymce/latest/editor-and-features/)** — Learn how to set up the TinyMCE editor via the Cloud or migrate from a self-hosted environment. - **[Cloud deployment of plugins Only](https://www.tiny.cloud/docs/tinymce/latest/features-only/)** — Connect to Tiny Cloud within a hybrid deployment. - **[Specify editor & plugins](https://www.tiny.cloud/docs/tinymce/latest/editor-plugin-version/)** — Specifying editor and plugins for Tiny Cloud deployments. - **[Cloud Troubleshooting](https://www.tiny.cloud/docs/tinymce/latest/cloud-troubleshooting/)** — Troubleshooting errors shown by the Tiny Cloud. ## Cloud deployment of editor & plugins Source: https://www.tiny.cloud/docs/tinymce/latest/editor-and-features/ Last updated: 2026-09-28T00:27:52Z Tiny Cloud is the easiest way to integrate TinyMCE and upgrade to premium plugins. Tiny Cloud can be used without an API key. Sign up for an API key and update the script tag to use premium plugins or avoid the in-editor developer warning. All Tiny Cloud accounts include a free, pre-configured Tiny Cloud image proxy service. This setup uses the [Image Editing](https://www.tiny.cloud/docs/tinymce/latest/editimage/) plugin. ### Integrating TinyMCE for the first time #### Step 1: Insert the Tiny Cloud script tag into the webpage Insert the TinyMCE editor code into the application to load TinyMCE for the first time. The code inserting is done by adding the following script tag into your app, or in the case of a web page the `` of the page: The following example adds a script tag into the application that inserts the code. Use the `` of the page on a web page. Be sure to substitute 'no-api-key' with your api key. ```html ``` | | Value | Description | | --- | --- | --- | | 1 | no-api-key | Replace with your api key | | 2 | origin | A `referrerpolicy` specifies how much of the current page’s URL is sent in the `Referer` header when the browser fetches page resources (for example, the TinyMCE editor). The use of the `Referer` header ensures API keys are only used on domains registered to their owners. We only care about the domain portion however (similar to the operation of `Origin` header), so for improved performance and privacy always set the `referrerpolicy` to `origin` when requesting Tiny Cloud resources. | | 3 | anonymous | the `crossorigin="anonymous"` attribute is required on all script tags loading TinyMCE from Tiny Cloud. This attribute ensures consistent Origin header behavior for license key validation and improves security for cross-origin script loading. | ![Script Tag Description](https://www.tiny.cloud/docs/tinymce/latest/_images/scripttag.png) > **Important:** Tiny Cloud verifies the domain TinyMCE is loading from by checking the **Referer** header in the network request. Sometimes the domains in the **Referer** header does not match with the URL in the browser’s address bar. > > To check the **Referer** header, open your browser’s *Developer’s Tools* and open the *Network* tab. From there, find the request being made to load TinyMCE with your API key, and click on the **Headers** tab. In the section called **Request Headers** there should be a field for **Referer**. If the value there is different from one of your registered URLs, you may need to adjust either your registered URLs, or your application’s **Refer** header settings. #### Step 2: Load, customize and interact with TinyMCE There are more than 40 open source plugins that enhance the editing experience in addition to the advanced content create solutions on Tiny Cloud. A range of [simple examples](https://www.tiny.cloud/docs/tinymce/latest/basic-example/) are available. Refer to the [Quick start](https://www.tiny.cloud/docs/tinymce/latest/cloud-quick-start/) section for more information. #### Step 3: Specifying purchased TinyMCE plugins and toolbar/menu items > **Note:** It may take up to 30 minutes for the purchased plugin to be available to TinyMCE. Clear the browser’s cache. Extend the [TinyMCE configuration](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/) to include any additional purchased plugins and associated toolbar and menu items. For the enablement guide for each plugin, refer to [Premium plugins](https://www.tiny.cloud/docs/tinymce/latest/plugins/#premium-plugins). > **Note:** Configuration of the following options occurs automatically when using the Tiny Cloud: > > - `editimage_cors_hosts` > - `editimage_proxy_service_url` > - `export_image_cors_hosts` > - `export_image_proxy_service_url` > - `linkchecker_service_url` > - `mediaembed_service_url` > - `spellchecker_rpc_url` > - `autocorrect_service_url` #### Step 4: Forward proxy and firewall configuration If the network has a firewall or forward proxy that controls access to the internet, ensure that the following URLs are accessible: - All URLs where the editor is deployed. - All URLs where the plugins are deployed. - `*.tiny.cloud` — covers all Tiny Cloud services, including the image proxy, link checker, spell checker, AI API, and document converters. Ensure the `tiny-api-key` and `tinymce-api-key` headers are retained while requesting the above URLs. For the full list of Tiny Cloud service domains and required headers, see [Firewall and proxy allowlisting](https://www.tiny.cloud/docs/tinymce/latest/tinymce-and-csp/#firewall-and-proxy-allowlisting). #### Step 5: Specifying a translation To change the user interface language with a language pack, use the [language configuration option](https://www.tiny.cloud/docs/tinymce/latest/ui-localization/#language). Alternatively, [Specify its location](https://www.tiny.cloud/docs/tinymce/latest/ui-localization/#language_url) with the `language_url` configuration option. ### Migrating from a self-hosted environment to Tiny Cloud #### Step 1: Replace existing reference to tinymce.min.js Migrating from a self-hosted environment to Tiny Cloud is easy. Remove the existing script tag that loads TinyMCE’s JavaScript. > **Note:** The script tag typically references `tinymce.min.js` hosted within the application or available at a legacy CDN. Replace the script tag with the following, making sure to include both required attributes (`referrerpolicy` and `crossorigin`): ```html ``` > **Note:** When migrating to Tiny Cloud, both the `referrerpolicy="origin"` and `crossorigin="anonymous"` attributes are required for optimal performance and cross-browser functionality. #### Step 2: Update custom plugin paths Reference [external_plugins](https://www.tiny.cloud/docs/tinymce/latest/editor-important-options/#external_plugins) to ensure custom plugins or modified plugins continue to function in the Tiny Cloud deployment. > **Warning:** Do not use the regular [plugins](https://www.tiny.cloud/docs/tinymce/latest/work-with-plugins/) configuration element. #### Step 3: Specify purchased TinyMCE plugins and toolbar buttons Extend the [TinyMCE configuration](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/) to include any additional purchased plugins and associated toolbar and menu items. For the enablement guide for each plugin, refer to [Premium plugins](https://www.tiny.cloud/docs/tinymce/latest/plugins/#premium-plugins). > **Note:** Configuration of the following options occurs automatically when using the Tiny Cloud: > > - `editimage_cors_hosts` > - `editimage_proxy_service_url` > - `export_image_cors_hosts` > - `export_image_proxy_service_url` > - `linkchecker_service_url` > - `mediaembed_service_url` > - `spellchecker_rpc_url` > - `autocorrect_service_url` ## Cloud deployment of plugins Only Source: https://www.tiny.cloud/docs/tinymce/latest/features-only/ Last updated: 2026-09-28T00:27:52Z A hybrid deployment of Tiny Cloud allows the loading of premium plugins in a self-hosted environment. Download and install the [TinyMCE Community edition](https://www.tiny.cloud/get-tiny/) to get started. Signing up for a free API key provides entitlements to the premium [Image Editing](https://www.tiny.cloud/docs/tinymce/latest/editimage/) plugin. A Tiny Cloud image proxy server must already be configured. Premium plugins can be purchased at any time once the API key has been set up. ### Step 1: Insert the custom script tag into the webpage Add the following script in the webpage once the script tag to load TinyMCE has been specified. Be sure to substitute 'no-api-key' with your api key. ```js ``` ### Step 2: Specify purchased TinyMCE plugins and toolbar buttons > **Note:** It may take up to 30 minutes for the purchased plugin to be available to TinyMCE. Clear the browser’s cache. Extend the [TinyMCE configuration](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/) to include any additional purchased plugins and associated toolbar and menu items. For the enablement guide for each plugin, refer to [Premium plugins](https://www.tiny.cloud/docs/tinymce/latest/plugins/#premium-plugins). > **Note:** Configuration of the following options occurs automatically when using the Tiny Cloud: > > - `editimage_cors_hosts` > - `editimage_proxy_service_url` > - `export_image_cors_hosts` > - `export_image_proxy_service_url` > - `linkchecker_service_url` > - `mediaembed_service_url` > - `spellchecker_rpc_url` > - `autocorrect_service_url` The following is a complete example, where: - The Tiny Cloud `API key` has the value `no-api-key`. - The Tiny Cloud has the [Spell Checker](https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-spellchecker/) plugin enabled. ```js ``` ### Step 3: Forward proxy and firewall configuration If the network has a firewall or forward proxy that controls access to the internet, ensure that the following URLs are accessible: - All URLs where the editor is deployed. - All URLs where the plugins are deployed. - `*.tiny.cloud` — covers all Tiny Cloud services, including the image proxy, link checker, spell checker, AI API, and document converters. Ensure the `tiny-api-key` and `tinymce-api-key` headers are retained while requesting the above URLs. For the full list of Tiny Cloud service domains and required headers, see [Firewall and proxy allowlisting](https://www.tiny.cloud/docs/tinymce/latest/tinymce-and-csp/#firewall-and-proxy-allowlisting). ## Cloud Troubleshooting Source: https://www.tiny.cloud/docs/tinymce/latest/cloud-troubleshooting/ Last updated: 2026-09-28T00:27:52Z When Tiny Cloud detects a problem, it will show an editor notification containing information about the problem. This page describes the cause and solution for common Tiny Cloud error notifications. > **Note:** The wording of the notifications shown here may differ from the actual notifications from Tiny Cloud. ### Invalid API Key #### "A valid API key is required to continue using TinyMCE. **Please alert the admin** to check the current API key. [Click here to learn more.](https://www.tiny.cloud/docs/tinymce/latest/invalid-api-key/) " ##### Cause This notification is shown when either: - An `apiKey` is not provided in the script tag, - An empty or missing `apiKey` is provided, or - The `apiKey` provided cannot be found on the Tiny Cloud server. The `apiKey` must be: - An exact length, - comprised of certain characters, and - created with a Tiny Cloud account on the [Tiny Account page](https://www.tiny.cloud/auth/signup/). For example: ```html ``` In this case, the editor will be in a **read-only** state, and a notification appears stating: **"A valid API key is required to continue using TinyMCE. Please alert the admin to check the current API key. Click here to learn more."** ##### Solution To resolve this issue: 1. Update the `src` URL to include your (website or application developer’s) Tiny Cloud API Key, by replacing the placeholder `no-api-key` with your actual API key. For example: if your API is `abcd1234`: ```html ``` 2. Check the `apiKey` provided in the script tag: - Remove any leading or trailing spaces. - Remove any other characters that are not in your `apiKey`. If you are using variable substitution, ensure that the variable is substituting properly. - Ensure the `apiKey+` matches the API key shown at [https://www.tiny.cloud/my-account](https://www.tiny.cloud/my-account). 3. If you do not have an API key, or need to retrieve your existing key, visit: [Tiny Cloud](https://www.tiny.cloud/auth/signup/). > **Note:** Visit our [Invalid API key](https://www.tiny.cloud/docs/tinymce/latest/invalid-api-key/) page for more information on how to fix an `invalid API key` issue with TinyMCE. ### No API Key #### "A valid API key is required to continue using TinyMCE." (Console message) ##### Cause When `no-api-key` is set as the `apiKey` the editor will be in a **read-only** state, and the user will see a **"Finish setting up"** dialog prompting them to add a valid API key, configure their domain, and explore premium features. ![onboarding finish setting up dialog](https://www.tiny.cloud/docs/tinymce/latest/_images/onboarding/onboarding-finish-setting-up-dialog.png) ##### Solution 1. Update the `src` URL to include your (website or application developer’s) Tiny Cloud API Key, by replacing the placeholder `no-api-key` with your actual API key. For example: if your API is `abcd1234`: ```html ``` To retrieve your API key, or to sign up for an API key, visit: [Tiny Cloud](https://www.tiny.cloud/auth/signup/). ### Domain Not Registered #### "This domain is not registered in the TinyMCE Customer Portal. **Please alert the admin** to add it to the approved domains to continue using TinyMCE. [Click here to learn more.](https://www.tiny.cloud/docs/tinymce/latest/invalid-api-key/) " ##### Cause This notification is shown when the [**Referer**](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer) of the page does not match the list of approved domains stored against your `apiKey`. Tiny Cloud verifies the domain TinyMCE is loading from by checking the domain portion of the **Referer** header in the network request. You can view a list of your approved domains on your [Tiny Account](https://www.tiny.cloud/my-account/). Sometimes the domain in the **Referer** header does not match with the URL in the browser’s address bar. To check the **Referer** header: - Open your browser’s *Developer’s Tools*. - Open the *Network* tab. - Find and select the request being made to load TinyMCE from Tiny Cloud with your API key. - Click on the **Headers** tab. In the section called **Request Headers** there should be a field for **Referer**. This is the value that TinyMCE is checking against your approved domains. It must match one of your approved domains listed on your [Tiny Account](https://www.tiny.cloud/my-account/). ##### Solution If the `Referer` is correct for the site, ensure that the domain is included in your list of approved domains on [Tiny Account](https://www.tiny.cloud/my-account/). If the `Referer` is not what you are expecting, you may need to adjust your application’s [**Referer** header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer) settings. ### Referer Heading Missing #### "We’re unable to check your domain because the referer header is missing. Please read the Guide on how to ensure your referer header is present, so we can then customize your editor experience." ##### Cause - This notification is shown if the [**Referer** header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer) is absent for the network request when loading TinyMCE from Tiny Cloud. Tiny Cloud verifies the domain TinyMCE is loading from by checking the domain of the **Referer** header in the network request. - *Referer* headers are sometimes removed by browser settings or browser extensions. Tiny Cloud only needs the domain in the **Referer** header, so for improved performance and privacy Tiny recommends setting the `referrerpolicy` to `origin` when requesting Tiny Cloud resources. ##### Solution Identify which browser setting or extension is responsible for blocking the **Referer** being sent. A common extension is `Referer Control`: - [Google Chrome](https://chrome.google.com/webstore/detail/referer-control/hnkcfpcejkafcihlgbojoidoihckciin?hl=en) - [Firefox](https://addons.mozilla.org/en-US/firefox/addon/referercontrol/) Once you have identified the setting or extension, modify it to allow just the `Origin` of the `Referer` to be sent. Alternatively, disable the extension or setting for any pages using Tiny Cloud. ### Troubleshooting Premium Plugins #### "The *_* premium plugin is not enabled on your API key. Upgrade your account." ##### Cause This notification is shown when your API key does not have access to the premium plugin being requested. This could be the result of a trial expiring, and your TinyMCE configuration attempting to load premium plugins you can no longer access. You may also be seeing this notification if you are using the wrong API key. Ensure that you are using the API key that has the right entitlements. ##### Solution Either remove the premium plugin from your TinyMCE configuration, or upgrade your subscription to provide access to that premium plugin. > **Note:** Visit our [Invalid API key](https://www.tiny.cloud/docs/tinymce/latest/invalid-api-key/) page for more information on how to fix a `invalid API key` with TinyMCE. ### Read-only mode - No API Key #### “TinyMCE is in read-only mode. **Please alert the admin** that an API key is required for continued use. [Learn more](https://www.tiny.cloud/docs/tinymce/latest/invalid-api-key/) ##### Cause "No API Key (Read only mode)" This message is sent when the developer has not supplied an API key, typically because they’ve copied a getting-started script and have not completed the official [signup](https://www.tiny.cloud/auth/signup/) process to get an API key. ##### Solution - **Please alert your Admin** that an API key is required for continued use. [Learn more](https://www.tiny.cloud/docs/tinymce/latest/invalid-api-key/), or - Sign up for a API key by visiting [www.tiny.cloud/auth/signup](https://www.tiny.cloud/auth/signup/), and - Update your TinyMCE configuration. > **Note:** Visit our [Invalid API key](https://www.tiny.cloud/docs/tinymce/latest/invalid-api-key/) page for more information on how to fix a `invalid API key` with TinyMCE. ### Read-only mode - Invalid API Key #### “TinyMCE is in read-only mode. **Please alert the admin** to provide a valid API key to continue use. [Learn more](https://www.tiny.cloud/docs/tinymce/latest/invalid-api-key/) Your TinyMCE editor state has been set to read-only mode.” ##### Cause "Invalid API Key (Read only-mode)" This message is shown when the API key is not correct, perhaps because of a typo. ##### Solution - Login to your TinyMCE account and confirm that your API key matches your unique key by visiting [www.tiny.cloud/auth/login/](https://www.tiny.cloud/auth/login/). - or to sign up for an API key, visit: [Tiny Cloud](https://www.tiny.cloud/auth/signup/). ### Read-only mode - Invalid Origin #### “TinyMCE is in read-only mode. **Please request that the admin** add this domain to the approved domains in the Customer Portal. For more information see [Domain not registered](https://www.tiny.cloud/docs/tinymce/latest/cloud-troubleshooting/#domain-not-registered) ” ##### Cause "Invalid Origin (Read only mode)" This message is shown when TinyMCE is loaded from a domain that has not been added to the approved domains in our account portal. ##### Solution Please request that your admin add this domain to the approved domains in the Customer Portal. For more information see [Domain not registered](https://www.tiny.cloud/docs/tinymce/latest/cloud-troubleshooting/#domain-not-registered) > **Note:** From [TinyMCE 7.6.0](https://www.tiny.cloud/docs/tinymce/7/7.6.0-release-notes/#overview) onwards, the editor uses disabled mode instead of read-only mode. ## Commands Available for TinyMCE Source: https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/ Last updated: 2026-08-31T06:13:46Z ### Overview - [Executable commands](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#executable-commands) - [Listing core and plugin editor commands](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#listing-core-and-plugin-editor-commands) - [Core Editor commands](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#core-editor-commands) - [Plugin Commands](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#plugin-commands) - [Editor Management Commands](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#editor-management-commands) - [Query command states](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#query-command-states) - [Listing core and plugin query command states](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#listing-core-and-plugin-query-command-states) - [Available query command states](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#available-query-command-states) - [Query command values](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#query-command-values) - [Listing core and plugin Query command values](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#listing-core-and-plugin-query-command-values) - [Available Query command values](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#available-query-command-values) ### Executable commands The following tables show the existing editor commands. These commands are provided by `tinymce` and not by the browser’s internal commands. These commands can be executed using the [execCommand](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#execCommand) function. #### Listing core and plugin editor commands To retrieve a list of available commands from the active editor, run the following command from the browser console: ```js tinymce.activeEditor.editorCommands.commands.exec; ``` #### Core Editor commands ##### Supported browser-native commands The commands in the following table are provided by the TinyMCE editor and provide the same or similar functionality to the [native browser commands](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#commands). | Command | Description | | --- | --- | | Bold | Toggles bold formatting to selection. | | Italic | Toggles italic formatting to selection. | | Underline | Toggles underline formatting to selection. | | Strikethrough | Toggles strikethrough formatting to selection. | | Superscript | Toggles superscript formatting to selection. | | Subscript | Toggles subscript formatting to selection. | | Cut | Cuts the selected contents and puts in into users clipboard. | | Copy | Copies the selected contents and puts in into users clipboard. | | Paste | Pastes the current clipboard contents into the editor. | | ForeColor | Changes the text color of the text. The value passed in should be the color. | | BackColor | Changes the background color of the text. The value passed in should be the color. | | JustifyLeft | Left aligns the current text block/image. | | JustifyCenter | Center aligns the current text block/image. | | JustifyRight | Right aligns the current text block/image. | | JustifyFull | Full aligns the current text block/image. | | FontName | Font name to apply to the text. The value passed in should be the font family name. | | FontSize | Font size of the text. The value passed in should be a valid CSS font size. | | FormatBlock | Toggles the format of the current selection. The value passed in should be the format name. If no format is specified, the paragraph (`

`) format will be toggled. For a list of options, see: [Content formatting options - Built-in formats](https://www.tiny.cloud/docs/tinymce/latest/content-formatting/#built-in-formats). | | RemoveFormat | Removes any formats from the current selection. | | Indent | Indents the current selection. | | Outdent | Outdents the current selection. | | CreateLink | Inserts a link at the current selection. The value is the URL to add to the link(s). | | Unlink | Removes any links from the current selection. | | InsertHorizontalRule | Inserts a horizontal rule at the cursor location or inplace of the current selection. | | InsertParagraph | Inserts a new paragraph or new line at the current cursor or selection. | | InsertText | Inserts the passed value as plain text at the current cursor or selection. | | InsertHTML | Inserts the passed value as HTML at the current cursor or selection. | | InsertImage | Adds an image `` at the current cursor or selection. | | SelectAll | Selects all content in the editor. | | Delete | Deletes the current selection from the editor. | | ForwardDelete | Deletes the current selection or the character to the right of the cursor for a collapsed selection. | | Redo | Redoes the last change to the editor. | | Undo | Undoes the last change to the editor. | Examples ```js tinymce.activeEditor.execCommand('Bold'); tinymce.activeEditor.execCommand('Italic'); tinymce.activeEditor.execCommand('Underline'); tinymce.activeEditor.execCommand('Strikethrough'); tinymce.activeEditor.execCommand('Superscript'); tinymce.activeEditor.execCommand('Subscript'); tinymce.activeEditor.execCommand('Cut'); tinymce.activeEditor.execCommand('Copy'); tinymce.activeEditor.execCommand('Paste'); tinymce.activeEditor.execCommand('JustifyLeft'); tinymce.activeEditor.execCommand('JustifyCenter'); tinymce.activeEditor.execCommand('JustifyRight'); tinymce.activeEditor.execCommand('JustifyFull'); tinymce.activeEditor.execCommand('ForeColor', false, '#FF0000'); tinymce.activeEditor.execCommand('BackColor', false, '#FF0000'); tinymce.activeEditor.execCommand('FontName', false, 'courier new'); tinymce.activeEditor.execCommand('FontSize', false, '30px'); tinymce.activeEditor.execCommand('FormatBlock', false, 'bold'); tinymce.activeEditor.execCommand('RemoveFormat'); tinymce.activeEditor.execCommand('Indent'); tinymce.activeEditor.execCommand('Outdent'); tinymce.activeEditor.execCommand('CreateLink', false, 'https://www.tiny.cloud'); tinymce.activeEditor.execCommand('Unlink'); tinymce.activeEditor.execCommand('InsertHorizontalRule'); tinymce.activeEditor.execCommand('InsertParagraph'); tinymce.activeEditor.execCommand('InsertText', false, 'My text content'); tinymce.activeEditor.execCommand('InsertHTML', false, 'My HTML content'); tinymce.activeEditor.execCommand('InsertImage', false, 'https://www.example.com/image.png'); tinymce.activeEditor.execCommand('SelectAll'); tinymce.activeEditor.execCommand('Delete'); tinymce.activeEditor.execCommand('ForwardDelete'); tinymce.activeEditor.execCommand('Redo'); tinymce.activeEditor.execCommand('Undo'); ``` ##### Miscellaneous Core Commands The commands in the following table are provided by the TinyMCE editor and provide additional functionality that does not require any plugins to be enabled. | Command | Description | | --- | --- | | HiliteColor | Changes the background color of the text. The value passed in should be the color. NOTE: This is an alias for the `BackColor` command. | | InsertLineBreak | Adds a line break `
` at the current cursor or selection. | | InsertNewBlockAfter | inserts an empty block at the root level of the current TinyMCE document immediately after the block containing the current selection. | | InsertNewBlockBefore | inserts an empty block at the root level of the current TinyMCE document immediately before the block containing the current selection. | | JustifyNone | Removes any alignment to the selected text. | | Lang | Sets the language of the current selection. The value passed in should be a language spec described in [Content appearance options - `content_langs`](https://www.tiny.cloud/docs/tinymce/latest/content-localization/#content_langs). | | LineHeight | Sets the line height of the text. The value passed in should be a valid CSS line height. | | mceAddUndoLevel | Adds an undo level. | | mceApplyTextcolor | Applies text color or background color to the current selection. Requires an argument of either `'hilitecolor'` or `'forecolor'`, and the value of the color. | | mceAutocompleterClose | Closes any active autocompleter menu. | | mceAutocompleterReload | Reloads the autocompleter menu with new items. For the data to provide, see the [Autocompleter reload API](https://www.tiny.cloud/docs/tinymce/latest/autocompleter/#api). | | mceBlockQuote | Wraps the selected text blocks into a block quote. | | mceCleanup | Copies the current editor content and sets the content using the copy. | | mceEndUndoLevel | Adds an undo level. | | mceFocus | Focuses and activates the editor. Places DOM focus inside the editor and also sets the editor as the active editor instance on the page. | | mceInsertClipboardContent | Triggers a paste event at the cursor location or over the current selection. The command requires an object with: `html` containing the HTML content, or `text` containing plain text. | | mceInsertContent | Inserts contents at the current selection. The value passed in should be the contents to be inserted. | | mceInsertLink | Inserts a link at the current selection. The value is the URL to add to the link(s). NOTE: This is an alias for the `CreateLink` command. | | mceInsertNewLine | Adds a new line at the current cursor or selection, such as splitting the current paragraph element. The behavior of this setting can be controlled with the [newline_behavior](https://www.tiny.cloud/docs/tinymce/latest/content-behavior-options/#newline_behavior) option. | | mceNewDocument | Removes all contents of the editor. | | mcePrint | Opens the browser’s print dialog for the current page. | | mceRemoveNode | Removes the current node or the target node passed as the value (``). | | mceRemoveTextcolor | Removes the text color or background color from the current selection. Requires an argument of either `'hilitecolor'` or `'forecolor'`. | | mceReplaceContent | Replaces the current selection. The value passed in should be the new content. | | mceSelectNode | Selects a node in the editor. The target node is passed as the value (``). | | mceSelectNodeDepth | Selects the parent DOM node 'n' levels above the current node. | | mceSetContent | Sets the contents of the editor. The value is the contents to set as the editor contents. | | mceToggleFormat | Toggles a specified format by name. The value is the name of the format to toggle. For a list of options, see: [Content formatting options - Built-in formats](https://www.tiny.cloud/docs/tinymce/latest/content-formatting/#built-in-formats). | | mceTogglePlainTextPaste | Toggles paste as plain text. | | mceToggleVisualAid | Toggles the visual aids for: tables without borders and anchors. | | ToggleSidebar | Closes the current sidebar, or toggles the sidebar if the sidebar name is provided as a value (``). | | ToggleToolbarDrawer | Toggles the Toolbar Drawer. Can be used with the `skip_focus` option to prevent focusing the editor. For information on toolbars, see: [User interface options - Toolbar](https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/#toolbar). | Examples ```js tinymce.activeEditor.execCommand('HiliteColor', false, '#FF0000'); tinymce.activeEditor.execCommand('InsertLineBreak'); tinymce.activeEditor.execCommand('InsertNewBlockAfter') tinymce.activeEditor.execCommand('InsertNewBlockBefore') tinymce.activeEditor.execCommand('JustifyNone'); tinymce.activeEditor.execCommand('Lang', false, { code: 'en_US' }); /* OR */ tinymce.activeEditor.execCommand('Lang', false, { code: 'en_US', customCode: 'en-us-medical' }); tinymce.activeEditor.execCommand('LineHeight', false, '1.4'); tinymce.activeEditor.execCommand('mceAddUndoLevel'); tinymce.activeEditor.execCommand('mceApplyTextcolor', 'hilitecolor', '#FF0000'); tinymce.activeEditor.execCommand('mceAutocompleterClose'); tinymce.activeEditor.execCommand('mceAutocompleterReload', false, { fetchOptions: {} }); tinymce.activeEditor.execCommand('mceBlockQuote'); tinymce.activeEditor.execCommand('mceCleanup'); tinymce.activeEditor.execCommand('mceEndUndoLevel'); tinymce.activeEditor.execCommand('mceFocus'); tinymce.activeEditor.execCommand('mceInsertClipboardContent', false, { html: '

Hello, World!

' }); tinymce.activeEditor.execCommand('mceInsertContent', false, 'My new content'); tinymce.activeEditor.execCommand('mceInsertLink', false, 'https://www.tiny.cloud'); tinymce.activeEditor.execCommand('mceInsertNewLine'); tinymce.activeEditor.execCommand('mceNewDocument'); tinymce.activeEditor.execCommand('mcePrint'); tinymce.activeEditor.execCommand('mceRemoveNode'); /* OR */ tinymce.activeEditor.execCommand('mceRemoveNode', false, ''); tinymce.activeEditor.execCommand('mceSelectNode', false, ''); tinymce.activeEditor.execCommand('mceSelectNodeDepth', false, 2); // For two nodes up. tinymce.activeEditor.execCommand('mceSetContent', false, 'My content'); tinymce.activeEditor.execCommand('mceRemoveTextcolor', 'hilitecolor'); tinymce.activeEditor.execCommand('mceReplaceContent', false, 'My replacement content'); tinymce.activeEditor.execCommand('mceToggleFormat', false, 'bold'); tinymce.activeEditor.execCommand('mceTogglePlainTextPaste'); tinymce.activeEditor.execCommand('mceToggleVisualAid'); tinymce.activeEditor.execCommand('ToggleSidebar'); /* OR */ tinymce.activeEditor.execCommand('ToggleSidebar', false, ''); tinymce.activeEditor.execCommand('ToggleToolbarDrawer', false, null, { skip_focus: true }); ``` ##### Core Table Commands The following commands provide functionality for interacting with tables within the editor. These commands do not need the [`table` plugin](https://www.tiny.cloud/docs/tinymce/latest/table/) to work. > **Note:** Table row and table column cut, copy, and paste commands work with TinyMCE’s internal table clipboard, not the user’s system clipboard. | Command | Description | | --- | --- | | mceTableSizingMode | When `table_sizing_mode` is set to `'auto'`, this command sets the sizing mode of the currently selected table. For information on table sizing modes, see: [`table_sizing_mode` option](https://www.tiny.cloud/docs/tinymce/latest/table-options/#table_sizing_mode). | | mceTableApplyCellStyle | Applies the specified styles to the selected cells. The following styles can be changed with this command: `background-color`, `border-color`, `border-style`, and `border-width`. Providing an empty value for a style will remove the style, such as `{ 'background-color': '' }`. | | mceTableSplitCells | Splits the current merged table cell. | | mceTableMergeCells | Merges the selected cells. | | mceTableInsertRowBefore | Inserts a row before the current row. | | mceTableInsertRowAfter | Inserts a row after the current row. | | mceTableInsertColBefore | Inserts a column before the current column. | | mceTableInsertColAfter | Inserts a column after the current column. | | mceTableDeleteCol | Deletes the current column. | | mceTableDeleteRow | Deletes the current row. | | mceTableCutRow | Cuts the current row to the TinyMCE clipboard. | | mceTableCutCol | Cuts the current column to the TinyMCE clipboard. | | mceTableCopyRow | Copies the current row to the TinyMCE clipboard. | | mceTableCopyCol | Copies the current column to the TinyMCE clipboard. | | mceTablePasteRowBefore | Paste the TinyMCE clipboard row before the current row. | | mceTablePasteRowAfter | Paste the TinyMCE clipboard row after the current row. | | mceTablePasteColBefore | Paste the TinyMCE clipboard column before the current row. | | mceTablePasteColAfter | Paste the TinyMCE clipboard column after the current row. | | mceTableDelete | Deletes the current table. | | mceTableCellToggleClass | Adds a class to all selected cells that do not have it, or removes the class if all of them have it. | | mceTableToggleClass | Adds a class to the selected table, or removes the class if it already exists. | | mceTableToggleCaption | Adds a caption to the selected table, or removes the caption if it already exists. | | mceInsertTable | Inserts a table with the specified number of row and columns. | | mceTableRowType | Changes the current row or rows to the specified type, either: `'header'`, `'body'`, or `'footer'`. The structure of header rows is dependent on the [`table_header_type` option](https://www.tiny.cloud/docs/tinymce/latest/table-options/#table_header_type). | | mceTableColType | Changes all cells in the current column or columns to the specified type, either: `'td'` or `'th'`. | | mceTableCellType | Changes the current cell or cells to the specified type, either: `'td'` or `'th'`. | Examples ```js tinymce.activeEditor.execCommand('mceTableSizingMode', false, 'fixed'); tinymce.activeEditor.execCommand('mceTableSizingMode', false, 'relative'); tinymce.activeEditor.execCommand('mceTableSizingMode', false, 'responsive'); tinymce.activeEditor.execCommand('mceTableApplyCellStyle', false, { 'background-color': 'red', 'border-color': 'blue' }); tinymce.activeEditor.execCommand('mceTableApplyCellStyle', false, { 'background-color': '' }); // removes the current background-color tinymce.activeEditor.execCommand('mceTableSplitCells'); tinymce.activeEditor.execCommand('mceTableMergeCells'); tinymce.activeEditor.execCommand('mceTableInsertRowBefore'); tinymce.activeEditor.execCommand('mceTableInsertRowAfter'); tinymce.activeEditor.execCommand('mceTableInsertColBefore'); tinymce.activeEditor.execCommand('mceTableInsertColAfter'); tinymce.activeEditor.execCommand('mceTableDeleteCol'); tinymce.activeEditor.execCommand('mceTableDeleteRow'); tinymce.activeEditor.execCommand('mceTableCutRow'); tinymce.activeEditor.execCommand('mceTableCutCol'); tinymce.activeEditor.execCommand('mceTableCopyRow'); tinymce.activeEditor.execCommand('mceTableCopyCol'); tinymce.activeEditor.execCommand('mceTablePasteRowBefore'); tinymce.activeEditor.execCommand('mceTablePasteRowAfter'); tinymce.activeEditor.execCommand('mceTablePasteColBefore'); tinymce.activeEditor.execCommand('mceTablePasteColAfter'); tinymce.activeEditor.execCommand('mceTableDelete'); tinymce.activeEditor.execCommand('mceInsertTable', false, { rows: 2, columns: 2 }); tinymce.activeEditor.execCommand('mceInsertTable', false, { rows: 3, columns: 2, options: { headerRows: 1 } }); tinymce.activeEditor.execCommand('mceInsertTable', false, { rows: 3, columns: 2, options: { headerRows: 1, headerColumns: 1 } }); tinymce.activeEditor.execCommand('mceTableToggleClass', false, 'myclass'); tinymce.activeEditor.execCommand('mceTableCellToggleClass', false, 'mycellclass'); tinymce.activeEditor.execCommand('mceTableToggleCaption'); tinymce.activeEditor.execCommand('mceTableRowType', false, { type: 'header' }); tinymce.activeEditor.execCommand('mceTableColType', false, { type: 'th' }); tinymce.activeEditor.execCommand('mceTableCellType', false, { type: 'th' }); ``` #### Plugin Commands Commands are available for the following plugins: - [Advanced Lists](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#advancedlists) - [Enhanced Tables](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#enhanced-tables) - [Anchor](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#anchor) - [TinyMCE AI](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#tinymceai) - [Autoresize](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#autoresize) - [Case Change](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#casechange) - [Character Map](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#charactermap) - [Code](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#code) - [Code Sample](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#codesample) - [Comments](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#comments) - [Directionality](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#directionality) - [Enhanced Code Editor](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#enhancedcodeeditor) - [Emoticons](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#emoticons) - [Export to PDF](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#export-pdf) - [Export to Word](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#export-word) - [Footnotes](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#footnotes) - [Format Painter](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#formatpainter) - [Full Screen](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#fullscreen) - [Help](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#help) - [Image](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#image) - [Import from Word](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#import-word) - [Image Editing](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#editimage) - [Insert Date/Time](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#insertdatetime) - [Link](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#link) - [Lists](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#lists) - [List Styles](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#advancedlists) - [Math](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#math) - [Media](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#media) - [Nonbreaking Space](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#nonbreakingspace) - [Page Break](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#pagebreak) - [Permanent Pen](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#permanentpen) - [PowerPaste](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#powerpaste) - [Preview](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#preview) - [Revision History](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#revisionhistory) - [Save](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#save) - [Search and Replace](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#searchandreplace) - [Spell Checker](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#spellchecker) - [Table](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#table) - [Table of Content](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#tableofcontents) - [Templates](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#advtemplate) - [Visual Blocks](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#visualblocks) - [Visual Characters](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#visualcharacters) - [Word Count](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#wordcount) ##### Advanced Lists The following commands require the [Advanced Lists (`advlist`)](https://www.tiny.cloud/docs/tinymce/latest/advlist/) plugin. | Command | Description | | --- | --- | | ApplyOrderedListStyle | Converts the current selection to an ordered list. Accepts an object specifing the list type. | | ApplyUnorderedListStyle | Converts the current selection to an unordered list. Accepts an object specifing the list type. | For information on available list types, see: [MDN web docs - list-style-type](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#Values). Examples ```js tinymce.activeEditor.execCommand('ApplyOrderedListStyle', false, { 'list-style-type': 'decimal' }); tinymce.activeEditor.execCommand('ApplyUnorderedListStyle', false, { 'list-style-type': 'disc' }); ``` ##### Enhanced Tables The following commands require the [Enhanced Tables (`advtable`)](https://www.tiny.cloud/docs/tinymce/latest/advtable/) plugin. | Command | Description | | --- | --- | | mceAdvancedTableSort | Opens the Enhanced Table Sort Dialog for the current selection or cursor location. | | mceSortTableAdvanced | Performs an Enhanced Table Sort. For details, see [Using `mceSortTableAdvanced`](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#using-mcesorttableadvanced). | | mceSortTableByColumnAsc | Sorts the current table ascending by column based on the current cursor position or selection. | | mceSortTableByColumnDesc | Sorts the current table descending by column based on the current cursor position or selection. | | mceSortTableByRowAsc | Sorts the current table ascending by row based on the current cursor position or selection. | | mceSortTableByRowDesc | Sorts the current table descending by row based on the current cursor position or selection. | | mceTableToggleSeries | Toggles a series column on the selected table. For details, see [Using `mceTableToggleSeries`](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#using-mcetabletoggleseries). | Examples ```js tinymce.activeEditor.execCommand('mceAdvancedTableSort'); tinymce.activeEditor.execCommand('mceSortTableAdvanced', false, { sortby: 'row', roworcol: '2', sort: 'table', order: 'ascending' }); tinymce.activeEditor.execCommand('mceSortTableByColumnAsc'); tinymce.activeEditor.execCommand('mceSortTableByColumnDesc'); tinymce.activeEditor.execCommand('mceSortTableByRowAsc'); tinymce.activeEditor.execCommand('mceSortTableByRowDesc'); tinymce.activeEditor.execCommand('mceTableToggleSeries', false, { name: 'numeric' }); ``` ###### Using `mceSortTableAdvanced` `mceSortTableAdvanced` accepts an object with the following key-value pairs: | Name | Value | Requirement | Description | | --- | --- | --- | --- | | sortby | `'row'` or `'column'` | Required | | | roworcol | `number` | Required | A zero-indexed integer in a string representing the row from the top of the table or column from the left of the table. | | sort | `'row'`, `'column'`, `'selection'`, or `'table'` | Required | | | order | `'ascending'` or `'descending'` | Required | | ###### Using `mceTableToggleSeries` `mceTableToggleSeries` accepts an object with the following key-value pairs: | Name | Value | Requirement | Description | | --- | --- | --- | --- | | name | `string` | Required | Specifies the series to toggle. Series and their associated names are configured using the [`advtable_value_series` option](https://www.tiny.cloud/docs/tinymce/latest/advtable/#advtable_value_series). | If the table already has a series column that uses the series specified in `name`, the series column will be removed from the table. Otherwise, a new series column will be created, replacing any other series column that may already be in the table. ##### Anchor The following command requires the [Anchor (`anchor`)](https://www.tiny.cloud/docs/tinymce/latest/anchor/) plugin. | Command | Description | | --- | --- | | mceAnchor | Opens the insert/edit anchor dialog. | Example ```js tinymce.activeEditor.execCommand('mceAnchor'); ``` ##### Autoresize The following command requires the [Autoresize (`autoresize`)](https://www.tiny.cloud/docs/tinymce/latest/autoresize/) plugin. | Command | Description | | --- | --- | | mceAutoResize | Automatically resizes the editor to fit its current content. | ###### Manual autoresize trigger The `mceAutoResize` command can be used to manually trigger the autoresize functionality. This is useful when: - Content is dynamically added or removed programmatically - The editor needs to be resized after external changes - You want to ensure the editor size matches its content at a specific moment Example: triggering autoresize manually ```js // Resize the active editor tinymce.activeEditor.execCommand('mceAutoResize'); // Resize a specific editor by ID tinymce.get('my-editor-id').execCommand('mceAutoResize'); ``` ##### Case Change The following commands require the [Case Change (`casechange`)](https://www.tiny.cloud/docs/tinymce/latest/casechange/) plugin. | Command | Description | | --- | --- | | mceLowerCase | Converts selected text to lower-case. | | mceTitleCase | Converts selected text to title-case. | | mceUpperCase | Converts selected text to upper-case. | Examples ```js tinymce.activeEditor.execCommand('mceLowerCase'); tinymce.activeEditor.execCommand('mceTitleCase'); tinymce.activeEditor.execCommand('mceUpperCase'); ``` ##### Character Map The following command requires the [Character Map (`charmap`)](https://www.tiny.cloud/docs/tinymce/latest/charmap/) plugin. | Command | Description | | --- | --- | | mceShowCharmap | Opens the character map dialog. | Example ```js tinymce.activeEditor.execCommand('mceShowCharmap'); ``` ##### Code The following command requires the [Code (`code`)](https://www.tiny.cloud/docs/tinymce/latest/code/) plugin. | Command | Description | | --- | --- | | mceCodeEditor | Opens the code editor dialog. | Example ```js tinymce.activeEditor.execCommand('mceCodeEditor'); ``` ##### Code Sample The following command requires the [Code Sample (`codesample`)](https://www.tiny.cloud/docs/tinymce/latest/codesample/) plugin. | Command | Description | | --- | --- | | CodeSample | Opens the Code Sample dialog at the cursor position or converts the current selection to a `` block. | Example ```js tinymce.activeEditor.execCommand('CodeSample'); ``` ##### Comments The following commands require the [Comments (`tinycomments`)](https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-comments/) plugin. | Command | Description | | --- | --- | | tc-delete-conversation-at-cursor | Attempts to delete the comment at the current cursor position. A confirmation dialog will be shown prior to deletion. | | tc-try-delete-all-conversations | Attempts to delete all comments in the editor. A confirmation dialog will be shown prior to deletion. | | ToggleSidebar | Toggles the specified sidebar open or closed. When used with the 'showcomments' parameter, this opens the comments sidebar. | Examples ```js tinymce.activeEditor.execCommand('tc-delete-conversation-at-cursor'); tinymce.activeEditor.execCommand('tc-try-delete-all-conversations'); tinymce.activeEditor.execCommand('ToggleSidebar', false, 'showcomments'); ``` ##### Directionality The following commands require the [Directionality (`directionality`)](https://www.tiny.cloud/docs/tinymce/latest/directionality/) plugin. | Command | Description | | --- | --- | | mceDirectionLTR | Changes the directionality to LTR. | | mceDirectionRTL | Changes the directionality to RTL. | Examples ```js tinymce.activeEditor.execCommand('mceDirectionLTR'); tinymce.activeEditor.execCommand('mceDirectionRTL'); ``` ##### Enhanced Code Editor The following command requires the [Enhanced Code Editor (`advcode`)](https://www.tiny.cloud/docs/tinymce/latest/advcode/) plugin. | Command | Description | | --- | --- | | mceCodeEditor | Opens the code editor dialog. | Example ```js tinymce.activeEditor.execCommand('mceCodeEditor'); ``` ##### Emoticons The following commands require the [Emoticons (`emoticons`)](https://www.tiny.cloud/docs/tinymce/latest/emoticons/) plugin. | Command | Description | | --- | --- | | mceEmoticons | Opens the Emojis dialog. | Example ```js tinymce.activeEditor.execCommand('mceEmoticons'); ``` ##### Export to PDF The following commands require the [Export to PDF (`exportpdf`)](https://www.tiny.cloud/docs/tinymce/latest/exportpdf/) plugin. | Command | Description | | --- | --- | | ExportPDF | Generates a PDF file directly from the editor with the filename `document.pdf`. | Example ```js tinymce.activeEditor.execCommand('ExportPDF'); ``` ##### Export to Word The following commands require the [Export to Word (`exportword`)](https://www.tiny.cloud/docs/tinymce/latest/exportword/) plugin. | Command | Description | | --- | --- | | ExportWord | Uses `editor.getContent()` and generates a new `document.docx` Word file that can be saved to local disk. | Examples ```js tinymce.activeEditor.execCommand('ExportWord'); ``` ##### Footnotes The following commands require the [Footnotes (`footnotes`)](https://www.tiny.cloud/docs/tinymce/latest/footnotes/) plugin. | Command | Description | | --- | --- | | mceInsertFootnote | Inserts a superscripted footnote number into the editor at the selection, and creates a new entry in the footnotes section linked to that footnote. | | mceUpdateFootnotes | Manually updates the state of all footnotes in a TinyMCE document. | Example ```js tinymce.activeEditor.execCommand('mceInsertFootnote'); tinymce.activeEditor.execCommand('mceUpdateFootnotes'); ``` ##### Format Painter The following commands require the [Format Painter (`formatpainter`)](https://www.tiny.cloud/docs/tinymce/latest/formatpainter/) plugin. | Command | Description | | --- | --- | | mceRetrieveFormats | Retrieves the formats from the current selection. | | mcePaintFormats | Applies the formats retrieved using `mceRetrieveFormats` to the current selection. | | mceToggleFormatPainter | Toggles the Format Painter. | Examples ```js tinymce.activeEditor.execCommand('mceRetrieveFormats'); tinymce.activeEditor.execCommand('mcePaintFormats'); tinymce.activeEditor.execCommand('mceToggleFormatPainter'); ``` ##### Full Screen The following command requires the [Full Screen (`fullscreen`)](https://www.tiny.cloud/docs/tinymce/latest/fullscreen/) plugin and is **only** applicable when the editor is in classic mode. | Command | Description | | --- | --- | | mceFullScreen | Toggles fullscreen mode. | Example ```js tinymce.activeEditor.execCommand('mceFullScreen'); ``` ##### Help The following command requires the [Help (`help`)](https://www.tiny.cloud/docs/tinymce/latest/help/) plugin. | Command | Description | | --- | --- | | mceHelp | Opens the editor Help dialog. | Example ```js tinymce.activeEditor.execCommand('mceHelp'); ``` ##### Image The following command requires the [Image (`image`)](https://www.tiny.cloud/docs/tinymce/latest/image/) plugin. | Command | Description | | --- | --- | | mceImage | Opens the insert/edit image dialog. | Example ```js tinymce.activeEditor.execCommand('mceImage'); ``` ##### Import from Word The following command requires the [Import from Word (`importword`)](https://www.tiny.cloud/docs/tinymce/latest/importword/) plugin. | Command | Description | | --- | --- | | ImportWord | Opens a file picker, that allows content from either a `.docx` or `.dotx` file to be imported into the editor. | Example ```js document.querySelector('button').addEventListener('click', () => tinymce.activeEditor.execCommand('ImportWord') ); ``` > **Note:** The `ImportWord` command cannot be directly invoked through a script at the top level or from the browser console. Instead, it necessitates a specific user action within the user interface, such as clicking a toolbar button. To ensure correct execution, the command should be called within the scope of an event handler tied to a specific user interaction, as shown in the example. ##### Image Editing The following commands require the [Image Editing (`editimage`)](https://www.tiny.cloud/docs/tinymce/latest/editimage/) plugin. | Command | Description | | --- | --- | | mceEditImage | Opens the Image editing dialog. | | mceImageRotateRight | Rotates the selected image 90 degrees clockwise. | | mceImageRotateLeft | Rotates the selected image 90 degrees counterclockwise. | | mceImageFlipVertical | Flips the selected image vertically. | | mceImageFlipHorizontal | Flips the selected image horizontally. | Examples ```js tinymce.activeEditor.execCommand('mceEditImage'); tinymce.activeEditor.execCommand('mceImageRotateRight'); tinymce.activeEditor.execCommand('mceImageRotateLeft'); tinymce.activeEditor.execCommand('mceImageFlipVertical'); tinymce.activeEditor.execCommand('mceImageFlipHorizontal'); ``` ##### Insert Date/Time The following commands require the [Insert Date/Time (`insertdatetime`)](https://www.tiny.cloud/docs/tinymce/latest/insertdatetime/) plugin. | Command | Description | | --- | --- | | mceInsertDate | Inserts the current date as a human readable string. | | mceInsertTime | Inserts the current time as a human readable string. | Examples ```js tinymce.activeEditor.execCommand('mceInsertDate'); tinymce.activeEditor.execCommand('mceInsertTime'); ``` ##### Link The following command requires the [Link (`link`)](https://www.tiny.cloud/docs/tinymce/latest/link/) plugin. | Command | Description | | --- | --- | | mceLink | Opens the Link dialog or the link context toolbar at the current cursor position or for the current selection. The behaviour depends on the [`link_quicklink`](https://www.tiny.cloud/docs/tinymce/latest/link/#link_quicklink) option. Pass `{ dialog: true }` as the third argument to always open the full Link dialog, even when `link_quicklink` is enabled. | Example: open link dialog or context toolbar (default behaviour) ```js tinymce.activeEditor.execCommand('mceLink'); ``` Example: always open the full Link dialog ```js tinymce.activeEditor.execCommand('mceLink', false, { dialog: true }); ``` ##### Lists The following commands require the [Lists (`lists`)](https://www.tiny.cloud/docs/tinymce/latest/lists/) plugin. | Command | Description | | --- | --- | | InsertDefinitionList | Inserts a definition list into the editor. | | InsertOrderedList | Inserts an ordered list into the editor. | | InsertUnorderedList | Inserts an unordered list into the editor. | | mceListUpdate | Updates list attributes or styles. | | mceListProps | Opens the list properties dialog. | | RemoveList | Removes the list elements from the selection. | Examples ```js tinymce.activeEditor.execCommand('InsertDefinitionList', false, { 'list-item-attributes': {class: 'mylistitemclass'}, 'list-attributes': {id: 'mylist'} }); tinymce.activeEditor.execCommand('InsertOrderedList', false, { 'list-style-type': 'decimal', 'list-item-attributes': {class: 'mylistitemclass'}, 'list-attributes': {id: 'mylist'} }); tinymce.activeEditor.execCommand('InsertUnorderedList', false, { 'list-style-type': 'disc', 'list-item-attributes': {class: 'mylistitemclass'}, 'list-attributes': {id: 'mylist'} }); tinymce.activeEditor.execCommand('mceListUpdate', false, { styles: { 'background-color': 'powderblue' } }); tinymce.activeEditor.execCommand('mceListUpdate', false, { attrs: { contenteditable: 'false' } }); tinymce.activeEditor.execCommand('mceListProps'); tinymce.activeEditor.execCommand('RemoveList'); ``` ##### List Styles The following commands require the [List Styles (`advlist`)](https://www.tiny.cloud/docs/tinymce/latest/advlist/) plugin. | Command | Description | | --- | --- | | ApplyOrderedListStyle | Converts the current selection to an ordered list. Accepts an object specifing the list type. | | ApplyUnorderedListStyle | Converts the current selection to an unordered list. Accepts an object specifing the list type. | For information on available list types, see: [MDN web docs - list-style-type](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#Values). Examples ```js tinymce.activeEditor.execCommand('ApplyOrderedListStyle', false, { 'list-style-type': 'decimal' }); tinymce.activeEditor.execCommand('ApplyUnorderedListStyle', false, { 'list-style-type': 'disc' }); ``` ##### Math The following commands require the [Math (`math`)](https://www.tiny.cloud/docs/tinymce/latest/math/) plugin. | Command | Description | | --- | --- | | Math | This command opens the Math dialog. | Examples ```js tinymce.activeEditor.execCommand('Math'); ``` ##### Media The following command requires the [Media (`media`)](https://www.tiny.cloud/docs/tinymce/latest/media/) plugin. | Command | Description | | --- | --- | | mceMedia | Opens the insert/edit media dialog. | Example ```js tinymce.activeEditor.execCommand('mceMedia'); ``` ##### Nonbreaking Space The following command requires the [Nonbreaking Space (`nonbreaking`)](https://www.tiny.cloud/docs/tinymce/latest/nonbreaking/) plugin. | Command | Description | | --- | --- | | mceNonBreaking | Inserts a non breaking space at the cursor location or overwrites the current selection. | Example ```js tinymce.activeEditor.execCommand('mceNonBreaking'); ``` ##### Page Break The following command requires the [Page Break (`pagebreak`)](https://www.tiny.cloud/docs/tinymce/latest/pagebreak/) plugin. | Command | Description | | --- | --- | | mcePageBreak | Inserts a virtual page break (``) at the cursor location or overwrites the current selection. | Example ```js tinymce.activeEditor.execCommand('mcePageBreak'); ``` ##### Permanent Pen The following commands require the [Permanent Pen (`permanentpen`)](https://www.tiny.cloud/docs/tinymce/latest/permanentpen/) plugin. | Command | Description | | --- | --- | | mceConfigurePermanentPen | Opens the Permanent Pen dialog. | | mceTogglePermanentPen | Toggles Permanent Pen. | Examples ```js tinymce.activeEditor.execCommand('mceConfigurePermanentPen'); tinymce.activeEditor.execCommand('mceTogglePermanentPen'); ``` ##### PowerPaste The following command requires the [PowerPaste (`powerpaste`)](https://www.tiny.cloud/docs/tinymce/latest/introduction-to-powerpaste/) plugin. | Command | Description | | --- | --- | | mceInsertClipboardContent | Triggers a paste event at the cursor location or over the current selection. HTML content will be automatically detected as Word, Google Docs, or standard HTML content and use the relevant paste path. The command requires an object with: `html` containing the HTML content, or `text` containing plain text. | | mceTogglePlainTextPaste | Toggles paste as plain text. | Example ```js tinymce.activeEditor.execCommand('mceInsertClipboardContent', false, { html: '

Hello, World!

' }); tinymce.activeEditor.execCommand('mceTogglePlainTextPaste'); ``` ##### Preview The following command requires the [Preview (`preview`)](https://www.tiny.cloud/docs/tinymce/latest/preview/) plugin. | Command | Description | | --- | --- | | mcePreview | Displays a preview of the editor contents. | Example ```js tinymce.activeEditor.execCommand('mcePreview'); ``` ##### Revision History The following commands require the [Revision History (`revisionhistory`)](https://www.tiny.cloud/docs/tinymce/latest/revisionhistory/) plugin. | Command | Description | | --- | --- | | revisionHistory | Toggle the Revision History view | Examples ```js tinymce.activeEditor.execCommand('revisionHistory'); ``` ##### Save The following commands require the [Save (`save`)](https://www.tiny.cloud/docs/tinymce/latest/save/) plugin. | Command | Description | | --- | --- | | mceCancel | Resets the editor content to the last save point created with `mceSave`, the *save* toolbar button, or the **Save** menu item. This command will reset the editor content to the initial state if no save points exist. | | mceSave | Saves the current editor contents. | Examples ```js tinymce.activeEditor.execCommand('mceCancel'); tinymce.activeEditor.execCommand('mceSave'); ``` ##### Search and Replace The following command requires the [Search and Replace (`searchreplace`)](https://www.tiny.cloud/docs/tinymce/latest/searchreplace/) plugin. | Command | Description | | --- | --- | | SearchReplace | Opens the search and replace dialog. | Example ```js tinymce.activeEditor.execCommand('SearchReplace'); ``` ##### Spell Checker The following commands require the [Spell Checker (`tinymcespellchecker`)](https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-spellchecker/) plugin. | Command | Description | | --- | --- | | mceSpellcheckEnable | Turns spellchecking on. | | mceSpellcheckDisable | Turns spellchecking off. | | mceSpellcheckDialog | Opens the spellchecking dialog. | | mceSpellcheckDialogClose | Closes the spellchecking dialog. | | mceSpellcheckUpdate | Checks the editor content for new misspellings, highlights them, and offers spelling suggestions. | Example ```js tinymce.activeEditor.execCommand('mceSpellcheckEnable'); tinymce.activeEditor.execCommand('mceSpellcheckDisable'); tinymce.activeEditor.execCommand('mceSpellcheckDialog'); tinymce.activeEditor.execCommand('mceSpellcheckDialogClose'); tinymce.activeEditor.execCommand('mceSpellcheckUpdate'); ``` ##### Table For additional commands that are provided by the core table functionality, see [Core Table Commands](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#core-table-commands). The following commands require the [Table (`table`)](https://www.tiny.cloud/docs/tinymce/latest/table/) plugin. | Command | Description | | --- | --- | | mceInsertTableDialog | Opens the insert/edit table dialog. | | mceTableProps | Opens the Table Properties dialog. | | mceTableRowProps | Opens the table row properties dialog. | | mceTableCellProps | Opens the table cell properties dialog. | Examples ```js tinymce.activeEditor.execCommand('mceInsertTableDialog'); tinymce.activeEditor.execCommand('mceTableProps'); tinymce.activeEditor.execCommand('mceTableRowProps'); tinymce.activeEditor.execCommand('mceTableCellProps'); ``` ##### Table of Contents The following commands require the [Table of Contents (`tableofcontents`)](https://www.tiny.cloud/docs/tinymce/latest/tableofcontents/) plugin. | Command | Description | | --- | --- | | mceInsertToc | Inserts a Table of Contents into the editor. | | mceUpdateToc | Updates an existing Table of Contents. | Examples ```js tinymce.activeEditor.execCommand('mceInsertToc'); tinymce.activeEditor.execCommand('mceUpdateToc'); ``` ##### TinyMCE AI The [TinyMCE AI (`tinymceai`)](https://www.tiny.cloud/docs/tinymce/latest/tinymceai/) plugin registers AI Chat and AI Review sidebars, Quick Actions-related editor commands, and uses the core `ToggleSidebar` command for sidebar visibility. The following partial covers `ToggleSidebar`, floating-sidebar behavior, and plugin command names. ###### Toggling the AI Chat and AI Review sidebars AI Chat and AI Review use sidebars registered by the plugin. To show or hide them programmatically, use the core `ToggleSidebar` command (listed in the [Miscellaneous Core Commands](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#miscellaneous-core-commands) table), not a command defined by the `tinymceai` plugin. Pass the sidebar identifier as the third argument: - `'tinymceai-chat'` — AI Chat - `'tinymceai-review'` — AI Review Examples ```js // Open the AI Chat sidebar tinymce.activeEditor.execCommand('ToggleSidebar', false, 'tinymceai-chat'); // Close the current sidebar (pass the same ID again to toggle off) tinymce.activeEditor.execCommand('ToggleSidebar', false, 'tinymceai-chat'); // Open the AI Review sidebar tinymce.activeEditor.execCommand('ToggleSidebar', false, 'tinymceai-review'); ``` > **Note:** These commands work regardless of [`tinymceai_sidebar_type`](https://www.tiny.cloud/docs/tinymce/latest/tinymceai/#tinymceai_sidebar_type) (`'static'` or `'floating'`). The `ToggleSidebar` event and `queryCommandValue('ToggleSidebar')` also behave the same for both sidebar types. ###### TinyMCE AI plugin commands The [`tinymceai`](https://www.tiny.cloud/docs/tinymce/latest/tinymceai/) plugin registers the following editor commands. They mirror the Quick Actions, Chat, and Review user interface: each invocation returns immediately while the plugin performs any network and UI work asynchronously. | Command | Third argument | Description | | --- | --- | --- | | `TinyMCEAIQuickActionImproveWriting` | | Runs the **Improve writing** quick action. | | `TinyMCEAIQuickActionContinueWriting` | | Runs the **Continue writing** quick action. | | `TinyMCEAIQuickActionCheckGrammar` | | Runs the **Fix grammar** quick action. | | `TinyMCEAIQuickActionMakeShorter` | | Runs **Make shorter**. | | `TinyMCEAIQuickActionMakeLonger` | | Runs **Make longer**. | | `TinyMCEAIQuickActionToneCasual` | | Runs **More casual** tone. | | `TinyMCEAIQuickActionToneDirect` | | Runs **More direct** tone. | | `TinyMCEAIQuickActionToneFriendly` | | Runs **More friendly** tone. | | `TinyMCEAIQuickActionToneConfident` | | Runs **More confident** tone. | | `TinyMCEAIQuickActionToneProfessional` | | Runs **More professional** tone. | | `TinyMCEAIQuickActionTranslate` | `string` | Runs **Translate** with the given language label (same string family as [`tinymceai_languages`](https://www.tiny.cloud/docs/tinymce/latest/tinymceai/#tinymceai_languages) `language` values). | | `TinyMCEAIQuickActionCustom` | `{ prompt, model }` | Runs a custom quick action with the given prompt and model (same behavior as [`tinymceai_quickactions_custom`](https://www.tiny.cloud/docs/tinymce/latest/tinymceai/#tinymceai_quickactions_custom) preview actions). | | `TinyMCEAIQuickActionsExplain` | | Opens Chat with the built-in **Explain** prompt. | | `TinyMCEAIQuickActionsSummarize` | | Opens Chat with the built-in **Summarize** prompt. | | `TinyMCEAIQuickActionsHighlightKeyPoints` | | Opens Chat with the built-in **Highlight key points** prompt. | | `TinyMCEAIChatPrompt` | `{ prompt, displayedPrompt? }` | Opens the Chat sidebar if needed, then sends `prompt` to the back end. Optional `displayedPrompt` controls the label shown in the chat UI when it differs from the text sent to the model. | | `TinyMCEAIReviewProofread` | | Runs the **Proofread** review. | | `TinyMCEAIReviewClarity` | | Runs the **Improve clarity** review. | | `TinyMCEAIReviewReadability` | | Runs the **Improve readability** review. | | `TinyMCEAIReviewMakeLonger` | | Runs the **Change length** review with the **Longer** option. | | `TinyMCEAIReviewMakeShorter` | | Runs the **Change length** review with the **Shorter** option. | | `TinyMCEAIReviewToneCasual` | | Runs the **Adjust tone and style** review with the **Casual** tone. | | `TinyMCEAIReviewToneDirect` | | Runs the **Adjust tone and style** review with the **Direct** tone. | | `TinyMCEAIReviewToneFriendly` | | Runs the **Adjust tone and style** review with the **Friendly** tone. | | `TinyMCEAIReviewToneConfident` | | Runs the **Adjust tone and style** review with the **Confident** tone. | | `TinyMCEAIReviewToneProfessional` | | Runs the **Adjust tone and style** review with the **Professional** tone. | | `TinyMCEAIReviewCustom` | `String`, `{ prompt, model, name }`, or `{ id, value }` | Runs a review from a custom prompt, or runs an [integrator-defined review](https://www.tiny.cloud/docs/tinymce/latest/tinymceai/#integrator-defined-reviews) by identifier. See [Values for `TinyMCEAIReviewCustom`](https://www.tiny.cloud/docs/tinymce/latest/editor-command-identifiers/#tinymceai-review-custom-values). | Each `TinyMCEAIReview…` command opens the Review sidebar and runs the review, with the same result as selecting that review in the sidebar. Running a review command while another review is in progress stops the earlier review and starts the requested one. > **Note:** Command names use the `TinyMCEAIQuickActions…` prefix (with an `s`) for **Explain**, **Summarize**, and **Highlight key points** — these map to the [chat prompts](https://www.tiny.cloud/docs/tinymce/latest/tinymceai/#tinymceai_quickactions_chat_prompts) submenu, not to standalone `TinyMCEAIQuickAction…` spellings. Example: translate and custom quick action ```js tinymce.activeEditor.execCommand('TinyMCEAIQuickActionTranslate', false, 'swedish'); tinymce.activeEditor.execCommand('TinyMCEAIQuickActionCustom', false, { prompt: 'Uppercase text', model: 'gpt-4.1' }); ``` Example: chat prompt with a shorter label in the UI ```js tinymce.activeEditor.execCommand('TinyMCEAIChatPrompt', false, { prompt: 'Explain the current selection in Klingon', displayedPrompt: 'Explain' }); ``` Example: running built-in reviews ```js tinymce.activeEditor.execCommand('TinyMCEAIReviewProofread'); tinymce.activeEditor.execCommand('TinyMCEAIReviewToneProfessional'); ``` ###### Values for `TinyMCEAIReviewCustom` The `TinyMCEAIReviewCustom` command accepts three forms of third argument. A `String` runs a review from that prompt on the default model, titled **Custom review**: ```js tinymce.activeEditor.execCommand('TinyMCEAIReviewCustom', false, 'Check for passive voice'); ``` An object with a `prompt` property runs a review from a custom prompt: - `prompt` (`String`): The prompt sent to the model. This property is required. - `model` (optional `String`): The model that runs the review. When omitted, the review runs on the model set by [`tinymceai_default_model`](https://www.tiny.cloud/docs/tinymce/latest/tinymceai/#tinymceai_default_model). For the available model identifiers, see [AI Models](https://www.tiny.cloud/docs/tinymce/latest/tinymceai-models/). - `name` (optional `String`): The title shown above the review. When omitted, the title is **Custom review**. ```js tinymce.activeEditor.execCommand('TinyMCEAIReviewCustom', false, { prompt: 'Check the document for passive voice', model: 'agent-1', name: 'Passive voice' }); ``` An object with an `id` property runs an [integrator-defined review](https://www.tiny.cloud/docs/tinymce/latest/tinymceai/#integrator-defined-reviews) configured in [`tinymceai_reviews`](https://www.tiny.cloud/docs/tinymce/latest/tinymceai/#tinymceai_reviews): - `id` (`String`): The `id` of the integrator-defined review. This property is required. - `value` (optional `String`): The value passed to the review. A `simple` review takes no value. For a `list` review, the value must match one of the review’s `options` values; when omitted, the first option is used. For an `input` review, the value is the text substituted into the prompt, and it is required. ```js tinymce.activeEditor.execCommand('TinyMCEAIReviewCustom', false, { id: 'integrator-list-review', value: 'swedish' }); ``` When the value does not match any of these forms, TinyMCE logs an error to the browser console and runs no review. This also applies when the prompt or identifier is blank, when no integrator-defined review matches the identifier, when a `list` review value is not one of its options, and when an `input` review is run without a value. ##### Templates The following commands require the [Templates (`advtemplate`)](https://www.tiny.cloud/docs/tinymce/latest/advanced-templates/) plugin. | Command | Description | | --- | --- | | AdvTemplateAddDialog | Opens the `Add Template` dialog, allowing the current selection to be added as a template. | | AdvTemplateInsertDialog | Opens the `Insert Template` dialog, allowing a template to be inserted at the current selection | | AdvTemplateInsertTemplateById | Adds a new template specified by the value of its ID. | Example ```js tinymce.activeEditor.execCommand('AdvTemplateAddDialog'); tinymce.activeEditor.execCommand('AdvTemplateInsertDialog'); // Adds a new template, which ID is 122, to the document. tinymce.activeEditor.execCommand('AdvTemplateInsertTemplateById', false, '122') ``` ##### Visual Blocks The following command requires the [Visual Blocks (`visualblocks`)](https://www.tiny.cloud/docs/tinymce/latest/visualblocks/) plugin. | Command | Description | | --- | --- | | mceVisualBlocks | Toggles visual blocks on/off. | Example ```js tinymce.activeEditor.execCommand('mceVisualBlocks'); ``` ##### Visual Characters The following command requires the [Visual Characters (`visualchars`)](https://www.tiny.cloud/docs/tinymce/latest/visualchars/) plugin. | Command | Description | | --- | --- | | mceVisualChars | Toggles visual characters on/off. | Example ```js tinymce.activeEditor.execCommand('mceVisualChars'); ``` ##### Word Count The following command requires the [Word Count (`wordcount`)](https://www.tiny.cloud/docs/tinymce/latest/visualchars/) plugin. | Command | Description | | --- | --- | | mceWordCount | Opens the Word Count summary dialog. | Example ```js tinymce.activeEditor.execCommand('mceWordCount'); ``` #### Editor Management Commands The following commands are used to manage editor instances. For example: ```js tinymce.execCommand('mceAddEditor', false, { id: '', options: {} }); tinymce.execCommand('mceRemoveEditor', false, ''); tinymce.execCommand('mceToggleEditor', false, { id: '' }); tinymce.execCommand('mceToggleEditor', false, { index: '' }); ``` | Command | Description | | --- | --- | | mceAddEditor | Converts an HTML or DOM element with the specified ID into an editor instance that uses the specified editor configuration options. For information on configuring the editor, see: [Basic Setup](https://www.tiny.cloud/docs/tinymce/latest/basic-setup/). | | mceRemoveEditor | Removes an editor instance with the specified ID. | | mceToggleEditor | Runs `mceAddEditor` if an editor is not detected for the specified ID, otherwise it runs either [hide](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#hide) if the editor is visible or [show](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#show) if it is not visible. | ### Query command states TinyMCE provides the `queryCommandState` API to allow developers to determine the current state of selected content. The query will return `true` if the content is formatted using the same CSS styles and elements used by the corresponding command. #### Listing core and plugin query command states To retrieve a list of avaliable queryable states from the active editor, run the following command from the browser console: ```js tinymce.activeEditor.editorCommands.commands.state; ``` #### Available query command states The following command states can be queried using the [queryCommandState](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#queryCommandState) API. | Command | Description | | --- | --- | | Bold | Returns `true` if the content is formatted using the same markup as the TinyMCE `Bold` command. | | InsertDefinitionList | Returns `true` if the content is formatted using the same markup as the TinyMCE `InsertDefinitionList` command. | | InsertOrderedList | Returns `true` if the content is formatted using the same markup as the TinyMCE `InsertOrderedList` command. | | InsertUnorderedList | Returns `true` if the content is formatted using the same markup as the TinyMCE `InsertUnorderedList` command. | | Italic | Returns `true` if the content is formatted using the same markup as the TinyMCE `Italic` command. | | JustifyCenter | Returns `true` if the content is formatted using the same markup as the TinyMCE `JustifyCenter` command. | | JustifyFull | Returns `true` if the content is formatted using the same markup as the TinyMCE `JustifyFull` command. | | JustifyLeft | Returns `true` if the content is formatted using the same markup as the TinyMCE `JustifyLeft` command. | | JustifyRight | Returns `true` if the content is formatted using the same markup as the TinyMCE `JustifyRight` command. | | mceBlockQuote | Returns `true` if the content is formatted using the same markup as the TinyMCE `mceBlockQuote` command. | | mceTogglePlainTextPaste | Returns `true` if the TinyMCE `mceTogglePlainTextPaste` command is active. | | Outdent | Returns `true` if the content is formatted using the same markup as the TinyMCE `Outdent` command. | | Strikethrough | Returns `true` if the content is formatted using the same markup as the TinyMCE `Strikethrough` command. | | Subscript | Returns `true` if the content is formatted using the same markup as the TinyMCE `Subscript` command. | | Superscript | Returns `true` if the content is formatted using the same markup as the TinyMCE `Superscript` command. | | ToggleToolbarDrawer | Returns `true` if the Toolbar Drawer is open. The state can be controlled by the TinyMCE `ToggleToolbarDrawer` command. When controlling the state, use the `skip_focus` option (recommended) instead of the deprecated `skipFocus` option. | | Underline | Returns `true` if the content is formatted using the same markup as the TinyMCE `Underline` command. | Examples ```js tinymce.activeEditor.queryCommandState('Bold'); tinymce.activeEditor.queryCommandState('InsertDefinitionList'); tinymce.activeEditor.queryCommandState('InsertOrderedList'); tinymce.activeEditor.queryCommandState('InsertUnorderedList'); tinymce.activeEditor.queryCommandState('Italic'); tinymce.activeEditor.queryCommandState('JustifyCenter'); tinymce.activeEditor.queryCommandState('JustifyFull'); tinymce.activeEditor.queryCommandState('JustifyLeft'); tinymce.activeEditor.queryCommandState('JustifyRight'); tinymce.activeEditor.queryCommandState('mceBlockQuote'); tinymce.activeEditor.queryCommandState('mceTogglePlainTextPaste'); tinymce.activeEditor.queryCommandState('Outdent'); tinymce.activeEditor.queryCommandState('Strikethrough'); tinymce.activeEditor.queryCommandState('Subscript'); tinymce.activeEditor.queryCommandState('Superscript'); tinymce.activeEditor.queryCommandState('ToggleToolbarDrawer'); tinymce.activeEditor.queryCommandState('Underline'); ``` ### Query command values TinyMCE provides the `queryCommandValue` API to allow developers to determine the current state of selected content. The query will return an object containing the relevant value. #### Listing core and plugin query command values To retrieve a list of available queryable command values from the active editor, run the following command from the browser console: ```js tinymce.activeEditor.editorCommands.commands.value; ``` #### Available query command values The following command values can be queried using the [queryCommandValue](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#queryCommandValue) API. | Command | Description | | --- | --- | | FontName | Returns the font name of the current selection. | | FontSize | Returns the font size of the current selection. | | LineHeight | Returns the line height of the current selection. | | ToggleSidebar | Returns the current state of sidebar (open or closed). | | ToggleView | Returns the current state of the view, for example: `"code"`, or `"revision"`. | Examples ```js tinymce.activeEditor.queryCommandValue('FontName'); tinymce.activeEditor.queryCommandValue('FontSize'); tinymce.activeEditor.queryCommandValue('LineHeight'); tinymce.activeEditor.queryCommandValue('ToggleSidebar'); tinymce.activeEditor.queryCommandValue('ToggleView'); ``` ##### Query command values for tables The following table-related values can be queried using the [queryCommandValue](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.editor/#queryCommandValue) API. | Value | Description | | --- | --- | | mceTableRowType | Returns the row type of the current table row, either: `"header"`, `"body"`, or `"footer"`. | | mceTableColType | Returns the column type of the current table column, either: `"td"` or `"th"`. | | mceTableCellType | Returns the cell type of the current table cell, either: `"td"` or `"th"`. | Examples ```js tinymce.activeEditor.queryCommandValue('mceTableCellType'); tinymce.activeEditor.queryCommandValue('mceTableRowType'); tinymce.activeEditor.queryCommandValue('mceTableColType'); ``` ## Configuring custom dialogs Source: https://www.tiny.cloud/docs/tinymce/latest/dialog-configuration/ Last updated: 2025-09-01T23:01:39Z A dialog configuration has three main parts to match the three main parts of a dialog’s UI. 1. **Title** - the dialog’s title. - It displays in the dialog’s header. 2. **Body** - the dialog’s body. - The body component can be a [panel](https://www.tiny.cloud/docs/tinymce/latest/dialog-components/#panel) or a [tab panel](https://www.tiny.cloud/docs/tinymce/latest/dialog-components/#tabpanel), which can contain an array of [panel components](https://www.tiny.cloud/docs/tinymce/latest/dialog-components/#panel-components) such as buttons, inputs and text. 3. **Buttons** - An array of [footer buttons](https://www.tiny.cloud/docs/tinymce/latest/dialog-footer-buttons/) that are displayed in the dialog’s footer. ### Basic example The configuration for a basic dialog that displays HTML information might look like this: ```js tinymce.activeEditor.windowManager.open({ title: 'Dialog Title', // The dialog's title - displayed in the dialog header body: { type: 'panel', // The root body type - a Panel or TabPanel items: [ // A list of panel components { type: 'htmlpanel', // an HTML panel component html: 'Panel content goes here.' } ] }, buttons: [ // A list of footer buttons { type: 'submit', text: 'OK' } ] }); ``` ### Options | Name | Value | Requirement | Description | | --- | --- | --- | --- | | title | string | required | The title of the dialog. This will display in the header of the dialog. | | body | `panel` or `tabpanel` component | required | The specification for the [body component](https://www.tiny.cloud/docs/tinymce/latest/dialog-components/). | | buttons | `FooterButton[]` | required | An array of [footer buttons](https://www.tiny.cloud/docs/tinymce/latest/dialog-footer-buttons/) to render in the footer of the dialog. | | size | `'normal'`, `'medium'` or `'large'` | optional | default: `normal`. `normal` sets the dialog to be responsive to the viewport size. `medium` sets the dialog to render with only the height required to fits its components. `large` sets the dialog to a large fixed height. `inline` dialogs do not support `size: 'large'`. | | initialData | object | optional | An object containing initial values for the dialog’s panel components. | | onAction | `(dialogApi, details) => void` | optional | Function invoked when a user interacts with a `button` type panel component, clicks a **Custom** type footer button, or clicks an item in a **Menu** type footer button. | | onSubmit | `(dialogApi) => void` | optional | Function invoked when a **Submit** type footer button is clicked. | | onCancel | `(dialogApi) => void` | optional | Function invoked when the dialog is cancelled. The dialog header’s close button and a **Cancel** type footer button invoke this function. | | onChange | `(dialogApi, details) => void` | optional | Function invoked when the value of an `input` type panel component changes. | | onClose | `() => void` | optional | Function invoked when the dialog is closed. The dialog header’s close button, a **Cancel** type footer button and the dialog instance API’s `close()` method invoke this function. | | onTabChange | `(dialogApi, details) => void` | optional | **This method only applies to [tab panel](https://www.tiny.cloud/docs/tinymce/latest/dialog-components/#tabpanel) dialogs.** Function invoked when the user changes tabs. `details` is an object that contains `newTabName` and `oldTabName`. | For more information on the `dialogApi` object that is passed to some of the configuration options, see the [dialog instance API](https://www.tiny.cloud/docs/tinymce/latest/dialog-components/#dialog-instance-api-methods) documentation. #### Event callback functions Each of the event callback functions - `onAction`, `onSubmit`, `onCancel`, `onChange`, `onClose`, and `onTabChange` - are shared between all dialog components that may trigger them. For example, **Custom** type footer buttons and dialog panel buttons all trigger `onAction`. Therefore, callback functions that may be triggered by multiple components are passed an object (called `details` above) that contains the `name` of the component that triggered the event. Any callback function that is not passed a `details` object assumes that the dialog will only contain one component which can trigger it or that it does not matter if the function is triggered by multiple components. For example, `onSubmit` is only triggered when a user clicks on a **Submit** type footer button, and TinyMCE assumes that a dialog will only have one **Submit** type button. In comparison, `onCancel` and `onClose` are both triggered by clicking the `X` button in the top right of a dialog or by clicking a **Cancel** type footer button. These two buttons have the same functionality, and therefore TinyMCE does not differentiate between them. ### Configuration parameters #### `align` `align` is an optional property to add to dialog labels to set the alignment of the label text. The property has a default value of `start`. This is also the value applied if the property is not explicitly set. **Type:** `String` **Default value:** `start` **Possible values:** `'+start+'`, `'+center+'`, `'+end+'` The values, `start` and `end`, refer to the beginning or end of a text line and are relative to the display language. For left-to-right written languages (eg English or Vietnamese), `start` sets the dialog label as left-aligned and `end` sets the dialog label as right-aligned. For right-to-left written languages (eg Arabic or Persian), `start` sets the dialog label as right-aligned and `end` sets the dialog label as left-aligned. #### Example: using `align` to set a dialog caption as end-aligned ```js tinymce.activeEditor.windowManager.open({ title: 'Dialog Title', // The dialog's title - displayed in the dialog header body: { type: 'panel', // The root body type - a Panel or TabPanel items: [ { type: 'label', // component type label: 'Caption', // text for the group label align: 'end', items: [ { type: 'htmlpanel', // an HTML panel component html: 'Panel content goes here.' } ] } ] }, buttons: [ // A list of footer buttons { type: 'submit', text: 'OK' } ] }); ``` #### `border` `border` is an optional property, available to add to the `iframe` dialog component. The property has a default value of `false`. When this property is set to `true`, a border displays around the `iframe` component. The border is also highlighted when the `iframe` component takes focus (by, for example, using the Tab key to change focus within the active dialog). **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` #### Example: using `border` to display a border around an `iframe` component ```js tinymce.activeEditor.windowManager.open({ title: 'Dialog Title', // The dialog's title - displayed in the dialog header body: { type: 'panel', // The root body type - a Panel or TabPanel items: [ // A list of panel components { name: 'preview', type: 'iframe', border: true, } ] }, buttons: [ // A list of footer buttons { type: 'submit', text: 'OK' } ] }); ``` #### Using `buttons` to configure a dialog without a footer In addition to its usual functions, the `buttons` property can also be used to stop the footer section from displaying. To configure a custom dialog so it does not render a footer section when displayed, set the `buttons` property to an empty array, `[]`, or omit it entirely. #### basic example of a dialog without buttons or a footer ```js tinymce.activeEditor.windowManager.open({ title: 'Dialog Title', // The dialog's title - displayed in the dialog header body: { type: 'panel', // The root body type - a Panel or TabPanel items: [ // A list of panel components { type: 'htmlpanel', // an HTML panel component html: 'Panel content goes here.' } ] }, buttons: [] }); ``` #### `persistent` The `persistent` property, when set to `true`, allows an inline dialog to stay open when the dialog no longer has focus. If an end-user gives another part of the TinyMCE editor focus (for example, the document editor, or a menu), the inline dialog will stay open. Setting the property to `true` does not over-ride normal mechanisms for closing a dialog, such as clicking the *Close* button or pressing the **Esc** key. The property has a default value of `false`. > **Note:** If an inline dialog is open and focus is switched away from the TinyMCE editor entirely (by, for example, the end-user switching focus to an available host-browser UI element), an open inline dialog will remain open regardless of the `persistent` property’s value. This was the behavior prior to this property being available and continues to be the behavior. **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` #### Example: using `persistent` ```js tinymce.activeEditor.windowManager.open({ title: 'Dialog Title', // The dialog's title - displayed in the dialog header body: { type: 'panel', // The root body type - a Panel or TabPanel items: [ // A list of panel components { type: 'htmlpanel', // an HTML panel component html: 'Panel content goes here.' } ] }, buttons: [ // A list of footer buttons { type: 'submit', text: 'OK' } ]}, { inline: 'toolbar', persistent: true } }); ``` #### Example: using `focus` to refocus an open but de-focused dialog Because a dialog with a `{ persistent: true }` property does not close when the dialog loses focus, it is possible for an end-user to open a further instance of the dialog. To prevent this - add a check that the dialog is already open; and - use the `focus` method in the [`DialogInstanceAPI`](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.windowmanager/#open) to transfer focus to the open dialog rather than creating a new instance of the same dialog. ```js let dialogOpened = false; let dialogInstanceApi = null; const openDialog = () => { dialogOpened = true; dialogInstanceApi = editor.windowManager.open({ title: 'Test', body: { type: 'panel', items: [{ type: 'bar', items: [{ type: 'input', name: 'name', placeholder: 'Name', maximized: true } ] }] }, onClose: () => { dialogOpened = false; }, buttons: [{ type: 'cancel', name: 'cancel', text: 'Cancel' }], initialData: { name: '' } }, { inline: 'bottom', persistent: true }); }; const focusDialog = () => { dialogInstanceApi.focus('name'); } editor.ui.registry.addButton('example', { type: 'button', text: 'example', tooltip: 'example', onAction: () => { dialogOpened ? focusDialog() : openDialog(); } }); ``` ### `streamContent` `streamContent` is an optional property, available to add to the `iframe` dialog component. The property has a default value of `false`. When `streamContent` is set to `true`, content presented within the `iframe` dialog component is updated using the `document.write()` method, rather than by setting the `srcdoc` attribute. Setting the `srcdoc` attribute causes the `iframe` to reload. This results in a visually jarring flickering effect in most modern browsers, particularly when content is rapidly updating. As well, performing updates via the `srcdoc` attribute means the contents of the `iframe` are not accessible. As a consequence, it is not possible to automatically scroll the `iframe` contents to the bottom as it gets updated. Setting `streamContent` to `true` minimises the flickering effect. If the `iframe` component is already scrolled to the end, `streamContent: true` also keeps the view at this point. The UX is content being added to the `iframe` component as if it is being quickly typed in. A user can, however, scroll through the `iframe` component as updates are being added. If the view is scrolled back to the end while updates are still being added, the `streamContent: true` setting will, again, keep the view at this point. **Type:** `Boolean` **Default value:** `false` **Possible values:** `true` `false` #### Example: setting an `iframe` component to display updating content using the `streamContent` property ```js tinymce.activeEditor.windowManager.open({ title: 'Dialog Title', // The dialog's title - displayed in the dialog header size: 'normal', body: { type: 'panel', // The root body type - a Panel or TabPanel items: [ // A list of panel components { name: 'preview', type: 'iframe', streamContent: true } ] }, buttons: [ // A list of footer buttons { type: 'submit', text: 'OK' } ] }, { inline: 'bottom' } ); ``` > **Note:** Dialog position The example above also adds a second argument — `{ inline: 'bottom' } — to the dialog. This argument changes the presented position of the dialog within the TinyMCE editor. > > For information on using this property see the [Dialog position](https://www.tiny.cloud/docs/tinymce/latest/dialog-configuration/#dialog-position) section of the [Dialog configuration documentation](https://www.tiny.cloud/docs/tinymce/latest/dialog-configuration/#). #### Recommended method for updating content in an `iframe` component The recommended method for updating content in an `iframe` component is: ```js `onAction: (api) => api.setData({ myiframe: 'new content' })` ``` 1. This updates the iframe to contain the string `'new content'`. This text can be any valid html. 2. `onAction` is a callback defined in the dialog spec. It is called when a button within the dialog `body` is triggered. 3. `myiframe` is the name of the `iframe` component in this spec. ### Dialog position By default a dialog is shown as a modal in the center of the editor viewport. This presented position can be changed by providing a second argument, with an appropriate value, to [`editor.windowManager.open()`](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.windowmanager/#open). #### `inline` The `inline` option, passed to `editor.windowManager.open()`, sets the dialog’s presented position to one of two possiblities. When added to a configuration with the value, `toolbar`, it sets the dialog to appear adjacent to the TinyMCE toolbar. When added to a configuration with the value, `bottom`, it sets the dialog to appear at the bottom of the editor viewport. **Type:** `String` **Possible values:** `toolbar`, `bottom` #### Basic example with the inline argument added and set to toolbar ```js tinymce.activeEditor.windowManager.open({ title: 'Dialog Title', // The dialog's title - displayed in the dialog header body: { type: 'panel', // The root body type - a Panel or TabPanel items: [ // A list of panel components { type: 'htmlpanel', // an HTML panel component html: 'Panel content goes here.' } ] }, buttons: [ // A list of footer buttons { type: 'submit', text: 'OK' } ] }, { inline: 'toolbar' }); ``` ## Content appearance options Source: https://www.tiny.cloud/docs/tinymce/latest/content-appearance/ Last updated: 2025-09-01T23:01:47Z ### Showing for "hidden" elements #### `visual` This option sets the initial state of the editor visual aids for bookmarks (`anchor`) and tables with a border width of `0`. If the border of a table is set to `0`, then TinyMCE adds a dotted line around the table by default. When set to `false`, the visual aids will be disabled when the editor loads. The `visualaid` toolbar button and menu item allow users to toggle the visibility of the visual aids. **Type:** `Boolean` **Default value:** `true` **Possible values:** `true`, `false` ##### Example: using `visual` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML visual: false }); ``` #### `visual_anchor_class` This option enables you to configure a custom class to be added to anchors with names since these are invisible by default. **Type:** `String` ##### Example: using `visual_anchor_class` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML visual_anchor_class: 'my-custom-class' }); ``` #### `visual_table_class` This option enables you to configure a custom class to be added to tables that have a border set to `0`. This class is used to add dotted borders to tables that would otherwise be invisible for the user. **Type:** `String` ##### Example: using `visual_table_class` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML visual_table_class: 'my-custom-class' }); ``` ### Showing "hidden" characters To enable visual aids for "hidden" characters, see: [The Visual Characters plugin](https://www.tiny.cloud/docs/tinymce/latest/visualchars/) ### Outlining block elements To enable outlines for block elements, see: [The Visual Blocks plugin](https://www.tiny.cloud/docs/tinymce/latest/visualblocks/). ### Open source promotion #### `promotion` The open source version of TinyMCE contains a promotion for paid features. This promotion can be toggled on or off with the `promotion` option. **Type:** `Boolean` **Default value:** `true` in Community self-hosted instances; otherwise `false`. **Possible values:** `true`, `false` Example: using open source `promotion` ```js tinymce.init({ selector: "textarea", // change this value according to your HTML promotion: true }); ``` ### Cloud promotion #### `onboarding` The cloud version of TinyMCE contains a promotion for paid features included in the 14-day trial. This promotion can be toggled on or off with the `onboarding` option. The promotion will automatically disappear when the trial ends. **Type:** `Boolean` **Default value:** `true` for cloud instances; otherwise `false`. **Possible values:** `true`, `false` Example: using cloud `onboarding` ```js tinymce.init({ selector: "textarea", // change this value according to your HTML onboarding: false }); ``` ### Highlighting the content area on focus To enable highlighting on focus for the editor, ### `highlight_on_focus` > **Note:** In TinyMCE 7.0, the default setting for `highlight_on_focus` was changed from `false` to `true`. Any editors using this `highlight_on_focus: true` option in TinyMCE , can remove this option from their TinyMCE init configuration when upgrading to TinyMCE 7.0. The `highlight_on_focus` option adds a blue outline to an instantiated TinyMCE editor when that editor is made the input focus. When using the `oxide-dark` skin, the outline is white. This allows users to clearly see when the editor is in focus, or which editor has focus if more than one TinyMCE instance is available. **Type:** `Boolean` **Default value:** `true` **Possible values:** `true`, `false` #### Example: using `highlight_on_focus` ```js tinymce.init({ selector: "textarea", highlight_on_focus: false }); ``` #### Using `highlight_on_focus` with custom skins If a [custom skin](https://www.tiny.cloud/docs/tinymce/latest/creating-a-skin/) is being used, two variables can be updated to match the `highlight_on_focus` option’s appearance with the custom skin. The two rules and their default values are: ```css @edit-area-border-color: #2D6ADF; @edit-area-border-width: 2px; ``` > **Note:** This is entirely optional. If the default values are not changed, the `highlight_on_focus` option works with a custom skin exactly as it does with TinyMCE default skins. ### Reducing initialization flicker To enable synchronous iframe initialization. ### `init_content_sync` This option determines whether the iframe is initialized synchronously or asynchronously. When disabled, the editor is initialized asynchronously using `srcdoc`. This can, occasionally, cause the editor to flicker during initialization. When enabled, the editor is initialized synchronously, using `document.write`. This can reduce flickering. Flickering can still occur during synchronous initialization, however, such as when loading the content css. > **Note:** using the [`document.write`](https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#document.write()) method is [strongly discouraged](https://developer.mozilla.org/en-US/docs/Web/API/Document/write). **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` #### Example: using `init_content_sync` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML init_content_sync: 'true', }); ``` > **Note:** When TinyMCE is running in [inline mode](https://www.tiny.cloud/docs/tinymce/latest/use-tinymce-inline/) (ie, when `inline: true` is set), setting `init_content_sync: true` has no effect. ## Content filtering options Source: https://www.tiny.cloud/docs/tinymce/latest/content-filtering/ Last updated: 2026-09-28T22:41:52Z Use `valid_elements` to define which elements and attributes are allowed, `invalid_elements` to block specific elements, and `extended_valid_elements` to add or modify rules. For paste-time filtering, use the `PastePreProcess` and `PastePostProcess` events or the [PowerPaste](https://www.tiny.cloud/docs/tinymce/latest/introduction-to-powerpaste/) plugin options. ### Disabling or stripping HTML formatting TinyMCE validates and cleans content against a schema whenever content is set, pasted, or retrieved. The schema defines which elements and attributes are allowed, and any element or attribute outside the schema is removed when the content is parsed. The content filtering options on this page configure that schema: - [`valid_elements`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#valid_elements) replaces the set of allowed elements and attributes. - [`extended_valid_elements`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#extended_valid_elements) adds to the existing set rather than replacing it. - [`invalid_elements`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#invalid_elements) removes specific elements from the content, keeping their text. Of these options, only [`valid_elements`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#valid_elements) and [`invalid_elements`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#invalid_elements) restrict content. [`extended_valid_elements`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#extended_valid_elements) widens the default schema, so it is used to permit additional elements rather than to strip them. For its syntax and examples, see the option description below. For a reference of the underlying validation and parsing mechanism, see the [Schema](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.schema/) and [DomParser](https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.html.domparser/) API documentation. To restrict content to a limited subset of formatting, set [`valid_elements`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#valid_elements) to only the elements and attributes that should be kept. Any element outside the list is removed and its text content is preserved. ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML valid_elements: 'p,br,a[href],strong/b,em/i' }); ``` This configuration keeps paragraphs, line breaks, links (with their `href` attribute), and bold and italic text, converting `b` to `strong` and `i` to `em`. All other elements, such as headings, tables, and inline styles, are stripped and their text is retained. When a stripped element is a block element, such as a heading, the text it contained is left without a parent block and is rewrapped in the block element set by [`forced_root_block`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#forced_root_block), which is `p` by default. For example, an `

` removed by the configuration above is returned as a `

` containing the original heading text. To remove only specific formatting while keeping everything else, use [`invalid_elements`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#invalid_elements). ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML invalid_elements: 'strong,b,em,i,u,span' }); ``` To remove all formatting from pasted content so that only plain text is inserted, set [paste_as_text](https://www.tiny.cloud/docs/tinymce/latest/copy-and-paste/#paste_as_text) to `true`. ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML paste_as_text: true }); ``` For a complete reference of the element and attribute syntax used by [`valid_elements`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#valid_elements), [`extended_valid_elements`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#extended_valid_elements), and [`invalid_elements`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#invalid_elements), see the option descriptions below. To customize how content is styled and defined rather than restricted, see [Content formats](https://www.tiny.cloud/docs/tinymce/latest/content-formatting/). ### `allow_conditional_comments` This option allows you to specify whether the editor should parse and keep conditional comments. **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` #### Example: using `allow_conditional_comments` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML allow_conditional_comments: true }); ``` ### `allow_html_in_comments` The `allow_html_in_comments` option allows HTML-like content to be retained in comments within the editor content. By default, TinyMCE removes comments containing HTML-like content as a security measure. **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` > **Warning:** Setting this option to `true` may expose your application to XSS vulnerabilities. The DOMPurify maintainers have identified potential security risks when HTML-like content is allowed in comments. Only enable this option if you trust your content sources and understand the security implications. #### Example: using `allow_html_in_comments` The following example demonstrates how comments containing HTML are handled by default (removed) and how to configure TinyMCE to retain them: ```js tinymce.init({ selector: 'textarea', allow_html_in_comments: true, // Enable HTML in comments }); ``` #### Comment behavior examples With `allow_html_in_comments: false` (default), the editor’s content after initialization will be: ```html

Some content

Some additional content

``` With `allow_html_in_comments: true`, the editor’s content after initialization will be: ```html

Some content

Some additional content

``` ### `allow_html_in_named_anchor` This option allows you to specify whether the editor should parse and keep `html` within named `anchor` tags. **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` #### Example: using `allow_html_in_named_anchor` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML allow_html_in_named_anchor: true }); ``` ### `allow_mathml_annotation_encodings` This option allows a specific list of valid MathML annotation encodings to be used in the editor. **Type:** `Array` of `Strings` **Default value:** `[]` (empty array) #### Example: using `allow_mathml_annotation_encodings` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML allow_mathml_annotation_encodings: [ 'wiris', 'application/x-tex' ] }); ``` ### `allow_unsafe_link_target` By default all links with a `target` of *_blank* will get a `rel` attribute of `noopener`. This will disable access to the `window.opener` object from a child tab/window that will open on click. If this is not something you care about, you can disable this option, by setting it to *false*. Although **we do not recommend** you to do so unless you have other ways of securing links to external pages using target set to *_blank*. **Type:** `Boolean` **Default value:** `false` **Possible values:** `true`, `false` #### Example: using `allow_unsafe_link_target` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML allow_unsafe_link_target: true }); ``` ### `br_in_pre` This option allows you to disable TinyMCE’s default behavior when pressing the enter key within a `pre` tag. By default, pressing enter within a `pre` tag produces a `br` tag at the insertion point. For example: `
This is inside
a pre tag.
` However, when `br_in_pre` is set to `false`, rather than inserting a `br` tag TinyMCE will split the `pre` tag. For example: `
This is inside
a pre tag.
` > **Note:** When this option is set to `false`, `shift+enter` will insert a `br` tag. **Type:** `Boolean` **Default value:** `true` **Possible values:** `true`, `false` #### Example: using `br_in_pre` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML br_in_pre: false }); ``` ### `convert_fonts_to_spans` > **Important:** This option has been deprecated in TinyMCE 5.10 and may be removed in a future major TinyMCE release. If you set this option to `true`, TinyMCE will convert all `font` elements to `span` elements and generate `span` elements instead of `font` elements. This option should be used in order to get more W3C compatible code, since font elements are deprecated. **Type:** `Boolean` **Default value:** `true` **Possible values:** `true`, `false` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML convert_fonts_to_spans: false }); ``` ### `custom_elements` This option enables you to specify non-HTML elements for the editor. This way you can handle non-HTML elements inside an HTML editor. You can prefix the element names with a `~` if you want the element to behave as a `span` element and not a `div` element. **Type:** `String` or `Object` #### Simple string format ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML extended_valid_elements: 'mycustomblock[id],mycustominline', custom_elements: 'mycustomblock,~mycustominline' // Notice the ~ prefix to force a span element for the element }); ``` #### Record format The `custom_elements` option and the `addCustomElements` API support a record structure. The key is the element name, and the value is a specification object with the following properties: `extends` (string) The element name from which the new element inherits its default properties. Using `extends` also adds the new element as a valid child wherever the extended element is valid. For example, `extends: "div"` makes the custom element block-level and allows it wherever `div` is allowed. `attributes` (array of strings) List of attribute names or the preset `@global`. Each string is either an attribute name or the preset `@global`, which expands to the schema’s global attributes (see [Attribute preset: `@global`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#attribute-preset-global)). For example: `["@global", "data-type", "data-id"]`. `children` (array of strings) List of valid child element names or presets. Each string is either an element name or one of the presets `@blocks`, `@phrasing`, or `@flow`. See [HTML Element Sets: `html4`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#html4), [HTML Element Sets: `html5`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#html5), and [HTML Element Sets: `html5-strict`](https://www.tiny.cloud/docs/tinymce/latest/content-filtering/#html5-strict) for the exact element sets per schema. `padEmpty` (boolean) Defaults to `false`. When `true`, the element is padded with content (for example, a non-breaking space) when saved so that it always has some content. Use for elements that must not be empty. `componentUrl` (string) URL of the web component script to load into the editor. Use when the custom element is a web component that requires its script to render. #### Attribute preset: `@global` The `@global` preset in the `attributes` array expands to the schema’s global attributes. The exact set depends on the schema type: #### HTML Element Sets: `html4` | Type | Expected | | --- | --- | | @blocks | address, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, ol, p, pre, table, ul, center, dir, isindex, noframes | | @phrasing | a, abbr, b, bdo, br, button, cite, code, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, map, noscript, object, q, s, samp, script, select, small, span, strong, sub, sup, textarea, u, var, #text, #comment, acronym, applet, basefont, big, font, strike, tt | | @flow | Same as @blocks + @phrasing | | @global (attributes) | id, accesskey, class, dir, lang, style, tabindex, title, role, xml:lang | #### HTML Element Sets: `html5` | Type | Expected | | --- | --- | | @blocks | address, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, ol, p, pre, table, ul, article, aside, details, dialog, figure, main, header, footer, hgroup, section, nav, a, ins, del, canvas, map, center, dir, isindex, noframes | | @phrasing | a, abbr, b, bdo, br, button, cite, code, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, map, noscript, object, q, s, samp, script, select, small, span, strong, sub, sup, textarea, u, var, #text, #comment, audio, canvas, command, data, datalist, mark, meter, output, picture, progress, time, wbr, video, ruby, bdi, keygen, svg, acronym, applet, basefont, big, font, strike, tt | | @flow | Same as @blocks + @phrasing | | @global (attributes) | id, accesskey, class, dir, lang, style, tabindex, title, role, contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck, translate, itemprop, itemscope, itemtype, xml:lang | #### HTML Element Sets: `html5-strict` | Type | Expected | | --- | --- | | @blocks | address, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, ol, p, pre, table, ul, article, aside, details, dialog, figure, main, header, footer, hgroup, section, nav, a, ins, del, canvas, map | | @phrasing | a, abbr, b, bdo, br, button, cite, code, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, map, noscript, object, q, s, samp, script, select, small, span, strong, sub, sup, textarea, u, var, #text, #comment, audio, canvas, command, data, datalist, mark, meter, output, picture, progress, time, wbr, video, ruby, bdi, keygen, svg | | @flow | Same as @blocks + @phrasing | | @global (attributes) | id, accesskey, class, dir, lang, style, tabindex, title, role, contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck, translate, itemprop, itemscope, itemtype | #### Example using `custom_elements` with presets such as `@blocks`, `@phrasing`, and `@flow` ```js tinymce.init({ selector: "textarea", // Add custom elements using the custom_elements option custom_elements: { // Custom element 'foo-bar' extends 'div' with attributes 'attr1' and 'attr2' "foo-bar": { extends: "div", attributes: ["attr1", "attr2"], }, // Custom element 'foo-baz' extends 'span' allowing children '@phrasing' and 'foo-child' "foo-baz": { extends: "span", children: ["@phrasing", "foo-child"], }, // Custom element 'foo-child' has no specific configuration "foo-child": {}, }, // You can also use the addCustomElements API to add custom elements setup: (editor) => { editor.on("preinit", () => { editor.schema.addCustomElements({ // Custom element 'hey-bar' extends 'div' with attributes 'attr1' and 'attr2' as well as all global attributes "hey-bar": { extends: "div", attributes: ["@global", "attr1", "attr2"], }, // Custom element 'hey-baz' extends 'span' allowing children 'hey-child' as well as all phrasing content "hey-baz": { extends: "span", children: ["@phrasing", "hey-child"], }, // Custom element 'hey-child' has no specific configuration "hey-child": {}, }); }); }, }); ``` #### Example using `custom_elements` with `padEmpty` and `componentUrl` ```js tinymce.init({ selector: "textarea", custom_elements: { // Custom element that is padded when empty "my-empty-padded": { extends: "div", padEmpty: true, }, // Block-level custom element (behaves like a div) with web component "my-custom-block": { extends: "div", attributes: ["@global", "data-type", "data-id"], children: ["@flow"], componentUrl: "/path/to/block-component.js" }, // Inline-level custom element (behaves like a span) with web component "my-custom-inline": { extends: "span", attributes: ["@global", "data-value"], children: ["@phrasing"], componentUrl: "/path/to/inline-component.js" } } }); ``` ### `convert_unsafe_embeds` option This option controls whether an `` and `` elements will be converted to more restrictive alternatives, namely `` for image MIME types, `