TinyMCE AI multi-editor mode

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

  • TinyMCE

  • HTML

  • JS

Introduction (first editor in the group)

Body (shares the AI sidebar with the Introduction)

<h3>Introduction (first editor in the group)</h3>
<textarea id="tinymceai-multi-editor-introduction">
<h1>The Future of Content Creation: Integrating GenAI into Modern Workflows</h1>
<p>The landscape of digital content creation is undergoing a seismic shift. For years, the process of writing, editing, and publishing remained largely manual, requiring significant cognitive load for every draft. However, the emergence of Generative AI (GenAI) has introduced a new paradigm. By embedding intelligence directly into the tools where writing happens, organizations can unlock unprecedented levels of productivity and creativity.</p>
<figure class="image"><img style="width: 566px; aspect-ratio: 1536 / 1024; display: block; margin-left: auto; margin-right: auto;" src="https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/preview/" sizes="(min-width: 1536px) 1536px, 100vw" srcset="https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/100x/ 100w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/200x/ 200w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/300x/ 300w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/500x/ 500w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/750x/ 750w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/1000x/ 1000w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/1250x/ 1250w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/resize/1500x/ 1500w,https://tiny.ucarecdn.com/c273f5d9-8931-4f66-86a4-347a6137ca88/-/preview/ 1536w" alt="Retro pop art illustration in red and blue halftone style showing a friendly robot collaborating with three people using laptops and tablets, symbolizing AI-assisted content creation and teamwork." height="357">
  <figcaption>By embedding intelligence directly into the tools where writing happens, organizations unlock unprecedented levels of productivity and creativity.</figcaption>
</figure>
</textarea>

<h3>Body (shares the AI sidebar with the Introduction)</h3>
<textarea id="tinymceai-multi-editor-body">
<h2>The Shift from External Tools to Native Integration</h2>
<p>Many early adopters of AI technology rely on external chat interfaces. While powerful, this "copy-paste" workflow introduces friction and disrupts the creative flow. Native integration&mdash;where the AI exists within the text editor itself&mdash;allows creators to remain focused. Instead of switching tabs to generate a summary or check facts, the AI acts as a collaborative partner that understands the context of the current document.</p>
<h3>Key Benefits of Integrated AI</h3>
<ul>
  <li><strong>Contextual Awareness:</strong> AI can analyze existing text to suggest relevant follow-up points or maintain a consistent brand voice.</li>
  <li><strong>Reduced Cognitive Load:</strong> By automating repetitive tasks like formatting and basic proofreading, writers can focus on high-level strategy and storytelling.</li>
  <li><strong>Streamlined Collaboration:</strong> Integrated tools allow teams to brainstorm and refine ideas within a single shared environment, accelerating the approval process.</li>
  <li><strong>Enhanced Accuracy:</strong> When connected to internal knowledge bases, GenAI can provide fact-checking capabilities that generic models lack.</li>
</ul>
<h2>Evaluating Workflow Improvements</h2>
<p>To understand the impact of GenAI integration, it is helpful to compare traditional workflows against AI-enhanced processes. The following table highlights common content tasks and how native AI transforms the output and efficiency for different stakeholders.</p>
<table style="width: 100%; border-collapse: collapse; margin-top: 20px; margin-bottom: 20px; border: 1px solid rgb(206, 212, 217);" border="1">
  <thead>
    <tr>
      <th style="border-color: #ced4d9; background-color: #ecf0f1; width: 26.6364%;">Workflow Task</th>
      <th style="border-color: #ced4d9; background-color: #ecf0f1; width: 35.8714%;">Traditional Method</th>
      <th style="border-color: #ced4d9; background-color: #ecf0f1; width: 37.4922%;">GenAI-Enhanced Method</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border-color: #ced4d9; width: 26.6364%;"><strong>Drafting</strong></td>
      <td style="border-color: #ced4d9; width: 35.8714%;">Starting from a blank page.</td>
      <td style="border-color: #ced4d9; width: 37.4922%;">AI-generated outlines and initial drafts.</td>
    </tr>
    <tr>
      <td style="border-color: #ced4d9; width: 26.6364%;"><strong>Research</strong></td>
      <td style="border-color: #ced4d9; width: 35.8714%;">Manual searching across multiple tabs.</td>
      <td style="border-color: #ced4d9; width: 37.4922%;">Instant retrieval of internal/external data.</td>
    </tr>
    <tr>
      <td style="border-color: #ced4d9; width: 26.6364%;"><strong>Tone Adjustment</strong></td>
      <td style="border-color: #ced4d9; width: 35.8714%;">Manual rewriting for different audiences.</td>
      <td style="border-color: #ced4d9; width: 37.4922%;">One-click conversion (e.g., Casual to Formal).</td>
    </tr>
    <tr>
      <td style="border-color: #ced4d9; width: 26.6364%;"><strong>Summarization</strong></td>
      <td style="border-color: #ced4d9; width: 35.8714%;">Reading full text and manual condensing.</td>
      <td style="border-color: #ced4d9; width: 37.4922%;">Automated key takeaway generation.</td>
    </tr>
    <tr>
      <td style="border-color: #ced4d9; width: 26.6364%;"><strong>Localization</strong></td>
      <td style="border-color: #ced4d9; width: 35.8714%;">External translation services required.</td>
      <td style="border-color: #ced4d9; width: 37.4922%;">In-editor multilingual support and translation.</td>
    </tr>
  </tbody>
</table>
<h2>Overcoming Adoption Challenges</h2>
<p>While the advantages are clear, implementing GenAI requires a strategic approach. Concerns regarding data privacy, output quality, and the "human touch" are common. <em>To address these, organizations should prioritize tools that offer "human-in-the-loop" functionality</em>. AI should be viewed as an assistant&mdash;a co-pilot that offers suggestions while leaving final editorial control in the hands of the writer.</p>
<p>Furthermore, technical teams must focus on the "integrator" experience. Providing developers with straightforward APIs and pre-built UI components ensures that these advanced features can be deployed quickly <strong>without the risk of building complex AI infrastructure from scratch</strong>. As we look toward the future, the goal is simple: technology that fades into the background, empowering creators to do their best work with less friction.</p>
</textarea>
// 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.'
});
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.

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 value, for example Body context tag 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.

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.

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. For more information about Quick Actions, see Quick 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 value on each editor in the group. Give each editor a unique tinymceai_document_name value, and optionally a tinymceai_document_description value that describes the content to the AI.

Multi-editor mode is supported with the floating sidebar. Set 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:

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 in the initial configuration of each editor.

For information about installing the plugin and enabling AI features, see Plugin Reference.

Multiple groups on one page

A page can contain several independent groups, each with a different 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.

Configuration

For the options that configure multi-editor mode, see Options for multi-editor mode.

  • AI Chat: For interactive discussions with document analysis and context.

  • AI Review: For content quality analysis and improvement suggestions.

  • Quick Actions: For fast, stateless content transformations.