多编辑器模式

最后更新：2026-11-04 10:10:15

此功能仅适用于 TinyMCE 8.10 及更高版本。

多编辑器模式会将同一页面上的多个 TinyMCE 编辑器归为一组，使其共用一个 Chat 侧边栏和一个 Review 侧边栏。当页面将相关内容拆分到多个编辑器中时，可以使用多编辑器模式，例如一个表单中有单独用于摘要和正文的编辑器，或者一个页面并排编辑多个相关文章的情况。

在组内，Chat、Review 和 Quick Actions 功能可跨所有编辑器的内容运行。TinyMCE AI 插件会根据名称识别每个编辑器的内容，并在对应的编辑器中预览和应用每项更改。

演示

下面的演示将一篇文章拆分到同一组的 Introduction 编辑器和 Body 编辑器中。在任一编辑器中选择聊天图标聊天工具栏按钮，即可打开由第一个编辑器托管的共享 Chat 侧边栏。然后，您可以要求 AI 修改文章的两部分，或对这两个编辑器运行审查。

HTML

<h3>简介（团队中的首个编辑器）</h3>
<textarea id="tinymceai-multi-editor-introduction">
<h1>内容创作的未来：将 GenAI 融入现代工作流</h1>
<p>数字内容创作的格局正在经历一场巨变。多年来，写作、编辑和发布的过程主要依赖人工，每一稿都需要付出大量的认知负荷。然而，生成式人工智能（GenAI）的出现带来了一种新范式。通过将智能直接嵌入到写作发生的工具中，组织可以解锁前所未有的生产力和创造力水平。</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="红色和蓝色半色调风格的复古波普艺术插画，展示了一个友好的机器人与三位使用笔记本电脑和平板电脑的人协作，象征着 AI 辅助内容创作与团队合作。" height="357">
  <figcaption>通过将智能直接嵌入到写作发生的工具中，组织可以解锁前所未有的生产力和创造力水平。</figcaption>
</figure>
</textarea>

<h3>正文（与简介共享 AI 侧边栏）</h3>
<textarea id="tinymceai-multi-editor-body">
<h2>从外部工具到原生集成的转变</h2>
<p>许多早期采用 AI 技术的用户依赖外部聊天界面。虽然功能强大，但这种“复制粘贴”的工作流会带来摩擦并打断创作流程。而原生集成——AI 直接存在于文本编辑器内部——能让创作者保持专注。无需切换标签页来生成摘要或核查事实，AI 充当了一个理解当前文档语境的协作伙伴。</p>
<h3>集成 AI 的主要优势</h3>
<ul>
  <li><strong>语境感知：</strong> AI 可以分析现有文本，建议相关的后续要点或保持品牌语调一致。</li>
  <li><strong>降低认知负荷：</strong> 通过自动化格式调整和基础校对等重复性任务，作者可以专注于高层策略和叙事。</li>
  <li><strong>简化协作：</strong> 集成工具允许团队在单一共享环境中进行头脑风暴并完善想法，加快审批流程。</li>
  <li><strong>提升准确性：</strong> 当连接到内部知识库时，GenAI 可以提供通用模型所缺乏的事实核查功能。</li>
</ul>
<h2>评估工作流的改进</h2>
<p>为了理解 GenAI 集成的影响，对比传统工作流与 AI 增强流程会很有帮助。下表展示了常见的内容任务以及原生 AI 如何为不同利益相关者转变输出和效率。</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%;">工作流任务</th>
      <th style="border-color: #ced4d9; background-color: #ecf0f1; width: 35.8714%;">传统方法</th>
      <th style="border-color: #ced4d9; background-color: #ecf0f1; width: 37.4922%;">GenAI 增强方法</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border-color: #ced4d9; width: 26.6364%;"><strong>起草</strong></td>
      <td style="border-color: #ced4d9; width: 35.8714%;">从空白页开始。</td>
      <td style="border-color: #ced4d9; width: 37.4922%;">AI 生成大纲和初稿。</td>
    </tr>
    <tr>
      <td style="border-color: #ced4d9; width: 26.6364%;"><strong>研究</strong></td>
      <td style="border-color: #ced4d9; width: 35.8714%;">在多个标签页中手动搜索。</td>
      <td style="border-color: #ced4d9; width: 37.4922%;">即时检索内部/外部数据。</td>
    </tr>
    <tr>
      <td style="border-color: #ced4d9; width: 26.6364%;"><strong>语调调整</strong></td>
      <td style="border-color: #ced4d9; width: 35.8714%;">针对不同受众手动重写。</td>
      <td style="border-color: #ced4d9; width: 37.4922%;">一键转换（例如，从随意到正式）。</td>
    </tr>
    <tr>
      <td style="border-color: #ced4d9; width: 26.6364%;"><strong>摘要生成</strong></td>
      <td style="border-color: #ced4d9; width: 35.8714%;">阅读全文并手动精简。</td>
      <td style="border-color: #ced4d9; width: 37.4922%;">自动生成关键要点。
    
    
      本地化
      需要外部翻译服务。
      编辑器内多语言支持和翻译。
    
  

克服采用挑战
虽然优势明显，但实施 GenAI 需要采取策略性方法。关于数据隐私、输出质量和"人性化体验"的担忧很常见。为解决这些问题，组织应优先选择提供"人在回路"功能的工具。AI 应被视为助手——一个提供建议但保留最终编辑控制权给作者的副驾驶。
此外，技术团队必须关注"集成者"体验。为开发人员提供简单的 API 和预构建的 UI 组件，确保这些高级功能能够快速部署，而无需冒险从零开始构建复杂的 AI 基础设施。展望未来，目标很简单：技术融入背景，赋能创作者以更少的摩擦完成最佳工作。

// 以下开源插件仅用于编辑演示 HTML（列表、链接、表格）。重点是 TinyMCE AI 选项。
// 在组内的每个编辑器之间共享一个 TinyMCE AI 配置。
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: '欢迎使用 TinyMCE AI。请在下方选择操作或输入自己的提示。',
  tinymceai_chat_welcome_actions: [
    { text: '以下是一些入门操作：' },
    { title: '总结文档', command: 'TinyMCEAIQuickActionsSummarize' },
    { title: '继续写作', command: 'TinyMCEAIQuickActionContinueWriting' },
    { title: '翻译为西班牙语', command: 'TinyMCEAIQuickActionTranslate', value: 'spanish' },
    { title: '审查我的文档', 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 资源',
    sources: [
      { id: 'docs', label: 'TinyMCE 文档', type: 'web-resource' },
      { id: 'blog', label: 'Tiny 博客', type: 'web-resource' },
      { id: 'survey-2023', label: '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: '挑战',
      prompt: '挑战陈述，验证事实并识别假设'
    }
  ],
  tinymceai_languages: [
    { title: '英语', language: 'english' },
    { title: '中文（简体）', language: 'chinese' },
    { title: '西班牙语', language: 'spanish' },
    { title: '德语', language: 'german' },
    { title: '日语', language: 'japanese' },
    { title: '葡萄牙语', language: 'portuguese' },
    { title: '瑞典语', language: 'swedish' },
    { title: '韩语', language: 'korean' },
    { title: '印地语（天城文）', language: 'hindi devanagari' },
    { title: '意大利语', language: 'italian' },
    { title: '克林贡语', language: 'klingon' },
    { title: '多斯拉克语', language: 'dothraki' },
  ]
};

tinymce.init({
  ...sharedSettings,
  selector: 'textarea#tinymceai-multi-editor-introduction',
  tinymceai_group: 'article',
  tinymceai_document_name: '引言',
  tinymceai_document_description: '文章的引言部分。包含标题、一段简短说明主题的段落，以及一张图。'
});

tinymce.init({
  ...sharedSettings,
  selector: 'textarea#tinymceai-multi-editor-body',
  tinymceai_group: 'article',
  tinymceai_document_name: '正文',
  tinymceai_document_description: '文章的主体部分。使用 h2 和 h3 子标题、简短段落、项目符号列表以及一个比较表格。'
});

当 TinyMCE 在 inline 模式下运行时不支持此功能。它仅在 classic 模式下受支持。有关编辑模式之间差异的更多信息，请参阅内联编辑模式。

分组编辑器如何工作

共享侧边栏

组中创建的第一个编辑器托管共享的聊天侧边栏和评论侧边栏。组中其他每个编辑器的聊天和评论工具栏按钮及菜单项都会打开、关闭并聚焦该共享侧边栏。

聊天

默认情况下，每个聊天提示都包含组中所有编辑器的内容。每个编辑器都会在提示上方显示为一个上下文标签，其标签名为 tinymceai_document_name 的值，例如对于名为 Body 的编辑器，显示为正文上下文标签。

用户可以更改 AI 与哪些编辑器配合工作：

移除上下文标签会使该编辑器的内容不包含在提示中，并且 AI 不会更改该编辑器。
添加上下文来源菜单列出组内的每个编辑器，并可将被移除的编辑器重新添加回来。

消息发送后，该消息中包含的编辑器会保留在对话中，并且其上下文标签在用户开始新对话之前无法被移除。未包含在其中的编辑器仍可在对话的任何时刻从添加上下文来源菜单中添加。

AI 可以更改对话中任何编辑器的内容，插件会在其所属的编辑器中预览并应用每一项更改。若要针对某个编辑器的内容发出请求，可在提示中提及该内容，例如“缩短引言”。有关聊天的更多信息，请参阅聊天。

审阅

审阅会分析组内每个编辑器的内容。审阅侧边栏会将其建议按所属编辑器的名称分组，并显示每组中待处理建议的数量。审阅始终涵盖整个组。有关审阅的更多信息，请参阅审阅。

快速操作

用户可以从组内的任何编辑器运行快速操作。快速操作更改的内容取决于在该编辑器中是否选择了文本：

选择了文本时，快速操作仅更改该编辑器中选择的文本。
未选择文本时，快速操作会更改组内每个编辑器的全部内容，并忽略在其他编辑器中选择的任何文本。例如，在未选择文本的情况下运行翻译会翻译组内的每个编辑器。

聊天操作，如解释、总结和突出关键点，会打开共享的聊天侧边栏并开始一个包含组内每个编辑器的对话，如聊天中所述。有关快速操作的更多信息，请参阅快速操作。

预览并应用更改

当 TinyMCE AI 插件预览来自聊天或快速操作的更改时，每个受影响的编辑器都会显示其自己的预览，并且为只读状态。整个组共享一个更改工具栏：

更改计数器涵盖组内每个编辑器中的更改。
下一个和上一个按钮可在各编辑器之间的更改中进行切换。
在任意编辑器中选择一个更改会将更改工具栏移动到该更改处。
接受或拒绝一个更改会将其应用到持有该更改的编辑器。

丢弃待处理的建议

当组内任何编辑器有待处理的建议时，TinyMCE AI 插件会在丢弃它们并开始不同的 AI 任务之前请求确认。例如，当用户在聊天侧边栏和审阅侧边栏之间切换，或在审阅有待处理建议时运行快速操作，会出现确认对话框。

如果用户确认，插件会丢弃组内每个编辑器中的待处理建议，并将每个编辑器恢复正常编辑状态。如果用户取消，插件会保留所有预览和待处理建议。

集成

要对编辑器进行分组，需在每个编辑器中加载tinymceai插件，并在组内的每个编辑器上设置相同的tinymceai_group值。为每个编辑器赋予唯一的tinymceai_document_name值，还可以选择赋予一个tinymceai_document_description值，该值用于向 AI 描述内容。

多编辑器模式支持浮动侧边栏。将组内每个编辑器的tinymceai_sidebar_type设置为'floating'。

为组内的每个编辑器使用相同的 TinyMCE AI 配置，例如通过在tinymce.init调用之间共享一个设置对象：

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.'
});

分组的编辑器必须在同一页面上，并使用相同的tinymce实例。在每个编辑器的初始配置中设置tinymceai_group。

有关安装插件和启用 AI 功能的信息，请参阅插件参考。

一个页面上的多个组

一个页面可以包含多个独立的组，每个组具有不同的 tinymceai_group 值。每个组都有其共享的侧边栏，一个组中的编辑器不会接收另一个组中编辑器的内容。关于两个组的配置，请参阅双组示例。

配置

有关配置 multi-editor 模式的选项，请参阅多编辑器模式选项。