使用NPM或Yarn安装TinyMCE

TinyMCE 8是一款强大而灵活的富文本编辑器，可嵌入Web应用程序。本快速入门指南涵盖如何使用NPM或Yarn将TinyMCE编辑器添加到网页。

前置条件

此过程需要安装 Node.js (以及npm)。确保您有一个包含 package.json 文件的项目目录。如果尚未创建项目，请在项目目录中运行 npm init 或 yarn init 进行初始化。

安装TinyMCE

要将TinyMCE添加到您的项目，请导航至项目目录并运行以下任一命令：

  • NPM：

    npm install tinymce@^8

  • Yarn：

    yarn add tinymce@^8

TinyMCE主脚本的位置将是：node_modules/tinymce/tinymce.min.js。确保包含 tinymce.min.js 文件的 tinymce 目录对目标页面或应用程序可访问，可以通过以下方式：

  • 使用web服务器路由，或

  • 使用构建工具（如Gulp或Webpack）将 tinymce 目录复制到公共文件夹。

安装高级插件

tinymce-premium NPM包为商业版TinyMCE客户提供所有高级插件、皮肤、主题、图标和语言包。

tinymce-premium 包需要商业许可证。使用高级插件前请确保您拥有有效的许可证密钥。有关获取许可证密钥的信息，请参阅：许可证密钥。

前置条件

安装高级插件前，请确保您已：

  • 安装核心 tinymce 包（见上文）

  • 拥有有效的许可证密钥

  • 已安装Node.js和npm

安装高级插件包

使用npm安装 tinymce-premium 包：

npm install tinymce-premium@^8.3

tinymce-premium 包适用于TinyMCE 8.3及以上版本，目前仅发布到NPM注册表。包版本必须与 tinymce 包版本对齐—始终使用两个包的兼容版本（例如，两者均为8.3.0或更高版本）。

包内容

tinymce-premium 包包含：

  • 所有高级插件

  • 许可证密钥管理器插件

  • 高级皮肤、图标和语言包

词典不包含在 tinymce-premium 包中，需单独下载。

使用高级插件

安装 tinymce-premium 包后，请在编辑器中配置插件。有关打包高级插件或使用 external_plugins 选项的完整说明，请参阅：使用高级插件。

框架集成

有关特定框架的集成指南，请参阅：

包含TinyMCE脚本

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

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

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

通过向 tinymce.init() 传递一个包含 selector 值的对象，初始化网页上的任何元素（或多个元素）。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文件并在Web浏览器中打开，将加载TinyMCE编辑器，例如：

HTML

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

JS

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

保存编辑器中的内容

要从编辑器获取内容，可以通过 form handler 处理内容，或者使用 getContent API。

如果您使用 form handler，一旦 <form> 提交，TinyMCE 8 将像普通的 HTML <textarea> 一样 POST 内容，包括编辑器内容的 HTML 元素和内联 CSS。主机的 form handler 可以像处理来自常规 <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>');

后续步骤

有关以下方面的信息：