快速入门指南

使用 .zip 包安装 TinyMCE

TinyMCE 8 是一个强大且灵活的富文本编辑器，可嵌入 Web 应用程序中。本快速入门指南介绍如何使用 TinyMCE .zip 包将 TinyMCE 编辑器添加到网页中。

从 .zip 压缩包部署 TinyMCE

1. 下载 TinyMCE。

   • 对于 Self-hosted Enterprise 客户，请访问 Tiny - 自托管版本

   • 对于自托管的 TinyMCE 社区版，请访问 Tiny 账户 - 下载

2. 将压缩包解压到 Web 服务器的公共文件夹中，例如：

   unzip tinymce_latest.zip -d /path/to/webserver/public/

   主要的 TinyMCE 脚本的位置为：/path/to/webserver/public/tinymce/js/tinymce/tinymce.min.js。

对于使用高级插件的商业客户，您可以安装 tinymce-premium NPM 包，并使用 external_plugins 选项配置高级插件。如需更多信息，请参阅：external_plugins 配置选项 和 从 NPM 安装高级插件。

包含 TinyMCE 脚本

在 HTML 页面的 <head> 中包含以下代码行：

<script src="/path/or/uri/to/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>

将 TinyMCE 初始化为 Web 表单的一部分

通过将包含 selector 值的对象传递给 tinymce.init()，在网页上的任何元素（或多个元素）上初始化 TinyMCE 8。selector 值可以是任何有效的 CSS 选择器。

例如，要将 <textarea id="mytextarea"> 替换为 TinyMCE 8 编辑器实例，请将选择器 '#mytextarea' 传递给 tinymce.init()：

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="/path/or/uri/to/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script> <script> tinymce.init({ selector: '#mytextarea', license_key: 'gpl' // gpl 用于开源，T8LK:... 用于商业用途 }); </script> </head> <body> <h1>TinyMCE 快速入门指南</h1> <form method="post"> <textarea id="mytextarea">Hello, World!</textarea> </form> </body></html>

将此内容添加到 HTML 文件并在浏览器中打开，将加载 TinyMCE 编辑器，例如：

HTML

<textarea id="default">Hello, World!</textarea>

JS

tinymce.init({
  selector: 'textarea#default'
});

保存编辑器中的内容

要从编辑器中检索内容，可以使用表单处理程序处理内容，或使用 getContent API。

如果您使用表单处理程序，一旦提交 <form>，TinyMCE 8 将以与普通 HTML <textarea> 相同的方式 POST 内容，包括编辑器内容的 HTML 元素和内联 CSS。主机的表单处理程序可以像处理常规 <textarea> 的内容一样处理提交的内容。

以编程方式获取和设置内容

使用 getContent 和 setContent API 从 JavaScript 中读取和写入编辑器内容。

示例：以 HTML 形式检索编辑器内容

const editor = tinymce.activeEditor;
const html = editor.getContent();
console.log(html);

若要以纯文本而非 HTML 形式检索内容：

const editor = tinymce.activeEditor;
const text = editor.getContent({ format: 'text' });
console.log(text);

示例：设置编辑器内容

const editor = tinymce.activeEditor;
editor.setContent('<p>New content</p>');

后续步骤

有关以下方面的信息：

• 设置许可证，请参阅：设置许可证。

• 自定义 TinyMCE，请参阅：基本设置。

• 三种编辑器模式，请参阅：

  • TinyMCE 经典编辑模式。

  • TinyMCE 内联编辑模式。

  • TinyMCE 无干扰编辑模式。

• 添加 TinyMCE 插件，请参阅：使用插件扩展 TinyMCE。

• 本地化 TinyMCE 编辑器，请参阅：本地化 TinyMCE。