TinyMCE AI Plugin

This plugin is only available for paid TinyMCE subscriptions.

The TinyMCE AI plugin integrates AI-assisted authoring with rich-text editing. Users can interact through Actions, Reviews, or Conversations that can use relevant context from multiple sources.

Interactive example

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

Basic setup

To setup the TinyMCE AI plugin in the editor:

  • add tinymceai to the plugins option in the editor configuration;

  • add tinymceai to the toolbar option in the editor configuration;

  • configure the tinymceai_token_provider option to provide authentication tokens;

For example:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'tinymceai',
  toolbar: 'tinymceai',
  tinymceai_token_provider: function() {
    // Return a promise that resolves to a JWT token
    return fetch('/api/token').then(response => response.text());
  }
});

Options

The following configuration options affect the behavior of the TinyMCE AI plugin.

tinymceai_token_provider

Type: Function (() => Promise<string>)

Default value: undefined

Description: A function that returns a Promise resolving to a JWT token string for authenticating with the AI service.

Example: using tinymceai_token_provider

tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'showai aiquickactions aireview',
  tinymceai_token_provider: () => Promise.resolve('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...')
});
In production, you should fetch the JWT token from your backend server rather than hardcoding it. For example: 
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  tinymceai_token_provider: function() {
    return fetch('/api/token').then(response => response.text());
  }
});

Toolbar buttons

The TinyMCE AI plugin provides the following toolbar buttons:

Toolbar button identifier Description

tinymceai

Main AI plugin button

tinymceai-conversations

Conversations feature

tinymceai-actions

Quick Actions feature

tinymceai-reviews

Reviews feature

ask-ai

Quick Actions

explain

Quick Actions

summarize

Quick Actions

highlight-key-points

Quick Actions

improve-writing

Quick Actions

continue

Quick Actions

fix-grammar

Quick Actions

make-shorter

Quick Actions

make-longer

Quick Actions

make-tone-casual

Quick Actions

make-tone-direct

Quick Actions

make-tone-friendly

Quick Actions

make-tone-confident

Quick Actions

make-tone-professional

Quick Actions

translate-to-english

Quick Actions

translate-to-chinese

Quick Actions

translate-to-french

Quick Actions

translate-to-german

Quick Actions

translate-to-italian

Quick Actions

translate-to-portuguese

Quick Actions

translate-to-russian

Quick Actions

These toolbar buttons can be added to the editor using:

Toolbar button identifier Description

tinymceai

Main AI plugin button

tinymceai-conversations

Conversations feature

tinymceai-actions

Quick Actions feature

tinymceai-reviews

Reviews feature

ask-ai

Quick Actions

explain

Quick Actions

summarize

Quick Actions

highlight-key-points

Quick Actions

improve-writing

Quick Actions

continue

Quick Actions

fix-grammar

Quick Actions

make-shorter

Quick Actions

make-longer

Quick Actions

make-tone-casual

Quick Actions

make-tone-direct

Quick Actions

make-tone-friendly

Quick Actions

make-tone-confident

Quick Actions

make-tone-professional

Quick Actions

translate-to-english

Quick Actions

translate-to-chinese

Quick Actions

translate-to-french

Quick Actions

translate-to-german

Quick Actions

translate-to-italian

Quick Actions

translate-to-portuguese

Quick Actions

translate-to-russian

Quick Actions

The TinyMCE AI plugin provides the following menu items:

Menu item identifier Default Menu Location Description

These menu items can be added to the editor using:

Menu item identifier Default Menu Location Description

Commands

The TinyMCE AI plugin provides the following TinyMCE commands.

Command name Description

tinymceai-toggle-sidebar

Toggle the AI sidebar interface visibility. Accepts an optional object parameter with type ('static' or 'floating') and optional view (e.g., 'chat', 'review', 'actions') to open a specific view.

TinyMCEAIDumpDiagnostics

Download diagnostic information for troubleshooting purposes.
Examples
// Toggle the AI sidebar
editor.execCommand('tinymceai-toggle-sidebar');

// Open the sidebar with a specific view (e.g., 'chat')
editor.execCommand('tinymceai-toggle-sidebar', false, {
  type: 'static',
  view: 'chat'
});

// Close the sidebar
editor.execCommand('tinymceai-toggle-sidebar', false, {
  type: 'static'
});

Events

The TinyMCE AI plugin provides the following events.

Event name Description

tinymceai-toggle-floating-sidebar

Dispatched when the floating AI sidebar should be toggled. This event is used internally to control the visibility of the floating sidebar interface.
Example
editor.on('tinymceai-toggle-floating-sidebar', function() {
  // Handle the toggle floating sidebar event
  console.log('Floating sidebar toggle requested');
});

APIs

The TinyMCE AI plugin provides the following APIs.

todo:

Known issues and caveats

The TinyMCE AI plugin has the following known issues and caveats:

General HTML Support

TinyMCE AI may not work correctly when General HTML Support for block elements is enabled. This issue will be addressed in future updates. In the meantime, we recommend avoiding configurations that may cause problems.

Issues with tables

We are aware of certain glitches that may occur when the AI modifies complex tables or layout tables. To prevent data loss, please ensure that the content around these structures remains intact when using TinyMCE AI tools, while our team investigates the causes and potential solutions to this issue.

Editor context and multiple editor handling

While it’s possible to use TinyMCE AI with multiple editors in an editor context, only the first editor registered in the context will currently be able to interact with AI tools and benefit from the content suggestions made by the AI. As our team works on resolving this issue, we recommend using standalone editor instances with TinyMCE AI.

Inline image processing issues

Inline images may not be processed correctly by commands within AI review. A solution is currently under development.

Quick actions and content markers issues

Applying quick action responses may result in the loss of Comments and Suggested Edits suggestion markers. This issue will be addressed in a future update.

Limited interactivity in Chat history

The interactivity of historical AI chat conversations can become limited over time.

Issues with specific AI models

Some AI models may occasionally return empty responses. If this occurs, we recommend sending a follow-up message asking the Assistant to complete the previous request, or starting a new conversation.

If you wish to stay informed about updates or discuss TinyMCE AI possibilities, please reach out to us.