使用包管理器

最后更新：2026-11-04 10:10:15

官方 TinyMCE Blazor 组件将 TinyMCE 集成到 Blazor 应用程序中。本过程创建一个基本的 Blazor 应用程序，并使用 TinyMCE Blazor 集成添加一个 TinyMCE 编辑器。该基本 Blazor 应用程序基于以下教程：Microsoft .NET Blazor 教程 - 构建您的第一个 Blazor 应用。

从以下指南中选择：

使用 Visual Studio Code (VS Code)
使用 Visual Studio
使用命令提示符或终端

使用 Visual Studio Code (VS Code)

先决条件

此过程需要：

或者，可以下载 .NET WinGet 配置文件以安装必要的依赖项。

过程

在 VS Code 中，通过按 Ctrl+Shift+P 打开命令面板。查找 .NET: New Project 并选择它以创建新项目。
从模板列表中选择 Blazor Web App，然后按照步骤设置项目。
使用命令面板，查找并选择 .NuGet: Add NuGet Package。输入 TinyMCE.Blazor，然后选择要安装的包及其版本。
要使用自托管版本的 TinyMCE，请从命令面板安装 TinyMCE 包。
（可选）对于高级插件，安装 tinymce-premium 包：
```
npm install tinymce-premium@^8.3
```
更多信息，请参阅：安装高级插件。

使用 Visual Studio

先决条件

此过程需要：

过程

在 Visual Studio 工具栏上，单击 新建项目 按钮。
选择 Blazor Web App 模板，然后按照步骤设置项目。
使用 NuGet 包管理器控制台安装 TinyMCE.Blazor 包，例如：
```
Install-Package TinyMCE.Blazor
```
使用 NuGet 包管理器控制台安装 TinyMCE 包，例如：
```
Install-Package TinyMCE
```
要测试应用程序，请按 Ctrl+F5 运行应用程序。

使用命令提示符或终端

先决条件

此过程需要：

Microsoft .NET

过程

创建一个新的 Blazor 项目：

dotnet new blazor -o BlazorApp --no-https

进入新应用程序目录：
```
cd BlazorApp
```
安装 TinyMCE Blazor 集成：
```
dotnet add package TinyMCE.Blazor
```
安装 TinyMCE 包，例如：
```
dotnet add package TinyMCE
```
（可选）对于高级插件，安装 tinymce-premium 包：
```
npm install tinymce-premium@^8.3
```
更多信息，请参阅：安装高级插件。
使用 .NET 开发服务器测试应用程序。
- 要启动开发服务器，在项目根目录中运行：
```
dotnet watch run
```
  这将启动一个本地开发服务器，可通过 http://localhost:{PORT} 访问，其中 {PORT} 是在项目的 Properties/launchSettings.json 文件中指定的端口号。
- 要停止开发服务器，请在命令行或命令提示符处选择并按 Ctrl+C。

安装后

通过检查项目文件中的 ItemGroup 引用验证安装。例如，如果项目名称为 BlazorApp，则相关文件为 BlazorApp.csproj，其依赖项引用如下所示：
```
<ItemGroup>
  <PackageReference Include="TinyMCE.Blazor" Version="X.Y.Z" />
</ItemGroup>
```
将 tinymce-blazor.js 脚本添加到主页面。如果使用 Blazor Web App，请在 Components/App.razor 中添加该脚本，例如：
```
<script src="_framework/blazor.web.js"></script>
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
```
脚本的位置取决于 Blazor 应用的类型，包括 Blazor Server 和 Blazor WebAssembly (WASM)，这些在本指南中未涵盖。
- 如果使用 Blazor Server，请在 Pages/_Host.cshtml 中添加脚本，例如：
```
<script src="_framework/blazor.server.js"></script>
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
```
- 如果使用 WASM，请在 wwwroot/index.html 中添加脚本，例如：
```
<script src="_content/TinyMCE.Blazor/tinymce-blazor.js"></script>
<script src="_framework/blazor.webassembly.js"></script>
```
通过以下方式将 Editor 组件添加到页面：
- 使用 using 指令：
```
@using TinyMCE.Blazor
<Editor />
```
  例如：
  文件： Pages/Index.razor
```
@page "/"
@rendermode InteractiveServer
@using TinyMCE.Blazor

<h1>Hello, world!</h1>
<h2>Welcome to your new app.</h2>
<Editor />
```
- 使用带命名空间的组件：
```
<TinyMCE.Blazor.Editor />
```
  例如：
  文件： Pages/Index.razor
```
@page "/"
@rendermode InteractiveServer
@using TinyMCE.Blazor

<h1>Hello, world!</h1>
<h2>Welcome to your new app.</h2>
<Editor />
```
  在 Blazor Web App 中，不同的渲染模式决定了组件如何渲染以及如何处理交互性。要启用 JavaScript 交互性，请确保在页面组件中指定了 @rendermode InteractiveServer。
更新编辑器元素中的 LicenseKey 选项，并包含您的许可证密钥。
```
<Editor LicenseKey="gpl" />
```
要从自托管包加载 TinyMCE 而不是 Tiny Cloud，请配置 ScriptSrc 属性：
```
<Editor
  ScriptSrc="/path/to/tinymce.min.js"
  LicenseKey="gpl"
/>
```
gpl 许可证密钥用于在 GNU General Public License (GPL) 下自托管 TinyMCE。若要使用商业许可证或包含高级插件，请将 gpl 替换为有效的许可证密钥。详细信息，请参阅设置许可证。

后续步骤

有关自定义集成的信息，请参阅：