tinymce · kemister85 · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026 · Apr 13, 2026
@@ -1,6 +1,9 @@
 = Adding or changing the editor content CSS
 :navtitle: Add CSS
-:description: Options for changing the editor content CSS.
+:description: Apply custom CSS to the editor content area using content_css and content_style. Control typography, colors, margins, and layout in the editable region.
+:keywords: content_css, content_style, custom CSS, content area, stylesheet, editor styling
+
+Use `+content_css+` to load external stylesheets into the editable area, or `+content_style+` to inject inline CSS. Both options apply only to the editor content (the iframe body in classic mode), not the surrounding UI.
 
 == Add CSS and styles to the editor
 

@@ -1,8 +1,8 @@
 = Quick start: {productname} from {cloudname}
 :navtitle: Quick start: Cloud
 :description_short: Setup a basic {productname} {productmajorversion} editor using the {cloudname}.
-:description: Get an instance of {productname} {productmajorversion} up and running using the {cloudname}.
-:keywords: tinymce, script, textarea
+:description: Get an instance of {productname} {productmajorversion} up and running using the {cloudname}. Initialize the editor on a textarea element using its ID with tinymce.init and the selector option.
+:keywords: tinymce, script, textarea, selector, id, #mytextarea, tinymce.init, initialize, quick start
 :productSource: cloud
 
 

@@ -1,7 +1,10 @@
 = Content filtering options
 :navtitle: Content filtering
-:description_short: Learn how to create clean, maintainable and readable content.
-:description: These settings change the way the editor handles the input and output of content. This will help you to create clean, maintainable and readable content.
+:description_short: Control which HTML elements and attributes are allowed or removed using valid_elements, invalid_elements, and extended_valid_elements.
+:description: Configure content filtering and sanitization using valid_elements, invalid_elements, extended_valid_elements, and paste hooks. Control which HTML elements and attributes {productname} allows or removes when content is inserted or pasted.
+:keywords: valid_elements, invalid_elements, extended_valid_elements, allow_html_in_named_anchor, content filtering, sanitization, HTML elements, paste_preprocess, paste_postprocess
+
+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 xref:introduction-to-powerpaste.adoc[PowerPaste] plugin options.
 
 include::partial$configuration/allow_conditional_comments.adoc[]
 

@@ -1,8 +1,8 @@
 = Create a plugin for {productname}
 :navtitle: Create a plugin
 :description_short: Introducing plugin creation, with an example.
-:description: A short introduction to creating plugins for TinyMCE along with an example plugin.
-:keywords: plugin, plugin.js, plugin.min.js, tinymce.js
+:description: Create custom TinyMCE plugins using PluginManager.add, and expand their functionality with custom toolbar buttons using editor.ui.registry.addButton, custom commands using editor.addCommand, and more.
+:keywords: plugin, plugin.js, plugin.min.js, tinymce.js, PluginManager, addButton, addCommand, custom plugin, toolbar button
 
 {productname} is designed to be easily extended by custom plugins; with APIs for registering custom plugins, and creating and localizing custom UI.
 
@@ -45,6 +45,47 @@ tinymce.PluginManager.add('pluginId', (editor, url) => {
 });
 ----
 
+== Adding a toolbar button to a custom plugin
+
+Use `+editor.ui.registry.addButton+` to add a toolbar button and `+editor.addCommand+` to define the action. Register both inside the plugin callback passed to `+PluginManager.add()+`:
+
+[source,js]
+----
+tinymce.PluginManager.add('myplugin', (editor, url) => {
+  editor.addCommand('myCommand', () => {
+    editor.insertContent('&nbsp;<strong>Inserted content</strong>&nbsp;');
+  });
+
+  editor.ui.registry.addButton('mybutton', {
+    text: 'My Button',
+    onAction: () => editor.execCommand('myCommand')
+  });
+
+  return {
+    getMetadata: () => ({
+      name: 'My plugin',
+      url: 'https://example.com/docs'
+    })
+  };
+});
+----
+
+Then include the plugin and button in the editor configuration:
+
+[source,js]
+----
+tinymce.init({
+  selector: 'textarea',
+  plugins: 'myplugin',
+  toolbar: 'mybutton',
+  external_plugins: {
+    myplugin: '/path/to/myplugin.js'
+  }
+});
+----
+
+For more toolbar button types, see xref:custom-toolbarbuttons.adoc[Toolbar buttons].
+
 == Using custom plugins with {productname}
 
 Custom plugins can be added to a {productname} instance by either:

@@ -1,7 +1,7 @@
 = Toolbar buttons
 :navtitle: Toolbar buttons
-:description: Add a custom buttons to the {productname} {productmajorversion} toolbar.
-:keywords: toolbar, toolbarbuttons, buttons, toolbarbuttonsapi
+:description: Add custom toolbar buttons using editor.ui.registry.addButton and the setup callback. Create buttons that trigger commands or custom actions.
+:keywords: toolbar, toolbarbuttons, buttons, toolbarbuttonsapi, custom button, addButton, editor.ui.registry, setup callback, onAction
 
 == Use cases
 

@@ -1,7 +1,7 @@
 = Installing {productname} for .NET
 :navtitle: .NET projects
 :description: Learn how to install {productname} from NuGet.
-:keywords: nuget .net install
+:keywords: nuget, .net, install, selector, textarea, id, tinymce.init
 
 == Install {productname} using NuGet
 

@@ -97,6 +97,24 @@ tinymce.init({
 });
 ----
 
+=== Example: content change callback
+
+To run a callback when the editor content changes, use the `+Change+` event with `+editor.on()+` inside the `+setup+` option:
+
+[source,js]
+----
+tinymce.init({
+  selector: 'textarea',
+  setup: (editor) => {
+    editor.on('change', () => {
+      console.log('Content was modified.');
+    });
+  }
+});
+----
+
+The `+Change+` event fires when content changes are committed, such as when moving focus away from the editor. For real-time updates as the user types, use the `+input+` event instead.
+
 [[browser-native-events]]
 == Supported browser-native events
 

@@ -1,6 +1,7 @@
 = Image and file options
 :navtitle: Images and files
-:description: These settings affect TinyMCE's image and file handling capabilities.
+:description: Configure image uploads to a server using images_upload_handler or images_upload_url. Handle file uploads with custom logic or a server endpoint.
+:keywords: images_upload_handler, images_upload_url, image upload, server, upload handler, file picker, images_file_types
 
 == Controlling or adjusting allowed image and file formats
 

@@ -1,7 +1,7 @@
 = Quick start: {productname} from NPM or Yarn
 :navtitle: Quick start: NPM/Yarn
 :description: Learn how to install {productname} from NPM using NPM and Yarn, including premium plugins for commercial customers.
-:keywords: yarn, npm, javascript, install, premium plugins, tinymce-premium
+:keywords: yarn, npm, javascript, install, premium plugins, tinymce-premium, selector, textarea, id, tinymce.init
 
 == Install {productname} using NPM or Yarn
 

@@ -1,7 +1,7 @@
 = Installing {productname} with Composer
 :navtitle: PHP projects
 :description: Learn how to install {productname} from Packagist using Composer.
-:keywords: php, composer, packagist, install
+:keywords: php, composer, packagist, install, selector, textarea, id, tinymce.init
 
 == Install {productname} using the Composer package manager
 

@@ -1,8 +1,8 @@
 = Handling image uploads
 :navtitle: Image uploads
 :description_short: How to manage asynchronous image uploads.
-:description: How to manage asynchronous image uploads.
-:keywords: uploader, uploadImages, image, handler, asynchronous, async, paste_data_images, image, cors
+:description: Configure and manage asynchronous image uploads using images_upload_handler or images_upload_url. Upload images to a server endpoint with custom handling.
+:keywords: uploader, uploadImages, image, handler, asynchronous, async, paste_data_images, image, cors, images_upload_handler, images_upload_url, image upload, server
 
 {productname} uploads edited images with the image uploader. This complements {productname}'s image editing functionality.
 

@@ -1,7 +1,7 @@
 = Quick start: {productname} from .zip
 :navtitle: Quick start: ZIP
 :description: Learn how to use {productname} from a .zip archive.
-:keywords: zip, archive, unzip, install
+:keywords: zip, archive, unzip, install, selector, textarea, id, tinymce.init
 
 == Install {productname} using a .zip package
 

@@ -21,6 +21,21 @@ tinymce.init({
 
 liveDemo::readonly-demo[]
 
+=== Example: switching modes programmatically
+
+Use the xref:apis/tinymce.editormode.adoc#set[`+editor.mode.set()+`] API to switch between `+readonly+` and `+design+` (editable) modes at runtime:
+
+[source,js]
+----
+const editor = tinymce.activeEditor;
+
+// Switch to read-only
+editor.mode.set('readonly');
+
+// Switch back to editable
+editor.mode.set('design');
+----
+
 === Behavior in `readonly` mode
 
 [cols="1,3,1", options="header"]

@@ -183,6 +183,21 @@ Adding this content to an HTML file and opening it in a web browser will load a
 
 liveDemo::default[]
 
+== Configure plugins and toolbar
+
+To enable specific plugins and customize the toolbar, use the `+plugins+` and `+toolbar+` options. For example, to add the `+image+` and `+code+` plugins with their toolbar buttons:
+
+[source,js]
+----
+tinymce.init({
+  selector: '#mytextarea',
+  plugins: 'image code',
+  toolbar: 'undo redo | image code'
+});
+----
+
+Plugin names are space-separated. Toolbar items can include plugin-provided buttons (such as `+image+` and `+code+`) and separators (`+|+`). For a full list of available plugins, see xref:plugins.adoc[Plugins].
+
 ifeval::["{productSource}" == "cloud"]
 == Add your API key
 

@@ -4,3 +4,33 @@ To retrieve content from the editor, either process the content with a form hand
 
 If you use a form handler, once the `+<form>+` is submitted, {productname} {productmajorversion} will `+POST+` the content in the same way as a normal HTML `+<textarea>+`, including the HTML elements and inline CSS of the editor content. The host's form handler can process the submitted content in the same way as content from a regular `+<textarea>+`.
 
+=== Get and set content programmatically
+
+Use the xref:apis/tinymce.editor.adoc#getContent[`+getContent+`] and xref:apis/tinymce.editor.adoc#setContent[`+setContent+`] APIs to read and write editor content from JavaScript.
+
+==== Example: retrieve editor content as HTML
+
+[source,js]
+----
+const editor = tinymce.activeEditor;
+const html = editor.getContent();
+console.log(html);
+----
+
+To retrieve the content as plain text instead of HTML:
+
+[source,js]
+----
+const editor = tinymce.activeEditor;
+const text = editor.getContent({ format: 'text' });
+console.log(text);
+----
+
+==== Example: set editor content
+
+[source,js]
+----
+const editor = tinymce.activeEditor;
+editor.setContent('<p>New content</p>');
+----
+