使用 Composer 包管理器安装 TinyMCE

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

要在 PHP 项目中使用 Composer 添加 TinyMCE，请在命令行中运行以下命令：

composer require tinymce/tinymce

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

  • 使用 Web 服务器路由，或

  • 使用构建工具将 tinymce 目录复制到公共文件夹。

包含 TinyMCE 脚本

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

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

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

通过向 tinymce.init() 传递包含 selector 值的对象，在网页上的任何元素（或多个元素）上初始化 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 for open source, T8LK:... for commercial }); </script> </head> <body> <h1>TinyMCE Quick Start Guide</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'
});

保存编辑器中的内容

要检索编辑器中的内容，可以使用表单处理程序处理内容，或使用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>');

后续步骤

有关以下内容的信息：