Blazor

最后更新：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，然后选择要安装的包及其版本。

使用 Visual Studio

先决条件

本过程需要：

过程

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

使用命令提示符或终端

先决条件

本过程需要：

Microsoft .NET

过程

创建新的 Blazor 项目：

dotnet new blazor -o BlazorApp --no-https

进入新的应用程序目录：
```
cd BlazorApp
```
安装 TinyMCE Blazor 集成：
```
dotnet add package TinyMCE.Blazor
```
使用 .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。
更新编辑器元素中的 ApiKey 选项，并包含您的 Tiny Cloud API 密钥。
```
<Editor ApiKey="no-api-key" />
```

后续步骤

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