此插件仅适用于付费 TinyMCE 订阅。
当 TinyMCE 以内联模式运行时,不支持此功能。仅支持在经典模式下使用。有关编辑模式之间差异的更多信息,请参阅内联编辑模式。

TinyMCE AI 插件将 AI 辅助创作与富文本编辑集成在一起。用户可以通过操作、审查或对话进行交互,这些交互可以利用来自多个源的相关上下文。

TinyMCE AI 插件需要 TinyMCE 8.4 或更高版本。

交互示例

HTML

<textarea id="tinymceai">
<h1>内容创作的未来:将 GenAI 集成到现代工作流中</h1>
<p>数字内容创作的格局正在经历一场剧变。多年来,写作、编辑和发布的过程在很大程度上仍然是手动的,每一份草稿都需要大量的认知负荷。然而,生成式 AI(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>
<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%;">自动生成关键要点。</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>
  </tbody>
</table>
<h2>克服采用挑战</h2>
<p>虽然优势明显,但实施GenAI需要有策略的方法。关于数据隐私、输出质量和“人性化触感”的担忧很常见。<em>为了解决这些问题,组织应优先考虑提供“人在回路”功能的工具</em>。AI应被视为助手——一个副驾驶,提供建议同时将最终编辑控制权留在作者手中。</p>
<p>此外,技术团队必须关注“集成者”体验。为开发人员提供简单直接的API和预构建的UI组件可确保快速部署这些高级功能<strong>而无需从头构建复杂AI基础设施的风险</strong>。展望 未来,目标很简单:技术隐于背景,赋能创作者以更少的摩擦完成最佳工作。</p>
</textarea>

JS

// 第1步:设置会话 - 这应该是应用程序用户管理流程的一部分。
// 以下开源插件仅用于编辑演示HTML(列表、链接、表格)。TinyMCE AI选项是重点。
tinymce.init({
  selector: 'textarea#tinymceai',
  height: '800px',
  plugins: ['tinymceai', 'advlist', 'lists', 'link', 'autolink', 'table', 'wordcount'],
  toolbar: 'undo redo | tinymceai-chat ai-quickactions-translate tinymceai-review | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link',
  sidebar_show: 'tinymceai-chat',
  tinymceai_chat_welcome_message: '<p>欢迎使用 TinyMCE AI。请在下方选择操作或输入自定义提示。</p>',
  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/tinymceai-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 AI插件可通过Tiny Cloud或自托管TinyMCE编辑器部署:

  • Tiny Cloud:从Tiny Cloud CDN加载插件。

  • 自托管:从TinyMCE 8.7.0版本开始,可通过tinymce-premium NPM包安装插件,或从Tiny账户下载独立插件.zip文件。

tinymceai插件仅作为独立插件分发。它不包含在任何TinyMCE ZIP捆绑包中。

自托管安装步骤请参阅从NPM安装高级插件或使用.zip文件安装TinyMCE。

该插件需要AI服务才能运行。使用托管的Tiny Cloud AI服务,或部署自托管AI服务以保持内容在主机网络内。两种情况下,JWT令牌端点均负责身份验证。

基本设置

要在TinyMCE中设置TinyMCE AI插件:

  • 将tinymceai添加到编辑器配置的plugins选项中;

  • 配置 tinymceai_token_provider 选项以提供身份验证令牌(必须返回 { token: string })。在 Tiny Cloud 试用期间,演示身份服务可提供 JWT,因此无需自定义令牌端点;

  • 当 toolbar 选项被省略或保持默认时,启用插件后 Silver 主题工具栏已包含 AI 工具栏按钮:tinymceai-chat 聊天图标、tinymceai-quickactions 快速操作图标和 tinymceai-review 审阅图标。当设置了自定义 toolbar 字符串时,需将这些按钮 ID 显式添加到字符串中。

在防火墙或正向代理后使用云托管服务时,确保 *.tiny.cloud 已加入允许列表,且必需的 HTTP 头部未被剥离。详情请参阅 防火墙和代理允许列表。

最小化设置

以下配置启用插件和令牌提供程序,并依赖默认工具栏(包含 AI 按钮)。如果 toolbar 选项设置为自定义字符串,请将 tinymceai-chat、tinymceai-quickactions 和 tinymceai-review 添加到该字符串中。

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'tinymceai',
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

完整设置示例

以下示例设置了自定义 toolbar 字符串。若要使用默认工具栏(已包含 AI 按钮),请省略 toolbar 选项。

tinymce.init({
  selector: 'textarea',  // 根据 HTML 更改此值
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  content_id: 'document-123',
  // 身份验证所需
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  },
  tinymceai_default_model: 'agent-1',
  tinymceai_allow_model_selection: true,
  tinymceai_chat_fetch_sources: async () => [
    {
      label: '我的文档',
      sources: [
        { id: 'doc-1', label: '文档 1', type: 'file' },
        { id: 'url-1', label: '网页', type: 'web-resource' }
      ]
    }
  ],
  tinymceai_chat_fetch_source: async (id) => {
    const res = await fetch(`/api/documents/${id}`);
    const blob = await res.blob();
    const filename = `${id}.pdf`;
    return { type: 'file', file: new File([blob], filename, { type: blob.type }) };
  },
  tinymceai_quickactions_custom: [
    { title: '像教五岁小孩一样解释', prompt: '用简单的术语解释以下文本。', type: 'chat' }
  ]
});

选项

以下配置选项影响 TinyMCE AI 插件的行为。

配置选项按其配置的功能分组。General 部分的选项适用于整个插件或多个功能。

常规选项

这些选项适用于整个插件或多个 AI 功能(聊天、快速操作、审阅)。

对于上下文工具栏用例(选中文本时出现的工具栏),请使用 Quick Toolbars 插件,并使用所需控件标识符配置 quickbars_selection_toolbar。

content_id

正在编辑的文档或内容的唯一标识符。设置后,向用户显示的聊天历史将限定在此 ID 范围内,允许跨会话保留对话并将其与特定文档关联。未设置时,无论文档如何,都会显示用户的所有对话。

类型: String

默认值: undefined

示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  content_id: 'document-123',
  // 身份验证所需
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_token_provider

一个函数,返回一个解析为包含 token 属性的对象的 Promise,该属性包含用于 TinyMCE AI 服务身份验证的签名 JWT 令牌。

类型: Function (() => Promise<{ token: string }>)

默认值: 一个以 No token provider configured 错误拒绝的函数,因此在设置此选项前,对 AI 服务的所有请求都会失败。

JWT 负载必须包含以下必需声明:

  • iat:签发时间(由 JWT 库提供)

  • exp:过期时间(令牌不得超过 24 小时;建议 5-15 分钟)

  • aud:TinyMCE API 密钥

  • auth:身份验证对象

  • sub:唯一用户 ID

有关 JWT 设置、必需声明和身份验证对象的更多信息,请参阅 JWT 身份验证。

在 Tiny Cloud 试用期间,可以使用 演示身份服务,这样 tinymceai_token_provider 无需实现自定义令牌端点即可获取 JWT。有关设置和示例,请参阅 JWT 身份验证。

该函数必须在一个具有 token 属性的对象内返回令牌值。请根据响应格式,确保正确处理来自令牌端点的响应:

  • JSON 响应:端点返回 { "token": "eyJ..." }。使用 fetch(url).then(r => r.json())。

  • 纯文本响应:端点返回原始 JWT 字符串。使用 fetch(url).then(r => r.text()).then(token => ({ token }))。

示例:自定义端点的 JSON 响应
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_token_provider: () => {
    return fetch('/api/tinymceai-token').then(r => r.json());
  }
});
示例:自定义端点的纯文本响应
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.text()).then(token => ({ token }));
  }
});

tinymceai_service_url

TinyMCE AI 插件发送请求的 AI 服务的基础 URL。对于 Tiny Cloud AI 服务,该值为 https://tinymceai.api.tiny.cloud。对于 自托管 AI 服务,该值为该服务的基础 URL。仅设置基础 URL:像 /v1/conversations 这样的 API 路径会追加到其后。结尾斜杠可选。

每个 TinyMCE AI 请求,包括聊天、快速操作、审查、聊天历史记录、来源和模型列表请求,都会发送到此 URL,因此 tinymceai_token_provider 返回的 JSON Web Token (JWT) 必须对该地址的服务有效。如果未提供服务 URL,请求将失败并显示错误 No service URL provided in "tinymceai_service_url" option。

类型: String

默认值: 无。TinyMCE AI 插件不设置默认服务 URL。

当未设置该选项时,使用试用(ONLINE+)许可证密钥且 online_license_services_opt_in: true 的自托管编辑器会使用 Tiny Cloud AI 服务 URL https://tinymceai.api.tiny.cloud。编辑器配置中设置的值优先。请参阅 自托管试用。

当使用标准许可证密钥的自托管编辑器连接到 Tiny Cloud AI 服务时,请设置该选项。

示例:连接到 Tiny Cloud AI 服务
tinymce.init({
  selector: 'textarea',  // 根据您的 HTML 更改此值
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_service_url: 'https://tinymceai.api.tiny.cloud',
  // 身份验证所需
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

有关自托管 AI 服务的完整设置,请参阅 本地部署 AI 服务的 TinyMCE 集成。

tinymceai_sidebar_type

控制 AI 侧边栏的显示方式。使用 static 时,侧边栏在编辑器内部渲染。使用 floating 时,侧边栏在编辑器外部的单独容器中渲染,并且可以在页面上拖动。

类型: String

可能的值: 'static'、'floating'

默认值: 'static'

示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_sidebar_type: 'floating',
  // 身份验证所需
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

不支持在编辑器初始化后动态更改此属性,否则可能导致不可预测的行为。

tinymceai_default_model

当用户未明确选择模型时使用的默认 AI 模型。该值是 AI 服务返回的模型 ID,例如 agent-1。有关可用 ID,请参阅 AI 模型。

如果未设置该选项,或者该 ID 不在 AI 服务返回的模型中,则默认使用服务返回的第一个模型。如果未找到该 ID,还会在浏览器控制台中记录警告 Default model provided <id> not found。

类型: String

默认值: undefined

示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_default_model: 'gemini-2-5-flash',
  // 身份验证所需
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_allow_model_selection

用户是否可以从聊天界面选择不同的 AI 模型。

类型:Boolean

可能的值:true,false

默认值:true

示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_allow_model_selection: false,
  // 认证所需
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

聊天选项

这些选项用于配置 AI 聊天侧边栏,用户可在此与 AI 进行互动对话,并添加外部源作为上下文。

tinymceai_chat_fetch_sources

用文件和网络资源子菜单填充源菜单。用户可选择这些源作为聊天对话的额外上下文。该选项还可指定默认源,TinyMCE AI 插件会将这些默认源添加到每个新对话的上下文中。

接收一个返回 Promise 的函数,该 Promise 解析为以下两种结果之一:

  • 源组数组。

  • 一个包含 menu 属性(保存源组数组)和 defaults 属性(保存源标识符数组)的对象。

每个源组包含 label、可选的 icon 和 sources 数组。每个源包含 id、label 和 type('web-resource' 或 'file')。源的 id 用于通过 tinymceai_chat_fetch_source 获取其内容。

两种形式均支持。返回数组时,仅填充源菜单而不指定任何默认源。

defaults 中列出的每个标识符必须与 sources 中列出的源的 id 匹配。插件会将每个匹配的源添加到每个新对话的上下文中,并在源菜单中将其显示为已选中。无匹配源的标识符不会被添加到上下文中,插件会在浏览器控制台记录错误。用户可从对话中移除默认源,并从源菜单中再次添加。

若返回值不符合任一形式,例如缺少 menu、defaults 不是数组,或源无 type,插件将不填充任何源。聊天侧边栏会显示错误“Error adding sources for chat”,插件会在浏览器控制台记录详细信息。空的源组数组是有效的,会使源菜单保持为空。

类型:Function (() => Promise<Array | Object>)

可能的值:对于源的 type 属性:'web-resource','file'

默认值:() => Promise.resolve([])

示例:填充源菜单
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_chat_fetch_sources: async () => [
    {
      label: '我的文档',
      icon: 'folder',
      sources: [
        { id: 'doc-1', label: '文档 1', type: 'file' },
        { id: 'url-1', label: '网页', type: 'web-resource' }
      ]
    }
  ],
  tinymceai_chat_fetch_source: async (id) => {
    const res = await fetch(`/api/documents/${id}`);
    const blob = await res.blob();
    const filename = `${id}.pdf`;
    return { type: 'file', file: new File([blob], filename, { type: blob.type }) };
  },
  // 认证所需
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});
示例:指定默认源
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_chat_fetch_sources: async () => ({
    defaults: [ 'doc-1' ],
    menu: [
      {
        label: '我的文档',
        icon: 'folder',
        sources: [
          { id: 'doc-1', label: '样式指南', type: 'file' },
          { id: 'url-1', label: '网页', type: 'web-resource' }
        ]
      }
    ]
  }),
  tinymceai_chat_fetch_source: async (id) => {
    const res = await fetch(`/api/documents/${id}`);
    const blob = await res.blob();
    const filename = `${id}.pdf`;
    return { type: 'file', file: new File([blob], filename, { type: blob.type }) };
  },
  // 认证所需
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_chat_fetch_source

通过 ID 获取额外源内容的函数。接收源 id,返回解析为源内容的 Promise({ type: 'file', file: File } 或 { type: 'web-resource', url: string })。内容将作为额外上下文传递给 AI 代理用于聊天对话。

类型:Function ((id: string) => Promise<Object>)

可能的值:对于返回对象的 type 属性:'file','web-resource'

默认值:(id) => Promise.resolve(`Should fetch additional source with given ${id}`)

示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_chat_fetch_sources: async () => [
    { label: 'Docs', sources: [{ id: 'doc-1', label: 'Document 1', type: 'file' }] }
  ],
  tinymceai_chat_fetch_source: async (id) => {
    const res = await fetch(`/api/documents/${id}`);
    const blob = await res.blob();
    const filename = `${id}.pdf`;
    return { type: 'file', file: new File([blob], filename, { type: blob.type }) };
  },
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_chat_welcome_message

自定义在开始新对话时显示在聊天侧边栏中的欢迎消息。将此选项设置为空字符串('')可隐藏欢迎消息。

该值可以包含 Markdown 或 HTML 格式。仅保留以下格式元素:段落、标题、加粗、斜体、下划线、链接、有序列表和无序列表、换行、图片、预格式化文本和代码、块引用、表格以及水平线。其他元素和属性、脚本、样式以及事件处理程序属性将被移除。

类型: 字符串

默认值: 一条介绍写作助手及其功能的默认消息。

示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_chat_welcome_message: '<p>欢迎!今天我能为您做些什么?</p>',
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_chat_welcome_actions

在聊天侧边栏的空状态中添加一组建议的欢迎操作,当对话为空时,这些操作显示在 tinymceai_chat_welcome_message 下方。欢迎操作为用户提供一系列起始点,而非空白提示。这些操作仅在首次请求发送之前显示。发送首次请求后它们将被隐藏,并在开始新对话时再次显示。

类型: 数组

默认值: [](无欢迎操作)

数组中的每个项目为以下之一:

  • 字符串,或包含 text 属性的对象({ text: 'string' }),显示为描述性文本。

  • 操作对象,显示为可点击的按钮,具有以下属性:

    • title(字符串):按钮上显示的标签。

    • command(字符串):选中按钮时运行的编辑器命令。该命令运行时不会将焦点移至编辑器,因此编辑器的滚动位置将保持不变。这可以是快速操作或聊天命令、核心 ToggleSidebar 命令,或任何其他已注册的编辑器命令,如 Bold。有关 AI 命令名称,请参阅 TinyMCE AI。

    • value(可选):传递给命令的参数。接受的值与命令相匹配,例如 TinyMCEAIQuickActionTranslate 的语言标签、TinyMCEAIChatPrompt 的 { prompt, displayedPrompt } 对象,或 ToggleSidebar 的侧边栏名称(如 'tinymceai-review')。

    • icon(可选 字符串):按钮上显示的图标名称,使用任何编辑器图标标识符。省略时,将根据命令自动选择一个图标。

文本项和操作按钮可以交错排列,以便在简短标题下对相关操作进行分组。

示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_chat_welcome_actions: [
    { text: '以下是一些开始操作:' },
    { title: '总结文档', command: 'TinyMCEAIQuickActionsSummarize' },
    { title: '继续写作', command: 'TinyMCEAIQuickActionContinueWriting' },
    { title: '翻译成西班牙语', command: 'TinyMCEAIQuickActionTranslate', value: 'spanish' },
    {
      title: '起草回复',
      command: 'TinyMCEAIChatPrompt',
      value: { prompt: '以专业的语气起草一条回复。', displayedPrompt: '起草回复' }
    },
    { title: '审阅我的文档', command: 'ToggleSidebar', value: 'tinymceai-review' },
    { text: '还支持其他编辑器命令:' },
    { title: '加粗', command: 'Bold', icon: 'bold' }
  ],
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_tool_data_callback

自定义在 AI 模型调用模型上下文协议(MCP)工具时显示在聊天侧边栏中的状态消息。该函数在流式响应期间 MCP 服务器发送 mcp-tool-result 或 mcp-tool-notification 事件时运行。该函数返回一个字符串作为状态消息显示,或返回 undefined 以回退到默认状态消息。非字符串的任何值也将回退到默认状态消息。

类型: 函数((event: MCPToolEvent) => string | undefined)

默认值: undefined

该函数接收单个 event 参数,该参数为以下对象之一:

  • 一个 mcp-tool-result 事件,在工具返回结果时发送:

    • type: 'mcp-tool-result'

    • toolName (String): 运行的工具名称。

    • result (String): 工具返回的结果。

    • success (Boolean): 工具调用是否成功。

  • 一个 mcp-tool-notification 事件,在工具报告进度或日志消息时发送:

    • type: 'mcp-tool-notification'

    • toolName (String): 发送通知的工具名称。

    • level (String): 通知的严重级别。可为 'error'、'info'、'debug'、'notice'、'warning'、'critical'、'alert' 或 'emergency'。

    • data: 通知中包含的数据。

常见用法是将每个工具名称映射为人类可读的消息。这些事件中的工具名称以 MCP 服务器名称开头,因此应匹配名称的末尾部分。例如,在 search-knowledge-base 工具返回后,回调可以显示 Knowledge base searched. Writing the reply...。

示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_tool_data_callback: (event) => {
    // Tool names arrive prefixed with the MCP server name, so match the end of the name
    if (event.type === 'mcp-tool-result') {
      // The tool has already returned when this event arrives
      if (event.toolName.endsWith('search-knowledge-base')) {
        return event.success
          ? 'Knowledge base searched. Writing the reply...'
          : 'The knowledge base search failed. Writing the reply...';
      }
      return `Finished ${event.toolName}. Writing the reply...`;
    }
    if (event.type === 'mcp-tool-notification' && event.level === 'info') {
      // A progress message from a tool that is still running
      return `${event.toolName} is working...`;
    }
    // Use the default status message for other events
    return undefined;
  },
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

快速操作选项

这些选项用于配置“快速操作”菜单,该菜单提供一键式 AI 转换功能,例如写作和语法改进、翻译以及语气更改。

tinymceai_quickactions_menu

控制 ID 数组,定义“快速操作”菜单中项的顺序。默认值包括所有默认项,其中包括 ai-quickactions-custom,它添加了由 tinymceai_quickactions_custom 定义的自定义操作的其他子菜单。

类型:Array of String

默认值:

[
  'ai-quickactions-chat-prompts',
  'ai-quickactions-improve-writing',
  'ai-quickactions-continue-writing',
  'ai-quickactions-check-grammar',
  'ai-quickactions-change-length',
  'ai-quickactions-change-tone',
  'ai-quickactions-translate',
  'ai-quickactions-custom'
]
示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_quickactions_menu: [
    'ai-quickactions-improve-writing',
    'ai-quickactions-check-grammar',
    'ai-quickactions-custom'
  ],
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_quickactions_chat_prompts

AI 快速操作菜单中聊天命令子菜单的控制 ID 数组。

类型:Array of String

默认值:['ai-chat-explain', 'ai-chat-summarize', 'ai-chat-highlight-key-points']

示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_quickactions_chat_prompts: [
    'ai-chat-explain',
    'ai-chat-summarize',
    'ai-chat-highlight-key-points'
  ],
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_quickactions_change_tone_menu

AI 快速操作菜单中更改语气子菜单的控制 ID 数组。

类型:Array of String

默认值:

[
  'ai-quickactions-tone-casual',
  'ai-quickactions-tone-direct',
  'ai-quickactions-tone-friendly',
  'ai-quickactions-tone-confident',
  'ai-quickactions-tone-professional'
]
示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_quickactions_change_tone_menu: [
    'ai-quickactions-tone-casual',
    'ai-quickactions-tone-professional'
  ],
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_languages

AI Quick Actions菜单中Translate子菜单的语言选项数组。每个项目包含title(在菜单中显示)和language(发送至API的语言名称或标签,例如'english'、'chinese')。

language字符串作为目标语言描述传递给API。值不限于内置示例:可以使用任何模型能理解的清晰标签(包括非正式或区域性表达)。

类型:Array of Object

默认值:

[
  { 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: 'Korean', language: 'korean' },
  { title: 'Italian', language: 'italian' },
  { title: 'Russian', language: 'russian' }
]
示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_languages: [
    { title: 'English', language: 'english' },
    { title: 'French', language: 'french' },
    { title: 'German', language: 'german' }
  ],
  // 用于身份验证所需
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_quickactions_custom

在AI Quick Actions菜单的Other子菜单中渲染的自定义操作数组。每个项目可以是action类型(带即时预览的快速操作)或chat类型(在聊天中打开)。

  • title:在菜单和聊天历史中显示的文本

  • prompt:发送给AI的提示词

  • type:'action'或'chat'

  • model:仅action类型需要

  • id(可选):自定义操作的稳定标识符。设置后,相同的字符串可列在tinymceai_quickactions_menu中,以便该操作作为独立的顶级菜单项显示,而不仅仅出现在Other子菜单里。该标识符也可用于menu选项或其他接受菜单项标识符的菜单配置中。

类型:Array of Object

可能的值:对于type属性:'action'、'chat'

默认值:[]

标识符ai-quickactions-custom(标签为Other)用于列出自定义操作。只有当数组至少包含一个操作时,它才会作为菜单项和工具栏按钮可用。当数组为空时,它不会出现在Quick Actions菜单或列出它的工具栏中。

示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_quickactions_custom: [
    {
      title: '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: 'gemini-2-5-flash'
    },
    {
      title: 'Summarize in 5 bullet points',
      prompt: 'Summarize the selected text in 5 bullet points.',
      type: 'chat'
    }
  ],
  // 用于身份验证所需
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});
示例:使用id将自定义操作作为顶级Quick Actions菜单项
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_quickactions_menu: [
    'ai-quickactions-chat-prompts',
    'ai-quote',
    'ai-summarize'
  ],
  tinymceai_quickactions_custom: [
    {
      id: 'ai-quote',
      title: '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: 'gemini-2-5-flash'
    },
    {
      id: 'ai-summarize',
      title: 'Summarize in 5 bullet points',
      prompt: 'Summarize the selected text in 5 bullet points.',
      type: 'chat'
    }
  ],
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

Review选项

这些选项用于配置AI Review侧边栏,它提供内容质量分析和改进建议。

tinymceai_reviews

定义哪些Review出现在Review侧边栏及其顺序的数组。仅列出的Review对用户可用。每个项目要么是内置的Review命令ID(字符串),要么是集成方定义的Review(对象)。

类型:Array of String or Object

有效值:

  • 'ai-reviews-proofread':检查语法、拼写和标点

  • 'ai-reviews-improve-clarity':提升逻辑结构与精确性

  • 'ai-reviews-improve-readability':调整句子结构与用词

  • 'ai-reviews-change-length':缩短或延长文本

  • 'ai-reviews-change-tone':修改语气和风格

  • 'ai-reviews-custom':自定义审查 — 接收一个提示和模型,然后运行与其他审查相同的流式预览和应用流程

要从审查侧边栏隐藏自定义审查,只需在数组中省略 'ai-reviews-custom'。

默认值:

[
  'ai-reviews-proofread',
  'ai-reviews-improve-clarity',
  'ai-reviews-improve-readability',
  'ai-reviews-change-length',
  'ai-reviews-change-tone',
  'ai-reviews-custom'
]
示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_reviews: [
    'ai-reviews-proofread',
    'ai-reviews-improve-clarity',
    'ai-reviews-change-tone'
  ],
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

tinymceai_reviews_change_tone_menu

定义在“更改语气”审查中显示哪些语气选项及其顺序的语气 ID 数组。只有列出的语气才会出现在菜单中。

该选项仅在 tinymceai_reviews 选项中包含 'ai-reviews-change-tone' 时适用。

类型: String 类型的 Array

有效值:

  • 'ai-reviews-tone-casual':休闲语气

  • 'ai-reviews-tone-direct':直接语气

  • 'ai-reviews-tone-friendly':友好语气

  • 'ai-reviews-tone-confident':自信语气

  • 'ai-reviews-tone-professional':专业语气

重复的 ID 会被移除,菜单按配置的顺序显示语气。如果该选项包含无效的语气 ID,配置将被拒绝并使用默认语气。空数组([])是被接受的,但 TinyMCE 会在控制台记录一条警告。要完全移除“更改语气”审查,请在 tinymceai_reviews 选项中省略 'ai-reviews-change-tone'。

默认值:

[
  'ai-reviews-tone-casual',
  'ai-reviews-tone-direct',
  'ai-reviews-tone-friendly',
  'ai-reviews-tone-confident',
  'ai-reviews-tone-professional'
]
示例
tinymce.init({
  selector: 'textarea',
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_reviews_change_tone_menu: [
    'ai-reviews-tone-professional',
    'ai-reviews-tone-friendly'
  ],
  // Required for authentication
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});
集成商定义的审查

除了内置的审查命令 ID 外,tinymceai_reviews 选项还接受集成商定义的审查对象。这些对象可以与内置的字符串 ID 交错排列,使集成商能够向审查侧边栏添加命名审查。

每个集成商定义的审查对象都有一个 type,其值为 'simple'、'list' 或 'input',并共享以下属性:

  • type:审查类型。可以是 'simple'、'list' 或 'input' 之一。

  • id:审查的唯一标识符。它不能重复使用内置的审查命令 ID。

  • name:在审查侧边栏中显示的审查名称。

  • description:显示在名称下方的简短描述。

  • prompt:审查运行时发送给模型的提示。

  • model(可选):用于审查的模型。该值必须是已配置的 AI 服务公开的模型 ID(参见 AI Models)。省略时,将使用由 tinymceai_default_model 设置的编辑器默认模型。

list 审查会增加一个 options 数组,input 审查会增加一个可选的 inputPlaceholder:

  • options(仅 list):{ label, value } 对象的数组。选定的 value 会被替换到提示中所有出现 {value} 的地方。

  • inputPlaceholder(input,可选):输入字段的占位符文本。TinyMCE 会将最终用户输入的文本替换到提示中所有出现 {input} 的地方。

如果集成商定义的审查无效,例如,它重复使用了内置的审查命令 ID 或不符合预期的 schema,TinyMCE 会回退到审查侧边栏中的默认审查列表。

以下示例中使用的 model ID(agent-1)用于选择推荐的自动模型。可用的模型 ID 取决于已配置的 AI 服务。有关支持的模型以及如何确认环境中哪些模型可用,请参见 AI Models。
简单的集成商定义审查
tinymceai_reviews: [
  {
    type: 'simple',
    id: 'integrator-simple-review',
    name: 'Simple Integrator Review',
    description: 'This is a simple integrator review',
    prompt: 'Review this document',
    model: 'agent-1'
  }
]
集成器定义的列表审核
tinymceai_reviews: [
  {
    type: 'list',
    id: 'integrator-list-review',
    name: 'Translate Document',
    description: 'Translate the document to a selected language.',
    prompt: 'Translate this document to {value}',
    model: 'agent-1',
    options: [
      { label: 'English', value: 'english' },
      { label: 'Swedish', value: 'swedish' }
    ]
  }
]
集成器定义的输入审核
tinymceai_reviews: [
  {
    type: 'input',
    id: 'integrator-input-review',
    name: 'Custom Instruction',
    description: 'Apply a custom instruction.',
    prompt: 'Apply the following instruction {input}',
    model: 'agent-1',
    inputPlaceholder: 'Enter an instruction here...'
  }
]
内置审核和集成器定义的审核组合
tinymceai_reviews: [
  // 内置审核
  'ai-reviews-proofread',
  'ai-reviews-improve-clarity',
  'ai-reviews-change-tone',
  'ai-reviews-custom',
  // 集成器定义的审核
  {
    type: 'simple',
    id: 'integrator-simple-review',
    name: 'Simple Integrator Review',
    description: 'This is a simple integrator review',
    prompt: 'Review this document',
    model: 'agent-1'
  }
]

多编辑器模式的选项

这些选项将同一页面上的多个编辑器进行分组,使它们共享一个聊天侧边栏和一个审核侧边栏,并且聊天、审核和快速操作功能可以在组内所有编辑器的内容中生效。这些选项还用于向用户和 AI 服务标识每个编辑器的内容。关于分组编辑器工作原理的描述,请参阅 多编辑器模式。

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

tinymceai_group

将编辑器添加到指定名称的组中。同一页面上具有相同 tinymceai_group 值的编辑器共享一个聊天侧边栏和一个审核侧边栏。在组中,聊天、审核和快速操作功能可以在所有编辑器的内容中生效。组中最先创建的编辑器托管共享的侧边栏。

插件仅使用组名来匹配编辑器,从不向用户显示该名称,也不会将其发送到 AI 服务。一个页面可以包含多个独立的组,每个组的名称不同。一个组中的编辑器永远不会接收另一个组的内容。

未设置此选项的编辑器不属于任何组。它有自己的聊天侧边栏和审核侧边栏,并且仅处理自己的内容,即使同一页面上的其他编辑器属于某个组。

有关更多详细信息和实时演示,请参阅 多编辑器模式。

类型: String

默认值: undefined

示例:一个页面上的两个独立组
const sharedSettings = {
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_sidebar_type: 'floating',
  // 认证所需
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.text()).then(token => ({ token }));
  }
};

// 组“article”:引言和正文编辑器共享一个 AI 侧边栏。
tinymce.init({
  ...sharedSettings,
  selector: 'textarea#introduction', // 根据 HTML 更改此值
  tinymceai_group: 'article'
});

tinymce.init({
  ...sharedSettings,
  selector: 'textarea#body', // 根据 HTML 更改此值
  tinymceai_group: 'article'
});

// 组“notes”:一个独立的 AI 侧边栏,永远不会接收“article”组的内容。
tinymce.init({
  ...sharedSettings,
  selector: 'textarea#research-notes', // 根据 HTML 更改此值
  tinymceai_group: 'notes'
});

tinymce.init({
  ...sharedSettings,
  selector: 'textarea#review-notes', // 根据 HTML 更改此值
  tinymceai_group: 'notes'
});

请在编辑器的初始配置中设置此选项。不支持在编辑器初始化后更改此选项。

tinymceai_document_name

编辑器中内容的名称。TinyMCE AI 插件使用此名称来:

  • 在聊天侧边栏中标记编辑器的内容,包括提示中的上下文标签和聊天历史记录。

  • 在审核侧边栏中标记编辑器的建议组。

  • 为插件通过聊天提示发送到 AI 服务的内容命名,以便 AI 可以引用该内容并将其与其他编辑器的内容区分开。

  • 当用户从聊天历史记录恢复对话时,将每个编辑器与其内容匹配。

当未设置此选项时,插件会使用编辑器 ID 作为名称,例如 mce_0 或目标元素的 ID。请为组中的每个编辑器设置一个描述性名称,因为编辑器 ID 无法向用户或 AI 服务标识内容。

插件会去除值的前导和尾随空格。为空或超过 255 个字符的值是无效的。当值无效时,TinyMCE 会在浏览器控制台中记录警告,并且插件会使用编辑器 ID 代替。

类型: String

默认值: undefined

示例
tinymce.init({
  selector: 'textarea', // 根据 HTML 更改此值
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_group: 'report',
  tinymceai_document_name: 'Executive summary',
  // 身份验证所需
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.text()).then(token => ({ token }));
  }
});

为组中的每个编辑器分配唯一的名称,并在每次页面加载时保持名称不变。当用户从聊天历史记录中恢复对话时,插件会通过名称将存储的内容与编辑器匹配。如果组中的两个编辑器使用相同的名称,插件可能会将内容匹配到错误的编辑器。如果名称发生变更,插件将不再将使用先前名称保存的对话与该编辑器匹配。

tinymceai_document_description

编辑器中内容的简短描述,例如其用途、格式、长度限制或目标受众。当用户提交聊天提示时,TinyMCE AI 插件会将该描述与编辑器内容一并发送至 AI 服务。AI 会将该描述作为附加上下文使用,例如保持标题简短或仅对相关内容应用更改。

用户不会看到该描述。

类型: String

默认值: undefined

示例
tinymce.init({
  selector: 'textarea', // 根据 HTML 更改此值
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_group: 'blog-post',
  tinymceai_document_name: 'Blog post body',
  tinymceai_document_description: 'The main body of the blog post. Uses h2 subheadings and short paragraphs.',
  // 身份验证所需
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.text()).then(token => ({ token }));
  }
});

工具栏按钮

TinyMCE AI 插件提供以下工具栏按钮:

工具栏按钮标识符描述

聊天图标 tinymceai-chat

打开用于与 AI 代理对话的 AI 聊天侧边栏。

快速操作图标 tinymceai-quickactions

打开 AI 快速操作菜单(改进写作、修正语法、翻译等类似功能)。

审阅图标 tinymceai-review

打开用于运行内容审阅工作流的 AI 审阅侧边栏。

有关子菜单和单个操作标识符(例如 ai-quickactions-improve-writing、ai-chat-explain),请参阅配置快速操作菜单。

可通过以下方式将这些工具栏按钮添加到编辑器中:

菜单项

TinyMCE AI 插件提供以下菜单项:

菜单项标识符默认菜单位置描述

聊天图标 tinymceai-chat

工具

打开 AI 聊天侧边栏。

快速操作图标 tinymceai-quickactions

工具

打开 AI 快速操作菜单。

审阅图标 tinymceai-review

工具

打开 AI 审阅侧边栏。

有关子菜单和单个菜单项标识符(例如 ai-quickactions-improve-writing、ai-chat-explain),请参阅配置快速操作菜单。

可通过以下方式将这些菜单项添加到编辑器中:

侧边栏

聊天和审阅界面以侧边栏形式打开。从工具栏或菜单中,点击 tinymceai-chat 聊天图标 可打开聊天侧边栏;再次点击则会将其最小化(聊天历史记录会保留)。点击 tinymceai-review 审阅图标 可打开审阅侧边栏。

要以编程方式切换侧边栏,请使用核心 ToggleSidebar 命令:

editor.execCommand('ToggleSidebar', false, 'tinymceai-chat');
editor.execCommand('ToggleSidebar', false, 'tinymceai-review');

键盘快捷键

AI 侧边栏支持以下键盘快捷键:

操作WindowsmacOS

打开或关闭 AI 聊天侧边栏

Ctrl+J

Cmd+J

要在加载时显示聊天侧边栏:

tinymce.init({
  selector: 'textarea',  // 根据 HTML 修改此值
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  sidebar_show: 'tinymceai-chat',
  // 认证所需
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  }
});

命令

TinyMCE AI 插件提供以下 TinyMCE 命令。

切换 AI 聊天和 AI 审阅侧边栏

AI 聊天和 AI 审阅使用插件注册的侧边栏。要通过编程方式显示或隐藏它们,请使用核心 ToggleSidebar 命令(列于Miscellaneous Core Commands表格中),而不是由 tinymceai 插件定义的命令。将侧边栏标识符作为第三个参数传递:

  • 'tinymceai-chat' — AI 聊天

  • 'tinymceai-review' — AI 审阅

示例
// 打开 AI 聊天侧边栏
tinymce.activeEditor.execCommand('ToggleSidebar', false, 'tinymceai-chat');

// 关闭当前侧边栏(再次传递相同 ID 可切换关闭)
tinymce.activeEditor.execCommand('ToggleSidebar', false, 'tinymceai-chat');

// 打开 AI 审阅侧边栏
tinymce.activeEditor.execCommand('ToggleSidebar', false, 'tinymceai-review');
无论 tinymceai_sidebar_type 是'static'还是'floating',这些命令都有效。ToggleSidebar 事件和 queryCommandValue('ToggleSidebar') 对两种侧边栏类型的反应也相同。

TinyMCE AI 插件命令

tinymceai 插件注册了以下编辑器命令。它们与 Quick Actions、Chat 和 Review 用户界面对应:每次调用会立即返回,插件异步执行所有网络和 UI 操作。

命令第三个参数描述

TinyMCEAIQuickActionImproveWriting

运行 改进写作 快速操作。

TinyMCEAIQuickActionContinueWriting

运行 继续写作 快速操作。

TinyMCEAIQuickActionCheckGrammar

运行 修正语法和拼写 快速操作。

TinyMCEAIQuickActionMakeShorter

运行 缩短文本。

TinyMCEAIQuickActionMakeLonger

运行 扩展文本。

TinyMCEAIQuickActionToneCasual

运行 更随意 的语调。

TinyMCEAIQuickActionToneDirect

运行 更直接 的语调。

TinyMCEAIQuickActionToneFriendly

运行 更友好 的语调。

TinyMCEAIQuickActionToneConfident

运行 更自信 的语调。

TinyMCEAIQuickActionToneProfessional

运行 更专业 的语调。

TinyMCEAIQuickActionTranslate

string

运行 翻译,使用指定的语言标签(与 tinymceai_languages 的 language 值属于同一字符串系列)。

TinyMCEAIQuickActionCustom

{ prompt, model }

使用指定的 prompt 和 model 运行自定义快速操作(行为与 tinymceai_quickactions_custom 预览操作相同)。

TinyMCEAIQuickActionsExplain

使用内置的 解释 prompt 打开 Chat。

TinyMCEAIQuickActionsSummarize

使用内置的 总结 prompt 打开 Chat。

TinyMCEAIQuickActionsHighlightKeyPoints

使用内置的 突出关键点 prompt 打开 Chat。

TinyMCEAIChatPrompt

{ prompt, displayedPrompt? }

必要时打开 Chat 侧边栏,然后将 prompt 发送到后端。可选的 displayedPrompt 用于控制在聊天 UI 中显示的标签,当它与发送给模型的文本不同时使用。

TinyMCEAIReviewProofread

运行 校对 审阅。

TinyMCEAIReviewClarity

运行 提高清晰度 审阅。

TinyMCEAIReviewReadability

运行 提高可读性 审阅。

TinyMCEAIReviewMakeLonger

运行 更改长度 审阅,使用 更长 选项。

TinyMCEAIReviewMakeShorter

运行 更改长度 检查,使用 更短 选项。

TinyMCEAIReviewToneCasual

运行 调整语气和风格 检查,使用 随意 语气。

TinyMCEAIReviewToneDirect

运行 调整语气和风格 检查,使用 直接 语气。

TinyMCEAIReviewToneFriendly

运行 调整语气和风格 检查,使用 友好 语气。

TinyMCEAIReviewToneConfident

运行 调整语气和风格 检查,使用 自信 语气。

TinyMCEAIReviewToneProfessional

运行 调整语气和风格 检查,使用 专业 语气。

TinyMCEAIReviewCustom

String、{ prompt, model, name } 或 { id, value }

运行自定义提示词的检查,或按标识符运行集成商定义的检查。有关 TinyMCEAIReviewCustom 的值,请参阅“值”部分。

每个 TinyMCEAIReview… 命令都会打开检查侧边栏并运行检查,结果与在侧边栏中选择该检查相同。在另一个检查进行中时运行检查命令会停止先前的检查并启动请求的检查。

命令名使用 TinyMCEAIQuickActions… 前缀(带 s)来表示 解释、总结 和 突出要点 — 这些映射到聊天提示词子菜单,而不是独立的 TinyMCEAIQuickAction… 拼写。

示例:翻译和自定义快捷操作
tinymce.activeEditor.execCommand('TinyMCEAIQuickActionTranslate', false, 'swedish');

tinymce.activeEditor.execCommand('TinyMCEAIQuickActionCustom', false, {
  prompt: 'Uppercase text',
  model: 'gpt-4.1'
});
示例:带有更短 UI 标签的聊天提示词
tinymce.activeEditor.execCommand('TinyMCEAIChatPrompt', false, {
  prompt: 'Explain the current selection in Klingon',
  displayedPrompt: 'Explain'
});
示例:运行内置检查
tinymce.activeEditor.execCommand('TinyMCEAIReviewProofread');

tinymce.activeEditor.execCommand('TinyMCEAIReviewToneProfessional');

值:TinyMCEAIReviewCustom

TinyMCEAIReviewCustom 命令接受三种形式的第三个参数。

String:在检查侧边栏中选择的模型上,运行基于该提示词的检查,标题为 自定义检查:

tinymce.activeEditor.execCommand('TinyMCEAIReviewCustom', false, 'Check for passive voice');

具有 prompt 属性的对象:运行基于自定义提示词的检查:

  • prompt (String):发送到模型的提示词。此属性是必需的。

  • model(可选 String):运行检查的模型。省略时,检查在检查侧边栏中选择的模型上运行,该模型最初是 tinymceai_default_model 设置的默认模型。有关可用模型标识符,请参阅 AI 模型。

  • name(可选 String):检查上方显示的标题。省略时,标题为 自定义检查。

tinymce.activeEditor.execCommand('TinyMCEAIReviewCustom', false, {
  prompt: 'Check the document for passive voice',
  model: 'agent-1',
  name: 'Passive voice'
});

具有 id 属性的对象:运行在 tinymceai_reviews 中配置的集成商定义的检查:

  • id (String):集成商定义的检查的 id。此属性是必需的。

  • value(可选 String):传递给检查的值。simple 检查不接收值。对于 list 检查,值必须匹配检查的 options 值之一;省略时使用第一个选项。对于 input 检查,值是替换到提示词中的文本,且该值是必需的。

tinymce.activeEditor.execCommand('TinyMCEAIReviewCustom', false, {
  id: 'integrator-list-review',
  value: 'swedish'
});

当值不匹配这些形式时,TinyMCE 会向浏览器控制台记录错误且不运行检查。这也适用于提示词或标识符为空、没有集成商定义的检查匹配标识符、list 检查的值不是其选项之一以及 input 检查在没有值的情况下运行时。

检测插件写入的内容

当 TinyMCE AI 插件将 AI 更改写入编辑器时,它会在核心 BeforeSetContent 和 SetContent 事件上将 ai 属性设置为 true。事件处理程序可以检查此属性以区分 AI 更改和其他内容更改。

其他高级插件可以使用此属性:

tinymce.init({
  selector: 'textarea',  // 请根据 HTML 更改此值
  plugins: 'tinymceai',
  toolbar: 'tinymceai-chat tinymceai-quickactions tinymceai-review',
  tinymceai_token_provider: () => {
    return fetch('/api/token').then(r => r.json());
  },
  setup: (editor) => {
    editor.on('SetContent', (e) => {
      if (e.ai === true) {
        console.log('The AI changes are now part of the editor content.');
      }
    });
  }
});