|
| 1 | += TinyMCE AI Quick Actions |
| 2 | + |
| 3 | +:navtitle: Quick Actions |
| 4 | +:description: quick actions feature for TinyMCE AI plugin |
| 5 | +:description_short: quick actions feature |
| 6 | +:keywords: AI, quick actions, actions, tinymceai |
| 7 | + |
| 8 | +quick actions streamline routine content transformations by offering one-click AI-powered suggestions directly within the editor. You can also ask questions about your selected text in the Chat to get instant AI insights and analysis. This feature enhances speed, relevance, and usability, particularly for repeatable or simple tasks, while preserving deeper chat-based functionality when needed. |
| 9 | + |
| 10 | +[[overview]] |
| 11 | +== Overview |
| 12 | + |
| 13 | +Actions are fast, stateless operations that transform content directly. Unlike Reviews that provide suggestions, Actions immediately modify your content based on the selected operation. |
| 14 | + |
| 15 | +**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. |
| 16 | + |
| 17 | +[[integration]] |
| 18 | +== Integration |
| 19 | + |
| 20 | +To start using the quick actions feature, first load the TinyMCE AI plugin in your editor configuration. See xref:tinymceai.adoc[Plugin Reference] for installation and enabling AI features. |
| 21 | + |
| 22 | +Then, you can add the menu that opens the list of quick actions (`tinymceai-actions`) to your main toolbar and/or balloon toolbar configurations. To learn more about toolbar configuration, refer to the xref:toolbar-configuration-options.adoc[toolbar configuration] guide. |
| 23 | + |
| 24 | +// image::tinymceai/ai-quick-actions-dropdown.png[AI quick actions dropdown in the toolbar] |
| 25 | +// TODO: Add image placeholder |
| 26 | + |
| 27 | +Finally, you can also add individual quick actions to the toolbar as shortcuts for even easier access. For example, you can add the `ask-ai` button, or the `improve-writing` button. You can add whole categories to the toolbar, too. |
| 28 | + |
| 29 | +The final example configuration looks as follows: |
| 30 | + |
| 31 | +[source,js] |
| 32 | +---- |
| 33 | +tinymce.init({ |
| 34 | + selector: '#editor', |
| 35 | + plugins: 'tinymceai', |
| 36 | + |
| 37 | + // Adding quick actions to the main editor toolbar |
| 38 | + toolbar: [ |
| 39 | + // The main quick actions button |
| 40 | + 'tinymceai-actions', |
| 41 | + |
| 42 | + // Two individual actions |
| 43 | + 'ask-ai', |
| 44 | + 'improve-writing', |
| 45 | + |
| 46 | + // Whole action category |
| 47 | + 'translate', |
| 48 | + |
| 49 | + // ... other toolbar items |
| 50 | + ], |
| 51 | + |
| 52 | + // Adding quick actions to the balloon toolbar. Since some of the actions are selection-sensitive, |
| 53 | + // accessing them might be easier for users using this kind of toolbar |
| 54 | + quickbars_selection_toolbar: 'tinymceai-actions | ask-ai | improve-writing | translate', |
| 55 | + |
| 56 | + tinymceai_token_provider: function() { |
| 57 | + return fetch('/api/token').then(response => response.text()); |
| 58 | + } |
| 59 | +}); |
| 60 | +---- |
| 61 | + |
| 62 | +[[types-of-actions]] |
| 63 | +== Types of actions |
| 64 | + |
| 65 | +There are two types of actions available in the quick actions feature: |
| 66 | + |
| 67 | +* Some actions, for instance, "Ask AI" or "Summarize", lead to the xref:tinymceai-chat.adoc[Chat] interface with selected text added as context. The former will just open the Chat and allow you to start typing your message. The latter, however, will not only open the Chat but also start the conversation for your current editor selection right away, and expect a summary of that selection from the AI. |
| 68 | + |
| 69 | +* Executing other actions like "Continue writing" or "Make shorter" will open the window interface conveniently right next to your selection and present the answers from the AI for you to accept or reject them. |
| 70 | + |
| 71 | +You can define the behavior of each action when you create custom ones. |
| 72 | + |
| 73 | +[[default-actions]] |
| 74 | +== Default Actions |
| 75 | + |
| 76 | +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 (`tinymceai-actions`) but also individually when handpicked by the integrator in the editor toolbar configuration. You can add the whole action categories to the toolbar too. |
| 77 | + |
| 78 | +Keep in mind that you can add custom actions to the list and remove defaults. |
| 79 | + |
| 80 | +Here's the full list of available actions: |
| 81 | + |
| 82 | +* `ask-ai` |
| 83 | +* **Chat commands** category (`chat-commands`) |
| 84 | + ** `explain` |
| 85 | + ** `summarize` |
| 86 | + ** `highlight-key-points` |
| 87 | +* `improve-writing` |
| 88 | +* `continue` |
| 89 | +* `fix-grammar` |
| 90 | +* **Adjust length** category (`adjust-length`) |
| 91 | + ** `make-shorter` |
| 92 | + ** `make-longer` |
| 93 | +* **Change tone** category (`change-tone`) |
| 94 | + ** `make-tone-casual` |
| 95 | + ** `make-tone-direct` |
| 96 | + ** `make-tone-friendly` |
| 97 | + ** `make-tone-confident` |
| 98 | + ** `make-tone-professional` |
| 99 | +* **Translate** category (`translate`) |
| 100 | + ** `translate-to-english` |
| 101 | + ** `translate-to-chinese` |
| 102 | + ** `translate-to-french` |
| 103 | + ** `translate-to-german` |
| 104 | + ** `translate-to-italian` |
| 105 | + ** `translate-to-portuguese` |
| 106 | + ** `translate-to-russian` |
| 107 | + |
| 108 | +[[custom-actions]] |
| 109 | +== Custom Actions |
| 110 | + |
| 111 | +The `tinymceai_actions_extraCommands` configuration property allows you to add new commands to the AI quick actions feature. Below, you will find an example of three extra actions added to the user interface: two of them open the quick actions window, but the last one interacts with the Chat. Learn more about types of actions. |
| 112 | + |
| 113 | +[source,js] |
| 114 | +---- |
| 115 | +tinymce.init({ |
| 116 | + selector: '#editor', |
| 117 | + plugins: 'tinymceai', |
| 118 | + toolbar: 'tinymceai-actions', |
| 119 | + tinymceai_token_provider: function() { |
| 120 | + return fetch('/api/token').then(response => response.text()); |
| 121 | + }, |
| 122 | + tinymceai_actions_extraCommands: [ |
| 123 | + { |
| 124 | + id: 'add-quote-from-famous-person', |
| 125 | + displayedPrompt: 'Add a quote from a famous person', |
| 126 | + prompt: 'Add a quote from a known person, which would make sense in the context of the selected text.', |
| 127 | + type: 'ACTION', |
| 128 | + model: 'agent-1' |
| 129 | + }, |
| 130 | + { |
| 131 | + id: 'summarize-in-bullet-points', |
| 132 | + displayedPrompt: 'Summarize in 5 bullet points', |
| 133 | + prompt: 'Summarize the selected text in 5 bullet points.', |
| 134 | + type: 'CHAT' |
| 135 | + }, |
| 136 | + { |
| 137 | + id: 'include-more-sarcasm', |
| 138 | + displayedPrompt: 'Rewrite adding more sarcasm', |
| 139 | + prompt: 'Rewrite using a sarcastic tone.', |
| 140 | + type: 'ACTION', |
| 141 | + model: 'agent-1' |
| 142 | + } |
| 143 | + |
| 144 | + // ... More commands ... |
| 145 | + ] |
| 146 | +}); |
| 147 | +---- |
| 148 | + |
| 149 | +[[removing-default-actions]] |
| 150 | +== Removing default actions |
| 151 | + |
| 152 | +The `tinymceai_actions_removeCommands` configuration property allows you to remove existing commands from the AI quick actions feature. Here's an example that removes two actions ("Explain" and "Summarize"): |
| 153 | + |
| 154 | +[source,js] |
| 155 | +---- |
| 156 | +tinymce.init({ |
| 157 | + selector: '#editor', |
| 158 | + plugins: 'tinymceai', |
| 159 | + toolbar: 'tinymceai-actions', |
| 160 | + tinymceai_token_provider: function() { |
| 161 | + return fetch('/api/token').then(response => response.text()); |
| 162 | + }, |
| 163 | + tinymceai_actions_removeCommands: [ |
| 164 | + 'explain', |
| 165 | + 'summarize' |
| 166 | + |
| 167 | + // ... More commands to remove ... |
| 168 | + ] |
| 169 | +}); |
| 170 | +---- |
| 171 | + |
| 172 | +[[related-features]] |
| 173 | +== Related Features |
| 174 | + |
| 175 | +* xref:tinymceai-chat.adoc[AI Chat] – For interactive discussions with document analysis and context. |
| 176 | +* xref:tinymceai-review-plugin.adoc[AI Review] – For content quality analysis and improvement suggestions. |
| 177 | +* xref:tinymceai-actions.adoc[Actions API] – For API-level action functionality. |
| 178 | +* xref:tinymceai-introduction.adoc[Introduction] – Overview of all TinyMCE AI features. |
0 commit comments