使用 TinyMCE AI 将实时 AI 写作辅助集成到您的应用中,通过 TinyMCE 插件即可获得即用型编辑器功能,通过 API 还能实现自定义功能——甚至在编辑器之外也能使用。加快内容创建速度并增强编辑工作流程,适用于从提高生产力、校对到内容质量和一致性等多种用例。所有功能均可使用您选择的 LLM——包括您自己的 LLM。

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

【格式参考】
输入:Click the save button.
输出:点击 save 按钮。

请严格按此格式翻译上述文档,只输出结果:
d style="border-color: #ced4d9; width: 35.8714%;">需要外部翻译服务。 <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

TinyMCE AI是一个AI驱动的写作助手平台,包含两个核心组件:

  • TinyMCE AI插件:将AI直接集成到TinyMCE中,根据组织风格指南提供即时文本改写、摘要、纠正和上下文聊天帮助。包含自动化审阅工具和企业级功能,无需自定义基础设施即可与现有系统集成。插件适用于Tiny Cloud和自托管TinyMCE;从TinyMCE 8.7.0版本起,可通过tinymce-premium NPM包或插件.zip安装。

  • TinyMCE AI API:一个先进的后端AI引擎,整合多个模型并提供高质量内容。插件中的所有功能在API中均可使用,且功能更丰富,API可用于应用程序的任何位置——不仅限于TinyMCE。托管AI服务目前仅在Cloud环境中可用。API也可通过自托管的本地部署服务使用。

这些组件使团队能够快速实施完整的AI写作工具套件,提供高效的内容工作流,保持品牌一致性并与文档管理系统无缝集成。此外,插件和API使用相同的授权机制并共享对话历史,便于与应用程序更广泛的内容创作工作流集成——不仅限于TinyMCE内部。

这两个组件均支持多种AI模型,能够在您的应用所需的模型间实现统一的界面与API。如需了解详细信息,请参阅AI Models文档。

TinyMCE AI功能特性

TinyMCE AI具有三项主要功能:

  • 聊天:支持历史记录和持久上下文的交互式AI对话。

  • 审阅:面向长篇幅内容的优化分析与校对功能。

  • 操作:针对特定任务的快速无状态操作。

付费计划的现有客户可通过客户门户申请全功能免费试用。

集成方式

TinyMCE AI可通过两种方式集成到应用中:插件(用于开箱即用的编辑器功能)或AI服务API(用于自定义集成)。详见集成方式文档。

权限控制

开发人员可根据用户角色、订阅层级和组织需求,控制对AI功能、模型和能力的访问权限。了解更多关于权限系统的信息。

隐私与数据处理

区域化数据存储

Tiny为TinyMCE AI存储的所有数据均在美国区域进行处理。

发送至LLM提供商进行处理的数据目前在美国区域进行处理。TinyMCE不提供可选的独立LLM处理区域。

数据保留策略

对话数据在12个月不活动后将自动删除,包括:

  • 所有对话消息和历史记录,

  • 附件、文件和网络资源,

  • 对话元数据和设置。

安全性

所有数据均采用端到端加密,在传输和静态存储时均被加密。对话和附件存储在安全云基础设施中,具有细粒度访问控制和全面的权限系统。

本地部署

本地部署允许AI服务在组织基础设施内运行,使团队能够更掌控数据和基础设施。架构、前提条件和部署指南请参阅TinyMCE AI本地部署文档。

后续步骤

  • 插件参考:安装tinymceai插件,配置身份验证,启用聊天、审阅和快速操作功能。

  • JWT身份验证:为托管的TinyMCE AI服务签发令牌。

  • AI模型:查看支持的模型、兼容版本和限制。

  • API概述:从编辑器外的应用程序代码调用REST API。

  • API快速入门:获取API凭据并连接到服务。

  • 集成方式:比较插件优先和API优先的集成路径。