Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions modules/ROOT/examples/live-demos/tinymceai/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<textarea id="tinymceai">
<h1 style="font-size: 1.5em; color: black; margin-top: 0; text-align: left;">TinyMCE AI</h1>
<p style="font-size: 1em; color: #333; margin: 15px 0;">TinyMCE AI provides AI-powered features including AI chat, AI review, and quick actions.</p>
</textarea>
6 changes: 6 additions & 0 deletions modules/ROOT/examples/live-demos/tinymceai/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
tinymce.init({
selector: 'textarea#tinymceai',
height: '800px',
plugins: ["tinymceai", "advlist", "anchor", "autolink", "charmap", "code"],
toolbar: "undo redo | tinymceai | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
18 changes: 18 additions & 0 deletions modules/ROOT/nav.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,24 @@
**** xref:ai-bedrock.adoc[Amazon Bedrock integration guide]
**** xref:ai-gemini.adoc[Google Gemini integration guide]
**** xref:ai-proxy.adoc[AI proxy server reference guide]
*** TinyMCE AI
**** xref:tinymceai-introduction.adoc[Introduction]
**** xref:tinymceai-chat.adoc[Chat]
**** xref:tinymceai-review-plugin.adoc[Review]
**** xref:tinymceai-actions-plugin.adoc[Actions]
**** xref:tinymceai-models.adoc[AI Models]
**** xref:tinymceai-limits.adoc[Limits]
**** xref:tinymceai-integration-options.adoc[Integration Options]
***** xref:tinymceai.adoc[Plugin quick start]
***** REST API
****** xref:tinymceai-api-overview.adoc[API Overview]
****** xref:tinymceai-api-quick-start.adoc[API quick start]
****** xref:tinymceai-streaming.adoc[Streaming]
**** xref:tinymceai-jwt-authentication-intro.adoc[JWT Authentication]
***** xref:tinymceai-permissions.adoc[Permissions]
***** Guides
****** xref:tinymceai-with-jwt-authentication-nodejs.adoc[JWT authentication (Node.js)]
****** xref:tinymceai-with-jwt-authentication-php.adoc[JWT authentication (PHP)]
*** xref:casechange.adoc[Case Change]
*** xref:checklist.adoc[Checklist]
*** Comments
Expand Down
6 changes: 6 additions & 0 deletions modules/ROOT/pages/available-menu-items.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,12 @@ include::partial$misc/plugin-menu-item-id-boilerplate.adoc[]
:plugincode: ai
include::partial$misc/plugin-menu-item-id-boilerplate.adoc[]

:plugincategory: premium
:pluginname: TinyMCE AI
:plugincode: tinymceai
:pluginpage: tinymceai.adoc
include::partial$misc/plugin-menu-item-id-boilerplate.adoc[]

:plugincategory: opensource
:pluginname: Anchor
:plugincode: anchor
Expand Down
6 changes: 6 additions & 0 deletions modules/ROOT/pages/available-toolbar-buttons.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,12 @@ include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]
:plugincode: ai
include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]

:plugincategory: premium
:pluginname: TinyMCE AI
:plugincode: tinymceai
:pluginpage: tinymceai.adoc
include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]

:plugincategory: premium
:pluginname: Enhanced Code Editor
:plugincode: advcode
Expand Down
8 changes: 8 additions & 0 deletions modules/ROOT/pages/editor-command-identifiers.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -215,6 +215,7 @@ Commands are available for the following plugins:
* xref:advancedlists[Advanced Lists]
* xref:Enhanced Tables[Enhanced Tables]
* xref:anchor[Anchor]
* xref:tinymceai[TinyMCE AI]
* xref:autoresize[Autoresize]
* xref:casechange[Case Change]
* xref:charactermap[Character Map]
Expand Down Expand Up @@ -525,6 +526,13 @@ The following commands require the xref:tableofcontents.adoc[Table of Contents (

include::partial$commands/tableofcontents-cmds.adoc[leveloffset=+3]

[[tinymceai]]
==== TinyMCE AI

The following commands require the xref:tinymceai.adoc[TinyMCE AI (`+tinymceai+`)] plugin.

include::partial$commands/tinymceai-cmds.adoc[leveloffset=+3]

[[advtemplate]]
==== Templates

Expand Down
8 changes: 8 additions & 0 deletions modules/ROOT/pages/events.adoc
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,7 @@ The following plugins provide events.
* xref:a11ychecker-events[Accessibility Checker events]
* xref:autosave-events[Autosave events]
* xref:character-map-events[Character Map events]
* xref:tinymceai-events[TinyMCE AI events]
* xref:comments-events[Comments events]
* xref:format-painter-events[Format Painter events]
* xref:fullscreen-events[Fullscreen events]
Expand Down Expand Up @@ -292,6 +293,13 @@ The following event is provided by the xref:charmap.adoc[Character Map plugin].
|InsertCustomChar |`+{ chr: string }+` |Fired before a special character is inserted into the editor.
|===

[[tinymceai-events]]
=== TinyMCE AI events

The following events are provided by the xref:tinymceai.adoc[TinyMCE AI plugin].

include::partial$events/tinymceai-events.adoc[]

[[comments-events]]
=== Comments events

Expand Down
263 changes: 263 additions & 0 deletions modules/ROOT/pages/tinymceai-actions-plugin.adoc
Original file line number Diff line number Diff line change
@@ -0,0 +1,263 @@
= TinyMCE AI Quick Actions

:navtitle: Quick Actions
:description: quick actions feature for TinyMCE AI plugin
:description_short: quick actions feature
:keywords: AI, quick actions, actions, tinymceai

Quick actions streamline routine content transformations by offering one-click AI-powered suggestions directly within the editor. This feature enhances speed, relevance, and usability, particularly for repeatable or simple tasks. The feature comes with an easy-to-use window interface but can also act as a conversation starter with the xref:tinymceai-chat.adoc[Chat].

The Quick Actions feature is available as a plugin UI and via the xref:tinymceai-actions-plugin.adoc#actions-api[Actions API]. This page covers both:

* Plugin sections describe user-facing features and configuration.
* API sections cover REST API access (starting at xref:tinymceai-actions-plugin.adoc#actions-api[Actions API]).

[[demo]]
== Demo

liveDemo::tinymceai[]

Actions are fast, stateless operations that transform content directly. Unlike Reviews that provide suggestions, Actions immediately modify content based on the selected operation.

**When to use Actions vs Reviews:** Use Actions when transforming a selection or small section of text (fix grammar, translate, adjust tone). Use Reviews when analyzing entire documents for quality improvements and getting suggestions without automatically changing the content.

image::https://placehold.net/default.png[TinyMCE AI quick actions showing AI-powered suggestions and Q&A functionality]

[[integration]]
== Integration

To start using the Quick Actions feature, first load the TinyMCE AI plugin in the editor configuration. See xref:tinymceai.adoc[Plugin Reference] for installation and enabling AI features.

Then, add the menu that opens the list of Quick Actions (`tinymceai-actions`) image:https://placehold.net/default.png[Quick Actions icon,24px] to the main toolbar and/or context toolbar (selection toolbar) configurations.

[NOTE]
====
AI features are added to the selection toolbar by default when the plugin is enabled. The `tinymceai_context_toolbar` configuration option controls which AI features appear in the selection toolbar. Configure it to show specific features, for example: `tinymceai_context_toolbar: 'showai aiquickactions aireview'` or `tinymceai_context_toolbar: 'showai aireview'` to show only certain features.
====

To learn more about toolbar configuration, refer to the xref:toolbar-configuration-options.adoc[toolbar configuration] guide.

image::https://placehold.net/default.png[TinyMCE AI Quick Actions dropdown in the toolbar]

Finally, individual Quick Actions can also be added to the toolbar as shortcuts for even easier access. For example, add the `tinymceai-improve-writing` image:https://placehold.net/default.png[Improve Writing icon,24px] button, or the `tinymceai-explain` image:https://placehold.net/default.png[Explain icon,24px] button (find it in the demo above). Whole categories can be added to the toolbar, too. xref:tinymceai-actions-plugin.adoc#default-actions[Learn more about available actions].

The final example configuration looks as follows:

[source,js]
----
tinymce.init({
selector: '#editor',
plugins: 'tinymceai',
tinymceai_token_provider: function() {
return fetch('/api/token').then(response => response.text());
},

// Adding Quick Actions to the main editor toolbar.
toolbar: 'undo redo showai aiquickactions aireview | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

// Adding Quick Actions to the context toolbar (selection toolbar). Since some of the actions are selection-sensitive,
// accessing them might be easier for users using this kind of toolbar.
tinymceai_context_toolbar: 'showai aiquickactions aireview',

// Configure the main Quick Actions menu
tinymceai_quickactions_menu: [
'tinymceai-chat-commands',
'tinymceai-improve-writing',
'tinymceai-continue',
'tinymceai-fix-grammar',
'tinymceai-adjust-length',
'tinymceai-change-tone',
'tinymceai-translate'
],

// Configure a sub-menu (e.g., chat commands)
tinymceai_chat_commands_menu: [
'tinymceai-explain',
'tinymceai-summarize',
'tinymceai-highlight-key-points'
],

tinymceai_sidebar_type: 'static'
});
----

[[types-of-actions]]
== Types of actions

There are two types of actions available in the quick actions feature:

* Chat actions, such as "Explain" or "Summarize", open the xref:tinymceai-chat.adoc[Chat] interface with the selected text added as context and automatically start the conversation with a pre-filled prompt.

* Preview actions, such as "Continue writing", "Make shorter", "Improve writing", or "Fix grammar", display the AI response in a preview interface where users can review and accept or reject the suggested changes.

The behavior of each action can be defined when xref:tinymceai-actions-plugin.adoc#custom-actions[creating custom ones].

[[default-actions]]
== Default Actions

By default, the Quick Actions feature includes several built-in actions that speed up the content editing process. All Quick Actions can be accessed through the menu button image:https://placehold.net/default.png[Quick Actions icon,24px] (`tinymceai-actions`) but also individually when handpicked by the integrator in the xref:toolbar-configuration-options.adoc[editor toolbar configuration]. Whole action categories can be added to the toolbar too.

Keep in mind that xref:tinymceai-actions-plugin.adoc#custom-actions[custom actions] can be added to the list and xref:tinymceai-actions-plugin.adoc#removing-default-actions[defaults can be removed].

Here's the full list of available actions:

* **"Chat commands"** category (`'chat-commands'`)
** `'explain'`
** `'summarize'`
** `'highlight-key-points'`
* `'improve-writing'`
* `'continue'`
* `'fix-grammar'`
* **"Adjust length"** category (`'adjust-length'`)
** `'make-shorter'`
** `'make-longer'`
* **"Change tone"** category (`'change-tone'`)
** `'make-tone-casual'`
** `'make-tone-direct'`
** `'make-tone-friendly'`
** `'make-tone-confident'`
** `'make-tone-professional'`
* **"Translate"** category (`'translate'`)
** `'translate-to-english'`
** `'translate-to-chinese'`
** `'translate-to-french'`
** `'translate-to-german'`
** `'translate-to-italian'`
** `'translate-to-portuguese'`
** `'translate-to-russian'`

[[custom-actions]]
== Custom Actions

The `tinymceai_custom_commands` configuration property allows adding new commands to the Quick actions feature. The items can be type `action` (a quick action that goes straight to the preview rendering) or type `chat` (opens the chat interface). The `displayedPrompt` is used in the menu items, while the `prompt` is what is actually sent to the AI. The `model` is required for `action` type commands. Learn more about xref:tinymceai-actions-plugin.adoc#types-of-actions[types of actions].

[source,js]
----
tinymce.init({
selector: '#editor',
plugins: 'tinymceai',
toolbar: 'tinymceai-actions',
tinymceai_token_provider: function() {
return fetch('/api/token').then(response => response.text());
},
tinymceai_custom_commands: [
{
displayedPrompt: 'Add a quote from a famous person',
prompt: 'Add a quote from a known person, which would make sense in the context of the selected text.',
type: 'action',
model: 'gemini-2-5-flash'
},
{
displayedPrompt: 'Summarize in 5 bullet points',
prompt: 'Summarize the selected text in 5 bullet points.',
type: 'chat'
},
{
displayedPrompt: 'Rewrite adding more sarcasm',
prompt: 'Rewrite using a sarcastic tone.',
type: 'action',
model: 'gemini-2-5-flash'
}
]
});
----

[[configuring-quick-actions-menu]]
== Configuring Quick Actions menu

Which actions appear in the Quick Actions menu can be configured by specifying the list of actions to include. The `tinymceai_quickactions_menu` configuration option controls the main menu items.

Sub-menus have their own configuration options:
* `tinymceai_chat_commands_menu` - Controls items in the "Chat commands" sub-menu
* `tinymceai_adjust_length_menu` - Controls items in the "Adjust length" sub-menu
* `tinymceai_change_tone_menu` - Controls items in the "Change tone" sub-menu
* `tinymceai_translate_menu` - Controls items in the "Translate" sub-menu

[source,js]
----
tinymce.init({
selector: '#editor',
plugins: 'tinymceai',
toolbar: 'tinymceai-actions',
tinymceai_token_provider: function() {
return fetch('/api/token').then(response => response.text());
},
// Configure the main Quick Actions menu
tinymceai_quickactions_menu: [
'tinymceai-chat-commands',
'tinymceai-improve-writing',
'tinymceai-continue',
'tinymceai-fix-grammar',
'tinymceai-adjust-length',
'tinymceai-change-tone',
'tinymceai-translate',
'tinymceai-custom-commands'
],
// Configure a sub-menu (e.g., chat commands)
tinymceai_chat_commands_menu: [
'tinymceai-explain',
'tinymceai-summarize',
'tinymceai-highlight-key-points'
]
});
----

[[actions-api]]
== Actions API

The Quick Actions plugin feature is built on top of the Actions API, which provides REST API access to action functionality. Actions are fast, stateless operations that transform content directly. Unlike Reviews that provide suggestions, Actions immediately modify your content based on the selected operation.

**When to use Actions vs Reviews:** Use Actions when you need to transform specific text content (fix grammar, translate, adjust tone). Use Reviews when you need to analyze entire documents for quality improvements and get suggestions without automatically changing the content.

Unlike conversations, actions do not remember previous interactions. Each action is independent and focused on a single task. Actions use streaming output with Server-Sent Events for real-time feedback as results are generated.

[[actions-system-actions-api]]
=== System Actions

TinyMCE AI provides built-in system actions for common content transformations via the API. These correspond to the default actions available in the plugin UI:

* **Fix Grammar** (`fix-grammar`) – Correct grammar, spelling, and punctuation errors. See https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API] for the fix grammar endpoint.
* **Improve Writing** (`improve-writing`) – Enhance clarity, word choice, and sentence structure. See https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API] for the improve writing endpoint.
* **Continue Writing** (`continue`) – Complete unfinished sentences, paragraphs, or entire documents. See https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API] for the continue writing endpoint.
* **Make Longer** (`make-longer`) – Expand content with more detail, examples, and explanations. See https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API] for the make longer endpoint.
* **Make Shorter** (`make-shorter`) – Condense lengthy text while keeping the essential information. See https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API] for the make shorter endpoint.
* **Adjust Tone** (`make-tone-*`) – Change writing style to casual, professional, friendly, or confident. See https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API] for tone adjustment endpoints.
* **Translate** (`translate-*`) – Convert content between languages with proper cultural context. See https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API] for the translation endpoint.

[[actions-custom-actions-api]]
=== Custom Actions via API

In addition to system actions, you can create custom actions tailored to your specific use cases via the API. Custom actions allow you to define specialized content transformations using your own prompts to control AI behavior.

Unlike system actions that use predefined identifiers, custom actions use a unified endpoint where you define the transformation behavior through a prompt parameter. See https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API] for the custom actions endpoint and implementation details.

Custom actions require the `ai:actions:custom` permission in your JWT token.

[[actions-streaming]]
=== Streaming Responses

Actions use Server-Sent Events (SSE) for real-time streaming results. See the xref:tinymceai-streaming.adoc[Streaming Responses guide] for detailed implementation information.

[[actions-api-reference]]
=== API Reference

For complete endpoint documentation, request/response schemas, authentication details, and additional parameters, see:

* **https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API Reference]** – Full documentation for system and custom actions endpoints with interactive examples

The REST API documentation includes examples for:

* Grammar fix - see https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API]
* Writing improvement - see https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API]
* Content expansion (make longer) - see https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API]
* Content condensation (make shorter) - see https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API]
* Tone adjustment - see https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API]
* Translation - see https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API]
* Custom actions with custom prompts - see https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API]
* Streaming responses - see https://tinymceai.api.tiny.cloud/docs#tag/Actions[Actions API]

[[related-features]]
== Related Features

* xref:tinymceai-chat.adoc[AI chat] – For interactive discussions with document analysis and context.
* xref:tinymceai-review-plugin.adoc[AI review] – For content quality analysis and improvement suggestions.
Loading
Loading