DOC-3387: Context7 benchmark improvements bucket (#4066)

kemister85 · metricjs · web-flow · commit 227357bce881 · 2026-04-14T09:15:36.000+10:00
* DOC-3388: Add getContent and setContent examples to save-content partial (#4052) Add programmatic get/set content section with runnable examples using editor.getContent(), getContent({ format: 'text' }), and editor.setContent() to address Context7 benchmark Q3 (12/100). * DOC-3389: Strengthen add-css-options page for custom content CSS (#4053) Update description and add keywords for content_css and content_style. Add intro paragraph explaining the two options to address Context7 benchmark Q8 (0/100). * DOC-3390: Add editor.on('change') example to events page (#4054) Add content change callback example using setup option and editor.on('change') to address Context7 benchmark Q4 (30/100). * DOC-3391: Add addButton and addCommand example to creating-a-plugin (#4055) * DOC-3391: Add addButton and addCommand example to creating-a-plugin Add toolbar button section showing PluginManager.add with editor.ui.registry.addButton and editor.addCommand to address Context7 benchmark Q9 (15/100). * Update modules/ROOT/pages/creating-a-plugin.adoc Co-authored-by: Millie <millie.macdonald@tiny.cloud> --------- Co-authored-by: Millie <millie.macdonald@tiny.cloud> * DOC-3392: Add programmatic mode.set example to readonly docs (#4056) Add example showing editor.mode.set('readonly') and editor.mode.set('design') for runtime mode switching to address Context7 benchmark Q7 (25/100). * DOC-3393: Add plugins and toolbar multi-plugin example to quickstart (#4057) Add "Configure plugins and toolbar" section with plugins: 'image code' and toolbar example to the quickstart partial to address Context7 benchmark Q2 (56/100). * DOC-3394: Add content filtering intro to content-filtering page (#4058) Update description and keywords to mention valid_elements, invalid_elements, extended_valid_elements. Add intro paragraph summarizing key filtering options to address Context7 benchmark Q10 (22/100). * DOC-3395: Improve quickstart keywords for selector/ID discoverability (#4059) Add selector, textarea, id, tinymce.init keywords to all quickstart pages (cloud, npm, php, .net, zip) to address Context7 benchmark Q1 (62/100). * DOC-3396: Improve custom-toolbarbuttons and file-image-upload metadata (#4060) Update description and keywords for custom-toolbarbuttons (addButton, custom button), file-image-upload (images_upload_handler), and upload-images pages to address Context7 benchmark Q5/Q6 (25/100 each). --------- Co-authored-by: Millie <millie.macdonald@tiny.cloud>
diff --git 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
@@ -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
@@ -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
@@ -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:
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>');
+----
+
