Blazor

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

本节涵盖：

配置 TinyMCE Blazor 集成
组件绑定

配置 TinyMCE Blazor 集成

TinyMCE.Blazor Editor 组件接受以下属性：

<Editor
  Id="uuid"
  Inline=false
  CloudChannel="8"
  Value=""
  Disable=false
  JsConfSrc="path_to_jsObj"
  Conf="@yourConf"
  ApiKey="no-api-key"
  LicenseKey="gpl"
  ScriptSrc="/path/to/tinymce.min.js"
  ClassName="tinymce-wrapper"
/>

TinyMCE Blazor 集成工作并不需要任何配置属性。

`ApiKey`

Tiny Cloud API 密钥。对于使用 Tiny Cloud 提供 TinyMCE 编辑器的部署，此属性是必需的。

类型： String

默认值： 'no-api-key'

ApiKey 使用示例

<Editor
  ApiKey="no-api-key"
/>

`CloudChannel`

指定要使用的 Tiny Cloud 通道。有关 TinyMCE 开发通道的信息，请参阅：指定从 Cloud 部署的 TinyMCE 编辑器版本。

类型： String

默认值： '8'

可能值： '8', '8-testing', '8-dev', '8.10'

CloudChannel 使用示例

<Editor
  CloudChannel="8-dev"
/>

`Id`

为编辑器指定一个 ID。用于使用 tinymce.get('ID') 方法检索编辑器实例。

类型： String

默认值： 自动生成的 UUID

Id 使用示例

<Editor
  Id="my-unique-identifier"
/>

`ClassName`

指定组件中 Editor 容器 div 的类。该 div 是 Editor 的父元素，向其添加样式不会将样式添加到编辑器本身。

类型： String

默认值： 'tinymce-wrapper'

ClassName 使用示例

设置静态类名：

<Editor ClassName="my-editor-container" />

设置动态类名：

<Editor ClassName="@((isEditorActive) ? "active-editor-div" : "default-editor-div")" />

`Inline`

将编辑器设置为内联模式。

类型： Boolean

默认值： false

Inline 使用示例

<Editor
  Inline=true
/>

`Disable`

将编辑器设置为禁用状态。

类型： Boolean

默认值： false

Disable 使用示例

<Editor
  Disable=@disable
/>
<button @onclick="@(() => disable = !disable)">切换</button>

`Readonly`

将编辑器设置为只读模式。

类型： Boolean

默认值： false

Readonly 使用示例

<Editor
  Readonly=@readonly
/>
<button @onclick="@(() => readonly = !readonly)">切换</button>

`JsConfSrc`

通过指定相对于 window 对象的对象路径，使用 JS 对象作为编辑器的基础配置。

类型： String

默认值： null

JsConfSrc 使用示例

在您的 _Host.cshtml 中：

window.sample = {
  height: 300,
  toolbar: 'undo redo | bold italic'
}

在您的组件中：

<Editor
  JsConfSrc="sample"
/>

`LicenseKey`

指定 TinyMCE 许可证密钥。对于 TinyMCE 的自托管部署，此属性是必需的。对于仅使用 Tiny Cloud 的云部署，此属性不是必需的，因为您的云订阅已自动包含商业许可证。更多信息，请参阅：许可证密钥。

类型： String

默认值： undefined

可能值：* undefined - 当使用 API 密钥从 Tiny Cloud 加载时使用* 'gpl' - 用于使用 GPL 许可证的开源项目* 'T8LK:…' - 用于商业 TinyMCE 安装（版本 8+ 必须使用此前缀）* 'GPL+T8LK:' - 用于需要高级功能同时保持 GPL 合规性的开源项目。

在混合部署（同时使用云和自托管功能）中：
您可以同时提供 API 密钥和许可证密钥
编辑器将在可用时使用云服务
如果无法联系云服务，它将自动回退到本地许可证密钥

示例：商业许可证（TinyMCE 8+）

<Editor
  LicenseKey="T8LK:..."
/>

当您拥有 TinyMCE 8 或更高版本的商业许可证时，请使用此示例。必须使用 T8LK 前缀。

示例：开源 GPL 许可证

<Editor
  LicenseKey="gpl"
/>

当您在自托管环境中使用开源 GPL 许可证使用 TinyMCE 时，请使用此示例。

`ScriptSrc`

使用 ScriptSrc 属性指定 TinyMCE 的位置，以便在应用程序未使用 Tiny Cloud 时进行延迟加载。如果应用程序使用自托管版本的 TinyMCE（例如 TinyMCE NuGet 包或 TinyMCE 的 .zip 包），则此设置是必需的。

类型： String

ScriptSrc 使用示例

<Editor
  ScriptSrc="/path/to/tinymce.min.js"
/>

`Conf`

指定一组属性供 Tinymce.init 方法初始化编辑器使用。

类型： Dictionary<string, object>

默认值： null

Conf 使用示例

<Editor
  Conf="@editorConf"
/>

@code {
  private Dictionary<string, object> editorConf = new Dictionary<string, object>{
    {"toolbar", "undo redo | bold italic"},
    {"width", 400}
  };
}

组件绑定

输入绑定

编辑器组件允许开发者将编辑器的内容绑定到变量。通过指定 @bind-Value 指令，开发者可以在选定的变量上创建双向绑定。

输入绑定使用示例

<Editor
  @bind-Value=content
/>

<textarea @bind=content @bind:event="oninput"></textarea>

@code {
  private string content = "<p>Hello world</p>";
}

绑定文本输出

从 TinyMCE.Blazor v0.0.4 开始，编辑器公开了 @bind-Text 属性，开发者可以将其 bind 以获取编辑器内容的文本形式的只读值。如果 text 绑定的变量发生变化，更改不会传播到编辑器。它只会将编辑器的更改传播出去。

输出文本绑定使用示例

<Editor
  @bind-Text=content
/>

<textarea @bind=content @bind:event="oninput"></textarea>

@code {
  private string content = "";
}