TinyMCE 8 是一款功能强大且灵活的富文本编辑器，可嵌入到 Web 应用中。本快速入门指南介绍如何使用 Tiny Cloud 将 TinyMCE 编辑器添加到网页中。

若要让 AI 编码代理执行此设置，请参阅 AI 快速入门指南。

添加 TinyMCE 脚本

将以下脚本标签添加到 HTML 文件的 <head> 中。该脚本会从 Tiny Cloud 内容分发网络（CDN）加载 TinyMCE：

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>

添加 API 密钥

脚本 URL 中包含一个 no-api-key 占位符。请将其替换为注册 Tiny Cloud 时创建的 API 密钥。注册后还可试用 高级插件。

在配置有效的 API 密钥之前，编辑器会显示域名注册提示。

初始化编辑器

通过向 tinymce.init() 传递一个 selector 参数，可在网页上的任意元素（或多个元素）上初始化 TinyMCE 8。selector 值可以是任何有效的 CSS 选择器。

plugins 和 toolbar 选项决定了编辑器提供哪些功能。以下示例在标识为 mytextarea 的 textarea 上初始化编辑器，并配置了菜单栏和工具栏，涵盖了最常用的编辑功能：

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script> </head> <body> <textarea id="mytextarea">Hello, World!</textarea> <script> tinymce.init({ selector: '#mytextarea', plugins: [ 'advlist', 'anchor', 'autolink', 'charmap', 'code', 'codesample', 'emoticons', 'fullscreen', 'help', 'image', 'insertdatetime', 'link', 'lists', 'media', 'preview', 'searchreplace', 'table', 'visualblocks', 'wordcount' ], menubar: 'file edit view insert format tools table help', toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | charmap emoticons codesample | code preview fullscreen | removeformat help', height: 500 }); </script> </body></html>

上述插件均已包含在 TinyMCE 中，因此此配置无需额外设置。若要使用极简编辑器，只需传递 selector 并根据需要添加选项。

在 Web 浏览器中打开页面后，将加载 TinyMCE 编辑器：

HTML

<textarea id="cloud-quick-start">
  <h1>Hello, World!</h1>
  <p>This editor was configured with the plugins and toolbar from the quick start guide. Try the formatting controls, insert a <strong>table</strong> or an <strong>image</strong>, or open the code view to inspect the HTML.</p>
  <ul>
  <li>Select text to apply <strong>bold</strong>, <em>italic</em>, or a text color.</li>
  <li>Use the <strong>Insert</strong> menu to add a link, media, or a special character.</li>
  <li>Switch to full screen for a larger editing area.</li>
  </ul>
</textarea>

JS

tinymce.init({
  selector: 'textarea#cloud-quick-start',
  plugins: [
    'advlist', 'anchor', 'autolink', 'charmap', 'code', 'codesample', 'emoticons',
    'fullscreen', 'help', 'image', 'insertdatetime', 'link', 'lists', 'media',
    'preview', 'searchreplace', 'table', 'visualblocks', 'wordcount'
  ],
  menubar: 'file edit view insert format tools table help',
  toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media table | charmap emoticons codesample | code preview fullscreen | removeformat help',
  height: 500
});

上述演示运行的是与示例相同的配置。若要查看启用了所有高级插件的编辑器，请参阅 全功能演示。

批准应用域名

从 localhost 以外的任何源提供服务的应用，需要将其域名添加到与 API 密钥关联的已批准域名列表中。在域名获得批准之前，编辑器会显示提示：“此域名未在 Tiny Cloud 注册。请参阅快速入门指南或创建账户。” 要移除该提示，请在 Tiny Account 中将域名添加到已批准域名列表。

在 localhost 上进行本地开发无需执行此步骤，因此可推迟到应用部署或从自定义主机提供服务时再进行。若提示持续显示，有关诊断步骤，请参阅 域名未注册。

后续步骤

有关以下方面的信息：