TinyMCE AI Quick Actions

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 AI chat to get instant AI insights and analysis. 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 Chat.

Demo

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<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>
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"
});

Overview

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.

TinyMCE AI quick actions showing AI-powered suggestions and Q&A functionality

Integration

To start using the Quick Actions feature, first load the TinyMCE AI plugin in your editor configuration. Learn more about installing and enabling AI features.

Then, you can add the menu that opens the list of Quick Actions (tinymceai-actions) Quick Actions icon to your main toolbar and/or balloon toolbar configurations. To learn more about toolbar configuration, refer to the toolbar configuration guide.

TinyMCE AI Quick Actions dropdown in the toolbar

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 Ask AI icon button, or the improve-writing Improve Writing icon button (find it in the demo above). You can add whole categories to the toolbar, too. Learn more about available actions.

The final example configuration looks as follows:

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: [
    // The main Quick Actions button
    'tinymceai-actions',

    // Two individual actions
    'ask-ai',
    'improve-writing',

    // Whole action category
    'translate',

    // ... other toolbar items
  ],

  // Adding Quick Actions to the balloon toolbar. Since some of the actions are selection-sensitive,
  // accessing them might be easier for users using this kind of toolbar.
  quickbars_selection_toolbar: 'tinymceai-actions | ask-ai | improve-writing | translate'
});

Types of actions

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

  • Some actions, for instance, "Ask AI" or "Summarize", lead to the 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.

  • 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.

You can define the behavior of each action when you create custom ones.

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 Quick Actions icon (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.

Keep in mind that you can add custom actions to the list and remove defaults.

Here’s the full list of available actions:

  • 'ask-ai'

  • "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

The tinymceai_actions_extraCommands configuration property allows you to add new commands to the 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 AI chat. Learn more about types of actions.

tinymce.init({
  selector: '#editor',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-actions',
  tinymceai_token_provider: function() {
    return fetch('/api/token').then(response => response.text());
  },
  tinymceai_actions_extraCommands: [
    {
      id: 'add-quote-from-famous-person',
      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: 'agent-1'
    },
    {
      id: 'summarize-in-bullet-points',
      displayedPrompt: 'Summarize in 5 bullet points',
      prompt: 'Summarize the selected text in 5 bullet points.',
      type: 'CHAT'
    },
    {
      id: 'include-more-sarcasm',
      displayedPrompt: 'Rewrite adding more sarcasm',
      prompt: 'Rewrite using a sarcastic tone.',
      type: 'ACTION',
      model: 'agent-1'
    }

    // ... More commands ...
  ]
});

Removing default actions

The tinymceai_actions_removeCommands configuration property allows you to remove existing commands from the Quick actions feature. Here’s an example that removes two actions ("Explain" and "Summarize"):

tinymce.init({
  selector: '#editor',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-actions',
  tinymceai_token_provider: function() {
    return fetch('/api/token').then(response => response.text());
  },
  tinymceai_actions_removeCommands: [
    'explain',
    'summarize'

    // ... More commands to remove ...
  ]
});

  • AI chat – For interactive discussions with document analysis and context.

  • AI review – For content quality analysis and improvement suggestions.

  • Actions API – For API-level action functionality.

  • Introduction – Overview of all TinyMCE AI features.