使用 NuGet 安装 TinyMCE

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

要将 TinyMCE 添加到 .NET 项目，请在命令行运行以下命令：

  • 使用 NuGet 包管理器控制台，运行以下命令：

    Install-Package TinyMCE

  • 使用 dotnet CLI，运行以下命令：

    dotnet add package TinyMCE

通过以下方式之一，确保包含 tinymce.min.js 文件的 tinymce 目录对目标页面或应用程序可访问：

  • 使用 Web 服务器路由，或

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

包含 TinyMCE 脚本

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

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

在 Web 表单中初始化 TinyMCE

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

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

<!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 快速入门指南</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>');

后续步骤

有关以下方面的信息：