---
title: "TinyMCE AI multi-editor mode"
description: "Group several editors on one page so that they share TinyMCE AI Chat, Review, and Quick Actions"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/tinymceai-multi-editor/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/tinymceai-multi-editor/index.md"
version: "latest"
last_updated: "2026-10-14T03:35:35Z"
tokens: 2596
---
# TinyMCE AI multi-editor mode

> **Note:** This feature is only available for TinyMCE 8.10 and later.
Multi-editor mode groups several TinyMCE editors on the same page so that they share one Chat sidebar and one Review sidebar. Use multi-editor mode when a page splits related content across several editors, for example a form with separate editors for a summary and a body, or a page that edits several related articles side by side.

In a group, Chat, Review, and Quick Actions work across the content of every editor. The TinyMCE AI plugin identifies the content of each editor by name, and previews and applies each change in the editor it belongs to.

## Demo

The demo below splits an article across an Introduction editor and a Body editor in one group. Select the
![Chat icon](../_images/icons-premium/ai-assistant.svg)
Chat toolbar button in either editor to open the shared Chat sidebar, which the first editor hosts. Then ask the AI to change both parts of the article, or run a review over both editors.

**Example**

```js
// Open-source plugins below are only for editing the demo HTML (lists, links, tables). TinyMCE AI options are the focus.
// Share one TinyMCE AI configuration between every editor in the group.
const sharedSettings = {
  height: '400px',
  plugins: ['tinymceai', 'advlist', 'lists', 'link', 'autolink', 'table', 'wordcount'],
  toolbar: 'undo redo | tinymceai-chat tinymceai-review ai-quickactions-translate | styles | bold italic | bullist numlist | link',
  tinymceai_sidebar_type: 'floating',
  tinymceai_chat_welcome_message: '<p>Welcome to TinyMCE AI. Pick an action below or type your own prompt.</p>',
  tinymceai_chat_welcome_actions: [
    { text: 'Here are some actions to get started:' },
    { title: 'Summarize the document', command: 'TinyMCEAIQuickActionsSummarize' },
    { title: 'Continue writing', command: 'TinyMCEAIQuickActionContinueWriting' },
    { title: 'Translate to Spanish', command: 'TinyMCEAIQuickActionTranslate', value: 'spanish' },
    { title: 'Review my document', command: 'ToggleSidebar', value: 'tinymceai-review' }
  ],
  tinymceai_token_provider: async () => {
    return fetch('/api/token', { credentials: 'include' })
      .then(resp => resp.text())
      .then(token => ({ token }));
  },
  tinymceai_chat_fetch_sources: () => Promise.resolve([{
    label: 'TinyMCE resources',
    sources: [
      { id: 'docs', label: 'TinyMCE Documentation', type: 'web-resource' },
      { id: 'blog', label: 'Tiny Blog', type: 'web-resource' },
      { id: 'survey-2023', label: 'State of rich text editing 2023', type: 'web-resource' },
    ]
  }]),
  tinymceai_chat_fetch_source: (id) => {
    const urls = {
      'docs': 'https://www.tiny.cloud/docs/tinymce/latest/',
      'blog': 'https://www.tiny.cloud/blog/',
      'survey-2023': 'https://www.tiny.cloud/developer-survey-results-2023/',
    };
    return Promise.resolve({ type: 'web-resource', url: urls[id] });
  },
  tinymceai_quickactions_custom: [
    {
      type: 'chat',
      title: 'Challenge',
      prompt: 'Challenge statements, verify facts and identify assumptions'
    }
  ],
  tinymceai_languages: [
    { title: 'English', language: 'english' },
    { title: 'Chinese (Simplified)', language: 'chinese' },
    { title: 'Spanish', language: 'spanish' },
    { title: 'German', language: 'german' },
    { title: 'Japanese', language: 'japanese' },
    { title: 'Portuguese', language: 'portuguese' },
    { title: 'Swedish', language: 'swedish' },
    { title: 'Korean', language: 'korean' },
    { title: 'Hindi (Devanagari)', language: 'hindi devanagari' },
    { title: 'Italian', language: 'italian' },
    { title: 'Klingon', language: 'klingon' },
    { title: 'Dothraki', language: 'dothraki' },
  ]
};

tinymce.init({
  ...sharedSettings,
  selector: 'textarea#tinymceai-multi-editor-introduction',
  tinymceai_group: 'article',
  tinymceai_document_name: 'Introduction',
  tinymceai_document_description: 'The introduction of the article. A title, a short paragraph that sets out the topic, and a figure.'
});

tinymce.init({
  ...sharedSettings,
  selector: 'textarea#tinymceai-multi-editor-body',
  tinymceai_group: 'article',
  tinymceai_document_name: 'Body',
  tinymceai_document_description: 'The main body of the article. Uses h2 and h3 subheadings, short paragraphs, a bulleted list, and a comparison table.'
});
```

> **Note:** This feature is not supported when TinyMCE is run in *inline* mode. It is only supported in *classic* mode. For more information on the differences between the editing modes, see [Inline editing mode](../use-tinymce-inline/).

## How grouped editors work

### Shared sidebar

The first editor of the group to be created hosts the shared Chat sidebar and Review sidebar. The Chat and Review toolbar buttons and menu items in every other editor of the group open, close, and focus that shared sidebar.

### Chat

By default, each chat prompt includes the content of every editor in the group. Each editor appears above the prompt as a context tag labeled with its [`tinymceai_document_name`](../tinymceai/#tinymceai_document_name) value, for example
![Body context tag](../_images/tinymceai/tinymceai-context-tag.png)
for an editor named `Body`.

Users can change which editors the AI works with:

- Removing a context tag leaves the content of that editor out of the prompt, and the AI does not change that editor.
- The **Add context source** menu lists every editor in the group and adds a removed editor back.

After a message is sent, the editors included in that message stay in the conversation and their context tags cannot be removed until the user starts a new conversation. Editors that were left out can still be added from the **Add context source** menu at any point in the conversation.

The AI can change the content of any editor in the conversation, and the plugin previews and applies each change in the editor it belongs to. To direct a request at the content of one editor, name that content in the prompt, for example *"Shorten the Introduction"*. For more information about chat, see [Chat](../tinymceai-chat/).

### Review

A review analyzes the content of every editor in the group. The Review sidebar groups suggestions under the name of the editor they belong to and shows the number of pending suggestions in each group. A review always covers the whole group. For more information about reviews, see [Review](../tinymceai-review/).

### Quick Actions

Users can run a Quick Action from any editor in the group. What the Quick Action changes depends on whether text is selected in that editor:

- With text selected, the Quick Action changes only the selected text in that editor.
- With no text selected, the Quick Action changes the whole content of every editor in the group and ignores any text selected in the other editors. For example, running **Translate** with no text selected translates every editor in the group.

Chat actions, such as **Explain**, **Summarize**, and **Highlight key points**, open the shared Chat sidebar and start a conversation that includes every editor in the group, as described in [Chat](#chat). For more information about Quick Actions, see [Quick Actions](../tinymceai-actions/).

### Previewing and applying changes

While the TinyMCE AI plugin previews changes from Chat or Quick Actions, each affected editor shows its own preview and is read-only. The whole group shares one change toolbar:

- The change counter covers the changes in every editor of the group.
- The next and previous buttons move between changes across editors.
- Selecting a change in any editor moves the change toolbar to that change.
- Accepting or rejecting a change applies it to the editor that holds the change.

### Discarding pending suggestions

When any editor in the group has pending suggestions, the TinyMCE AI plugin asks for confirmation before it discards them and starts a different AI task. For example, the confirmation dialog appears when the user switches between the Chat sidebar and the Review sidebar, or runs a Quick Action while a review has pending suggestions.

If the user confirms, the plugin discards the pending suggestions in every editor of the group and returns each editor to normal editing. If the user cancels, the plugin keeps every preview and pending suggestion.

## Integration

To group editors, load the `tinymceai` plugin in each editor and set the same [`tinymceai_group`](../tinymceai/#tinymceai_group) value on each editor in the group. Give each editor a unique [`tinymceai_document_name`](../tinymceai/#tinymceai_document_name) value, and optionally a [`tinymceai_document_description`](../tinymceai/#tinymceai_document_description) value that describes the content to the AI.

Multi-editor mode is supported with the floating sidebar. Set [`tinymceai_sidebar_type`](../tinymceai/#tinymceai_sidebar_type) to `'floating'` for every editor in the group.

Use the same TinyMCE AI configuration for every editor in a group, for example by sharing a settings object between the `tinymce.init` calls:

```js
const sharedSettings = {
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_sidebar_type: 'floating',
  tinymceai_group: 'article',
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.text()).then(token => ({ token }));
  }
};

tinymce.init({
  ...sharedSettings,
  selector: 'textarea#introduction', // change this value according to the HTML
  tinymceai_document_name: 'Introduction',
  tinymceai_document_description: 'The introduction of the article. A short paragraph that sets out the topic and hooks the reader.'
});

tinymce.init({
  ...sharedSettings,
  selector: 'textarea#body', // change this value according to the HTML
  tinymceai_document_name: 'Body',
  tinymceai_document_description: 'The main body of the article. Uses h2 subheadings and short paragraphs.'
});
```
Grouped editors must be on the same page and use the same `tinymce` instance. Set [`tinymceai_group`](../tinymceai/#tinymceai_group) in the initial configuration of each editor.

For information about installing the plugin and enabling AI features, see [Plugin Reference](../tinymceai/).

### Multiple groups on one page

A page can contain several independent groups, each with a different [`tinymceai_group`](../tinymceai/#tinymceai_group) value. Each group has its own shared sidebar, and an editor in one group never receives the content of an editor in another group. For a configuration with two groups, see the [two-group example](../tinymceai/#tinymceai_group).

## Configuration

For the options that configure multi-editor mode, see [Options for multi-editor mode](../tinymceai/#options-multi-editor).

## Related features

- [AI Chat](../tinymceai-chat/): For interactive discussions with document analysis and context.
- [AI Review](../tinymceai-review/): For content quality analysis and improvement suggestions.
- [Quick Actions](../tinymceai-actions/): For fast, stateless content transformations.