Angular

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

本节涵盖：

支持的 Angular 版本
使用 NPM 安装 TinyMCE Angular 集成
使用 TinyMCE Angular 集成
配置编辑器
- apiKey
- licenseKey
- cloudChannel
- disabled
- readonly
- id
- init
- initialValue
- inline
- outputFormat
- plugins
- tagName
- toolbar
使用 ngModel 指令
- modelEvents
与响应式表单配合使用
事件绑定
- 支持的浏览器事件
- 支持的 TinyMCE 事件
- allowedEvents
- ignoreEvents
Angular module

支持的 Angular 版本

下表显示了支持的 Angular 版本以及所需的 tinymce-angular 集成包版本。

Angular Version	`tinymce-angular` version
16+	8.x
14 or 15	7.x
13	6.x
9 to 12	4.x
5 to 8	3.x
4 or older	Not Supported

使用 NPM 安装 TinyMCE Angular 集成

安装 tinymce-angular 包并将其保存到 package.json 中。

npm install @tinymce/tinymce-angular

使用 TinyMCE Angular 集成

使用以下命令从 NPM 包导入 EditorModule：

import { EditorModule } from '@tinymce/tinymce-angular';

将 EditorModule 添加到 @NgModule({imports})：

// This might look different depending on how you have set up your app
// but the important part is the imports array
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    EditorModule // <- Important part
  ],
  providers: [],
  bootstrap: [AppComponent]
})

将编辑器添加到 Angular 应用程序模板，例如：
```
<editor apiKey="no-api-key" [init]="{plugins: 'link'}" />
```

配置编辑器

编辑器接受以下属性：

<editor
  apiKey="no-api-key"
  cloudChannel="{productmajorversion}"
  licenseKey="gpl"
  [disabled]="false"
  [readonly]="false"
  id=""
  [init]="{ }"
  initialValue=""
  [inline]="false"
  plugins=""
  tagName="div"
  toolbar=""
/>

tinymce-angular 正常运行不需要任何配置属性。使用 apiKey 指定 Tiny Cloud API 密钥以移除“继续需要使用 TinyMCE 需要有效的 API 密钥。请通知管理员检查当前 API 密钥。点击此处了解更多。”警告消息。

`apiKey`

Tiny Cloud API 密钥。在使用 Tiny Cloud 提供 TinyMCE 编辑器的部署中必需。

要注册 Tiny Cloud API 密钥，请访问 Tiny Account sign-up page。要检索现有 Tiny Account 的 Tiny Cloud API 密钥，请登录并访问 Tiny Account Dashboard。

Type: String

Default value: 'no-api-key'

示例：使用 `apiKey`

<editor apiKey="no-api-key" />

`licenseKey`

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

Type: String

Default value: undefined

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

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

示例：商业许可证

<editor licenseKey="T8LK:..." />

示例：使用 `licenseKey` 配合 GPL

<editor licenseKey="gpl" />

The licenseKey="gpl" property must be set on the <editor> component when using TinyMCE 8 and above.

`cloudChannel`

Type: String

Default value: '8'

Possible values: '8', '8-testing', '8-dev', '8.10'

更改用于编辑器的 TinyMCE 构建版本为以下 Tiny Cloud 通道之一：

8 (Default): TinyMCE 当前的企业发行版。
8-testing: TinyMCE 下一个企业发行版的当前候选版本。
8-dev: TinyMCE 的夜间构建版本。
版本号如 8.10: TinyMCE 特定的企业发行版版本。

例如：

<editor
  apiKey="no-api-key"
  cloudChannel="8-dev"
/>

有关 TinyMCE 开发通道的信息，请参阅：Specifying the TinyMCE editor version deployed from Cloud - dev, testing, and stable releases。

`disabled`

disabled 属性可以动态地在“禁用”（只读）模式（true）和标准可编辑模式（false）之间切换编辑器。

Type: Boolean

Default value: false

Possible values: true, false

示例：使用 `disabled`

<editor [disabled]="true" />

`readonly`

readonly 属性可以动态地在“只读”模式（true）和标准可编辑模式（false）之间切换编辑器。

Type: Boolean

Default value: false

Possible values: true, false

示例：使用 `readonly`

<editor [readonly]="true" />

`id`

编辑器的 ID。用于使用 tinymce.get('ID') 方法检索编辑器实例。

Type: String

Default value: 自动生成 UUID

示例：使用 `id`

<editor id="uuid" />

`init`

发送到 tinymce.init 方法的对象，用于初始化编辑器。

有关 TinyMCE 选择器（tinymce.init）的信息，请参阅：Basic setup。

Type: Object

Default value: { }

示例：使用 `init`

<editor
  [init]="{
    plugins: 'lists link image paste help wordcount',
    toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
  }"
/>

`initialValue`

编辑器初始化时的初始内容。

Type: String

Default value: ' '

示例：使用 `initialValue`

<editor initialValue="Once upon a time..." />

`inline`

用于将编辑器设置为内联模式。使用 <editor [inline]="true" /> 等同于在 TinyMCE 选择器（tinymce.init）中设置 {inline: true}。

有关内联模式的信息，请参阅：用户界面选项 - inline 和设置内联编辑模式。

类型： Boolean

默认值： false

可能值： true, false

示例：使用 `inline`

<editor [inline]="true" />

`plugins`

用于包含编辑器的插件。使用 <editor plugins="lists code" /> 等同于在 TinyMCE 选择器（tinymce.init）中设置 {plugins: 'lists code'}。

有关向 TinyMCE 添加插件的信息，请参阅：向 TinyMCE 添加插件。

类型： String

示例：使用 `plugins`

<editor plugins="lists code" />

`outputFormat`

用于指定当 tinymce-angular 组件与表单或纯数据绑定结合使用时，由该组件发出的内容的格式。

类型： String

默认值： 'html'

可能值： 'html', 'text'

示例：使用 `outputFormat`

<editor outputFormat="text" />

`tagName`

仅在 <editor [inline]="true" /> 时有效。用于定义内联模式下编辑器的 HTML 元素。

类型： String

默认值： 'div'

示例：使用 `tagName`

<editor
  [inline]="true"
  tagName="my-custom-tag"
/>

`toolbar`

用于设置编辑器的工具栏。使用 <editor toolbar="bold italic" /> 等同于在 TinyMCE 选择器（tinymce.init）中设置 {toolbar: 'bold italic'}。

有关设置 TinyMCE 工具栏的信息，请参阅：用户界面选项 - 工具栏。

类型： String

可能值： 请参见 TinyMCE 可用的工具栏按钮。

示例：使用 `toolbar`

<editor
  plugins="code"
  toolbar="bold italic underline code"
/>

使用 `ngModel` 指令

可以添加 ngModel 指令以在表单中使用编辑器：

<editor [(ngModel)]="dataModel" />

有关使用 NgModel 的信息，请参阅：Angular 文档 - NgModel。

`modelEvents`

此属性需要 tinymce-angular 4.0.0 或更高版本

用于指定触发 NgModelChange 发射的事件。

类型： String

默认值： 'change input undo redo'。

可能值： TinyMCE 编辑器事件的空格分隔列表。

示例：使用 `modelEvents`

<editor modelEvents="change input nodechange undo redo" />

与响应式表单配合使用

要将 TinyMCE Angular 组件与响应式表单一起使用：

将 <editor> 配置包含在 formGroup 内。

向编辑器配置添加 formControlName 指令。例如：

<editor [formControlName]="schema.key" [init]="{plugins: 'link'}" />

有关使用响应式表单的信息，请参阅：Angular 文档 - 响应式表单。

事件绑定

可以将函数绑定到编辑器事件，例如：

<editor (onSelectionChange)="handleEvent($event)" />

当调用处理程序时（本例中的 handleEvent），它将接收一个包含两个属性的事件对象：

event - TinyMCE 事件对象。
editor - 对编辑器的引用。

以下事件可用：

支持的浏览器事件

onBeforePaste
onBlur
onClick
onContextMenu
onCompositionEnd
onCompositionStart
onCompositionUpdate
onCopy
onCut
onDblclick
onDrag
onDragDrop
onDragEnd
onDragGesture
onDragOver
onDrop
onFocus
onFocusIn
onFocusOut
onInput
onKeyDown
onKeyPress
onKeyUp
onMouseDown
onMouseEnter
onMouseLeave
onMouseMove
onMouseOut
onMouseOver
onMouseUp
onPaste
onSelectionChange

支持的 TinyMCE 事件

onActivate
onAddUndo
onBeforeAddUndo
onBeforeExecCommand
onBeforeGetContent
onBeforeRenderUI
onBeforeSetContent
onChange
onClearUndos
onDeactivate
onDirty
onExecCommand
onGetContent
onHide
onInit
onInitNgModel
onLoadContent
onNodeChange
onPostProcess
onPostRender
onPreInit
onPreProcess
onProgressState
onRedo
onRemove
onReset
onSaveContent
onSetAttrib
onObjectResizeStart
onObjectResized
onObjectSelected
onSetContent
onShow
onSubmit
onUndo
onVisualAid

默认情况下，所有可用事件都将从编辑器触发到 tinymce-angular 组件。要限制组件中触发的事件，请使用 allowedEvents 和 ignoreEvents 属性。

`allowedEvents`

此属性需要 tinymce-angular 4.2.0 或更高版本

用于提供允许从编辑器触发到 tinymce-angular 组件的有效事件白名单。默认情况下，组件将发射“事件绑定”部分中列出的所有事件。

类型： String

可能值： 逗号分隔的允许事件列表。

示例：使用 `allowedEvents`

<editor allowedEvents="onMouseDown,onKeyDown" />

`ignoreEvents`

此属性需要 tinymce-angular 4.2.0 或更高版本

用于阻止来自 tinymce-angular 组件的特定事件列表。

类型： String

可能值： 逗号分隔的忽略事件列表。

示例：使用 `ignoreEvents`

<editor ignoreEvents="onMouseEnter,onMouseLeave,onMouseOut,onMouseMove" />

Angular

支持的 Angular 版本

使用 NPM 安装 TinyMCE Angular 集成

使用 TinyMCE Angular 集成

配置编辑器

apiKey

示例：使用 apiKey

licenseKey

示例：商业许可证

示例：使用 licenseKey 配合 GPL

cloudChannel

disabled

示例：使用 disabled

readonly

示例：使用 readonly

id

示例：使用 id

init

示例：使用 init

initialValue

示例：使用 initialValue

inline

示例：使用 inline

plugins

示例：使用 plugins

outputFormat

示例：使用 outputFormat

tagName

示例：使用 tagName

toolbar

示例：使用 toolbar

使用 ngModel 指令

modelEvents

示例：使用 modelEvents

与响应式表单配合使用

事件绑定

支持的浏览器事件

支持的 TinyMCE 事件

allowedEvents

示例：使用 allowedEvents

ignoreEvents

示例：使用 ignoreEvents

`apiKey`

示例：使用 `apiKey`

`licenseKey`

示例：使用 `licenseKey` 配合 GPL

`cloudChannel`

`disabled`

示例：使用 `disabled`

`readonly`

示例：使用 `readonly`

`id`

示例：使用 `id`

`init`

示例：使用 `init`

`initialValue`

示例：使用 `initialValue`

`inline`

示例：使用 `inline`

`plugins`

示例：使用 `plugins`

`outputFormat`

示例：使用 `outputFormat`

`tagName`

示例：使用 `tagName`

`toolbar`

示例：使用 `toolbar`

使用 `ngModel` 指令

`modelEvents`

示例：使用 `modelEvents`

`allowedEvents`

示例：使用 `allowedEvents`

`ignoreEvents`

示例：使用 `ignoreEvents`