diff --git a/modules/ROOT/pages/add-css-options.adoc b/modules/ROOT/pages/add-css-options.adoc
index 92d4e3fbba..54579c5ec6 100644
--- a/modules/ROOT/pages/add-css-options.adoc
+++ b/modules/ROOT/pages/add-css-options.adoc
@@ -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
diff --git a/modules/ROOT/pages/cloud-quick-start.adoc b/modules/ROOT/pages/cloud-quick-start.adoc
index 1458a66601..99ece10a00 100644
--- a/modules/ROOT/pages/cloud-quick-start.adoc
+++ b/modules/ROOT/pages/cloud-quick-start.adoc
@@ -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
diff --git a/modules/ROOT/pages/content-filtering.adoc b/modules/ROOT/pages/content-filtering.adoc
index e65bc480a3..6a4378fe3c 100644
--- a/modules/ROOT/pages/content-filtering.adoc
+++ b/modules/ROOT/pages/content-filtering.adoc
@@ -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[]
diff --git a/modules/ROOT/pages/creating-a-plugin.adoc b/modules/ROOT/pages/creating-a-plugin.adoc
index 82df704005..0470f61787 100644
--- a/modules/ROOT/pages/creating-a-plugin.adoc
+++ b/modules/ROOT/pages/creating-a-plugin.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(' Inserted content ');
+ });
+
+ 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:
diff --git a/modules/ROOT/pages/custom-toolbarbuttons.adoc b/modules/ROOT/pages/custom-toolbarbuttons.adoc
index 10841e1138..ed1b70342a 100644
--- a/modules/ROOT/pages/custom-toolbarbuttons.adoc
+++ b/modules/ROOT/pages/custom-toolbarbuttons.adoc
@@ -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
diff --git a/modules/ROOT/pages/dotnet-projects.adoc b/modules/ROOT/pages/dotnet-projects.adoc
index 8e2611c48c..b18d22bc18 100644
--- a/modules/ROOT/pages/dotnet-projects.adoc
+++ b/modules/ROOT/pages/dotnet-projects.adoc
@@ -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
diff --git a/modules/ROOT/pages/events.adoc b/modules/ROOT/pages/events.adoc
index 22f2175abb..43b16a3500 100644
--- a/modules/ROOT/pages/events.adoc
+++ b/modules/ROOT/pages/events.adoc
@@ -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
diff --git a/modules/ROOT/pages/file-image-upload.adoc b/modules/ROOT/pages/file-image-upload.adoc
index 7d2ce60ce9..10193e6d96 100644
--- a/modules/ROOT/pages/file-image-upload.adoc
+++ b/modules/ROOT/pages/file-image-upload.adoc
@@ -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
diff --git a/modules/ROOT/pages/npm-projects.adoc b/modules/ROOT/pages/npm-projects.adoc
index 2c0daba170..bfccd52100 100644
--- a/modules/ROOT/pages/npm-projects.adoc
+++ b/modules/ROOT/pages/npm-projects.adoc
@@ -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
diff --git a/modules/ROOT/pages/php-projects.adoc b/modules/ROOT/pages/php-projects.adoc
index 0cc8beeb0c..273061d515 100644
--- a/modules/ROOT/pages/php-projects.adoc
+++ b/modules/ROOT/pages/php-projects.adoc
@@ -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
diff --git a/modules/ROOT/pages/upload-images.adoc b/modules/ROOT/pages/upload-images.adoc
index 8419927cd1..4439743352 100644
--- a/modules/ROOT/pages/upload-images.adoc
+++ b/modules/ROOT/pages/upload-images.adoc
@@ -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.
diff --git a/modules/ROOT/pages/zip-install.adoc b/modules/ROOT/pages/zip-install.adoc
index 2bba338bc1..e393a9d1b4 100644
--- a/modules/ROOT/pages/zip-install.adoc
+++ b/modules/ROOT/pages/zip-install.adoc
@@ -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
diff --git a/modules/ROOT/partials/configuration/readonly.adoc b/modules/ROOT/partials/configuration/readonly.adoc
index f5466b595a..a3fad8bb3c 100644
--- a/modules/ROOT/partials/configuration/readonly.adoc
+++ b/modules/ROOT/partials/configuration/readonly.adoc
@@ -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"]
diff --git a/modules/ROOT/partials/install/basic-quickstart-base.adoc b/modules/ROOT/partials/install/basic-quickstart-base.adoc
index 8d47b0aca3..407c31705f 100644
--- a/modules/ROOT/partials/install/basic-quickstart-base.adoc
+++ b/modules/ROOT/partials/install/basic-quickstart-base.adoc
@@ -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
diff --git a/modules/ROOT/partials/install/save-content.adoc b/modules/ROOT/partials/install/save-content.adoc
index 87cc276011..d6da4cf555 100644
--- a/modules/ROOT/partials/install/save-content.adoc
+++ b/modules/ROOT/partials/install/save-content.adoc
@@ -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 `+