CKEditor 5 在 Angular 中基于 CDN 的集成指南从安装、组件 API 到表单与样式实战【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5CKEditor 5 官方提供了 Angular 组件ckeditor/ckeditor5-angular通过 CDN 分发方式即可在 Angular 应用中快速接入富文本编辑器无需将庞大的编辑器代码打包进应用 bundle。本文以当前仓库的 Angular CDN 集成文档 为骨架结合仓库源码与相关文档完整讲解安装步骤、loadCKEditorCloud资源加载、ckeditor组件的全部Input/Output属性、ngModel双向绑定、样式定制、文档/内联编辑器等实战场景帮助你掌握在 Angular含 standalone 与 NGModule 组件中配置经典、内联、气泡和文档decoupled编辑器的方法。快速开始准备 Angular 项目本指南假设你已经拥有一个 Angular 项目。如果没有可以通过 Angular CLI 创建。创建好项目后先安装 CKEditor 5 的官方 Angular 组件npm install ckeditor/ckeditor5-angular由于 Angular 是 TypeScript 优先的环境你还需要为 CKEditor 导入 TypeScript 类型。根据你所使用的插件与功能可能需要安装以下开源与付费premium包npm install --save-dev ckeditor5 # Open-source plugin types. npm install --save-dev ckeditor5-premium-features # Premium features plugin types.注意这里的ckeditor5与ckeditor5-premium-features仅用于提供类型定义编辑器本身的运行时代码仍然通过 CDN 加载不会被打包进应用。使用loadCKEditorCloud加载 CDN 资源CDN 方案的核心是loadCKEditorCloud辅助函数。在 Angular 的ngOnInit生命周期钩子中调用它传入配置中的version即可加载编辑器代码与插件。若要使用付费插件则将premium设置为true并在配置中提供你的 license key。// app.component.ts import { Component } from angular/core; import { CommonModule } from angular/common; import { CKEditorModule, loadCKEditorCloud, CKEditorCloudResult } from ckeditor/ckeditor5-angular; import type { ClassicEditor, EditorConfig } from https://cdn.ckeditor.com/typings/ckeditor5.d.ts; Component( { selector: app-root, templateUrl: ./app.component.html, styleUrls: [./app.component.css], imports: [ CommonModule, CKEditorModule ], standalone: true } ) export class AppComponent { public Editor: typeof ClassicEditor | null null; public config: EditorConfig | null null; public ngOnInit(): void { loadCKEditorCloud( { version: 47.0.0, premium: true } ).then( this._setupEditor.bind( this ) ); } private _setupEditor ( cloud: CKEditorCloudResult{ version: 47.0.0, premium: true } ) { const { ClassicEditor, Essentials, Paragraph, Bold, Italic } cloud.CKEditor; const { FormatPainter } cloud.CKEditorPremiumFeatures; this.Editor ClassicEditor; this.config { licenseKey: YOUR_LICENSE_KEY, plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ], toolbar: [ undo, redo, |, bold, italic, |, formatPainter ] }; } }关于类型来源需要特别说明示例中的EditorConfig类型从https://cdn.ckeditor.com/typings/ckeditor5.d.ts导入但这并不是一个真实可访问的 URL而是一个合成 TypeScript 模块为编辑器提供类型定义。真正的类型由ckeditor5或ckeditor5-premium-features包提供且依赖ckeditor/ckeditor5-angular包。因此务必保留--save-dev安装的这两个类型包。最后在模板中使用ckeditor标签渲染富文本编辑器无论插件配置如何用法都是一致的!-- app.component.html -- ckeditor *ngIf( Editor config ) datapHello, world!/p [editor]Editor [config]config /ckeditorloadCKEditorCloud的完整选项loadCKEditorCloud以及 React、Vue 集成中对应的useCKEditorCloud包装函数接受以下选项详见 Loading CDN resourcesversion必填——要加载的 CKEditor 5以及启用premium时的付费插件版本号translations可选——需要加载的语言代码数组premium可选——布尔值是否加载付费插件ckbox可选——CKBox 集成加载配置plugins可选——额外插件加载配置键为全局插件名值为插件配置injectedHtmlElementsAttributes可选——注入到页面script和link标签上的属性对象可用于添加integrity、crossorigin等属性默认值为{ crossorigin: anonymous }。其中使用premium、ckbox、plugins选项会产生额外的 JS 与 CSS 网络请求只有在确需时才应启用。函数返回的 Promise 解析后的对象形如const { CKEditor, CKEditorPremiumFeatures } await loadCKEditorCloud( { version: 47.0.0, premium: true } );返回对象中的CKEditor是 CKEditor 5 基础库CKEditorPremiumFeatures仅在premium: true时存在CKBox与自定义插件键仅在对应选项提供时出现。支持的Input属性CKEditor 5 Angular 组件支持以下Input属性editor必填提供静态create()方法的编辑器类用于创建编辑器实例。相关生命周期细节可参见 编辑器生命周期ckeditor [editor]Editor/ckeditorconfig编辑器的配置对象其结构对应仓库中 editorconfig.ts 里定义的EditorConfig接口ckeditor [config]{ toolbar: [ heading, |, bold, italic ] }/ckeditordata编辑器的初始数据。既可以是静态值ckeditor datapHello, world!/p/ckeditor也可以是父组件共享的属性Component( { // ... } ) export class MyComponent { public editorData; private _setupEditor( cloud ) { this.editorData pHello, world!/p; } // ... }ckeditor [data]editorData/ckeditortagName编辑器所挂载的 HTML 元素标签名默认为divckeditor tagNametextarea/ckeditor警告tagName输入已被弃用推荐改用config.root.element或config.roots.main.element。新的配置项允许你自定义可编辑元素的标签名、类、内联样式和 HTML 属性详见下文使用内联编辑器一节。disabled控制编辑器的只读状态对应Editor#isReadOnly状态Component( { // ... } ) export class MyComponent { public isDisabled; // ... private _setupEditor( cloud ) { this.isDisabled false; } toggleDisabled() { this.isDisabled !this.isDisabled; } }ckeditor [disabled]isDisabled/ckeditor button (click)toggleDisabled() {{ isDisabled ? Enable editor : Disable editor }} /buttonwatchdog一个ContextWatchdog类实例负责为多个编辑器实例共享同一个 context并在崩溃时重启整个结构。仓库源码定义于 contextwatchdog.tsContextWatchdog类import { loadCKEditorCloud } from ckeditor/ckeditor5-angular; Component( { // ... } ) export class MyComponent { public editor; public watchdog: any; public ready; ngOnInit() { loadCKEditorCloud( { version: 47.0.0, } ).then( this._setupEditor.bind( this ) ); } private _setupEditor( cloud ) { const { ClassicEditor, ContextWatchdog, Context } cloud.CKEditor; const contextConfig { // Your context configuration. }; this.Editor ClassicEditor; this.ready false; this.watchdog new ContextWatchdog( Context ); this.watchdog.create( contextConfig ) .then( () { this.ready true; } ); } }div *ngIfready ckeditor [watchdog]watchdog/ckeditor ckeditor [watchdog]watchdog/ckeditor ckeditor [watchdog]watchdog/ckeditor /diveditorWatchdogConfig若未使用watchdog属性组件默认使用EditorWatchdog见 editorwatchdog.ts。editorWatchdogConfig允许传入该 watchdog 的配置其中crashNumberLimit等配置项定义于 watchdog.ts默认值为3Component( { // ... } ) export class MyComponent { public myWatchdogConfig; private _setupEditor( cloud ) { this.myWatchdogConfig { crashNumberLimit: 5, // ... }; } // ... }ckeditor [editorWatchdogConfig]myWatchdogConfig/ckeditordisableTwoWayDataBinding允许禁用双向数据绑定机制默认值为false。此选项的引入是为了解决大文档中的性能问题默认情况下使用ngModel时每当编辑器数据变化组件都必须在编辑器实例与绑定属性之间同步数据这会调用editor.getData()函数在大文档中打字时造成明显卡顿。开启此选项后可以禁用默认行为仅在需要时按需调用editor.getData()从而避免性能下降。支持的Output属性CKEditor 5 Angular 组件支持以下Output事件ready编辑器就绪时触发对应editor#ready事件事件载荷为编辑器实例。需要注意该方法可能被多次调用初次初始化时会触发每次崩溃恢复后重新初始化时也会触发。每次重新初始化都是一次完整的编辑器重启在基于用量计费usage-based billing场景下会计为一次新的编辑器加载。不要在内部保存编辑器实例的引用因为重启后引用会变化应改用watchdog.editor属性。change编辑器内容变化时触发对应editor.model.document#change:data事件事件载荷为包含编辑器与change:data事件对象的对象ckeditor [editor]Editor (change)onChange($event)/ckeditorimport { ClassicEditor } from ckeditor5; import { ChangeEvent } from ckeditor/ckeditor5-angular/ckeditor.component; Component( { // ... } ) export class MyComponent { public Editor; private _setupEditor( cloud ) { const { ClassicEditor } cloud.CKEditor; this.Editor ClassicEditor; } public onChange( { editor }: ChangeEvent ) { const data editor.getData(); console.log( data ); } // ... }blur编辑视图失焦时触发对应editor.editing.view.document#blur事件事件载荷包含编辑器与blur事件数据。focus编辑视图获得焦点时触发对应editor.editing.view.document#focus事件事件载荷包含编辑器与focus事件数据。error编辑器崩溃时触发。崩溃后内部 watchdog 机制会重启编辑器并触发ready事件。在 ckeditor5-angularv7.0.1之前编辑器初始化过程中的崩溃不会触发此事件。与ngModel集成组件实现了 Angular 的ControlValueAccessor接口可与ngModel配合使用。先在组件中创建共享模型Component( { // ... } ) export class MyComponent { public model; private _setupEditor( cloud ) { this.model { editorData: pHello, world!/p }; } // ... }然后在模板中使用模型启用双向数据绑定ckeditor [(ngModel)]model.editorData [editor]Editor/ckeditor样式定制CKEditor 5 Angular 组件既可通过组件样式表也可通过全局样式表进行样式定制。下面以设置组件高度为例演示两种方式。通过组件样式表设置高度先在父组件目录下创建 (S)CSS 文件并用:host与::ng-deep伪选择器前缀修饰对应编辑部件/* src/app/app.component.css */ :host ::ng-deep .ck-editor__editable_inline { min-height: 500px; }然后在父组件中添加该样式表的相对路径/* src/app/app.component.ts */ Component( { // ... styleUrls: [ ./app.component.css ] } )通过全局样式表设置高度先创建全局样式表/* src/styles.css */ .ck-editor__editable_inline { min-height: 500px; }再将其加入angular.json配置architect: { build: { options: { styles: [ { input: src/styles.css } ] } } }设置占位符要在主可编辑元素中显示占位符可在组件配置中设置root.placeholder字段。占位符功能本身不需要单独安装插件详见 编辑器占位符Component( { // ... } ) export class MyComponent { public config; private _setupEditor( cloud ) { // ... this.config { root: { placeholder: Type the content here! } } } }访问编辑器实例组件已覆盖大多数使用场景当你需要访问完整的 CKEditor 5 API 时可通过以下步骤获取编辑器实例。先创建一个指向ckeditor组件的模板引用变量#editorckeditor #editor [editor]Editor/ckeditor再使用ViewChild( editor )装饰的属性获取组件并在需要时访问编辑器实例Component() export class MyComponent { ViewChild( editor ) editorComponent: CKEditorComponent; public getEditor() { // Warning: This may return undefined if the editor is hidden behind the *ngIf directive or // if the editor is not fully initialised yet. return this.editorComponent.editorInstance; } }编辑器的创建是异步的因此在创建完成前editorInstance不可用。若想对刚创建的编辑器进行修改更好的方式是在ready事件中获取 CKEditor 5 实例。常见场景实践使用文档decoupled编辑器类型使用文档decoupled编辑器时需要手动将工具栏添加到 DOM// app.component.ts import { Component } from angular/core; import { CommonModule } from angular/common; import { CKEditorCloudResult, CKEditorModule, loadCKEditorCloud } from ckeditor/ckeditor5-angular; import { DecoupledEditor, EditorConfig } from https://cdn.ckeditor.com/typings/ckeditor5.d.ts; Component( { selector: app-root, templateUrl: ./app.component.html, styleUrls: [ ./app.component.css ], imports: [ CommonModule, CKEditorModule ], standalone: true } ) export class AppComponent { title angular; public Editor: typeof DecoupledEditor | null null; public config: EditorConfig | null null; public ngOnInit(): void { loadCKEditorCloud( { version: 47.0.0 } ).then( this._setupEditor.bind( this ) ); } private _setupEditor( cloud: CKEditorCloudResult{ version: 47.0.0} ) { const { DecoupledEditor, Essentials, Paragraph, Bold, Italic } cloud.CKEditor; this.Editor DecoupledEditor; this.config { licenseKey: YOUR_LICENSE_KEY, plugins: [ Essentials, Paragraph, Bold, Italic ], toolbar: [ undo, redo, |, bold, italic ] }; } public onReady( editor: DecoupledEditor ) { const element editor.ui.getEditableElement()!; const parent element.parentElement!; parent.insertBefore( editor.ui.view.toolbar.element!, element ); } }然后在模板中关联该方法!-- app.component.html -- ckeditor *ngIf(Editor config) datapHello, world!/p [editor]Editor [config]config (ready)onReady($event) /ckeditor使用内联编辑器单根编辑器如InlineEditor、BalloonEditor与DecoupledEditor可配置为仅接受内联内容文本、加粗、斜体、链接的内联编辑器适用于标题、题注或单行输入等短字段场景。设置root.modelElement为$inlineRoot即可将根限制为内联内容。可选地提供自定义root.element将可编辑宿主渲染为特定标签例如标题使用h1替代默认的div// app.component.ts import { Component } from angular/core; import { CommonModule } from angular/common; import { CKEditorCloudResult, CKEditorModule, loadCKEditorCloud } from ckeditor/ckeditor5-angular; import { BalloonEditor, EditorConfig } from https://cdn.ckeditor.com/typings/ckeditor5.d.ts; Component( { selector: app-root, templateUrl: ./app.component.html, imports: [ CommonModule, CKEditorModule ], standalone: true } ) export class AppComponent { public Editor: typeof BalloonEditor | null null; public config: EditorConfig | null null; public ngOnInit(): void { loadCKEditorCloud( { version: 47.0.0 } ).then( this._setupEditor.bind( this ) ); } private _setupEditor( cloud: CKEditorCloudResult{ version: 47.0.0 } ) { const { BalloonEditor, Essentials, Bold, Italic } cloud.CKEditor; this.Editor BalloonEditor; this.config { licenseKey: YOUR_LICENSE_KEY, plugins: [ Essentials, Bold, Italic ], toolbar: [ bold, italic ], root: { element: h1, modelElement: $inlineRoot, initialData: Document title, placeholder: Enter title... } }; } }!-- app.component.html -- ckeditor *ngIf(Editor config) [editor]Editor [config]config /ckeditorroot.element属性接受两种形式对应 editorconfig.ts 中ViewRootElementDefinition接口标签名字符串例如h1或section包含name、classes、styles与attributes字段的描述对象。classes可为字符串或字符串数组styles与attributes为字符串到字符串的记录。若只设置标签而不设置modelElement: $inlineRoot则仅宿主标签改变根内模式仍允许块级内容。重要对于ClassicEditorckeditor组件始终渲染div宿主无论root.element设置为何值。经典编辑器会将工具栏与可编辑区域包装在自己的结构中。如需控制宿主元素请使用InlineEditor、BalloonEditor或DecoupledEditor。使用协作插件仓库项目本身定位为带模块化架构的现代富文本编辑器框架支持协作编辑等特性。官方提供了 Angular 应用中集成交互式协作编辑的开箱即用示例real-time collaboration for Angular虽然不是必须基于这些示例构建应用但它们能帮助你快速上手。协作类付费特性需配合premium: true与 license key 使用。本地化CKEditor 5 支持多种 UI 语言官方 Angular 组件同样支持。要翻译编辑器将所需语言传入loadCKEditorCloud函数配置中的translations数组import { Component } from angular/core; import { CommonModule } from angular/common; import { CKEditorModule, loadCKEditorCloud, CKEditorCloudResult } from ckeditor/ckeditor5-angular; import { ClassicEditor, EditorConfig } from https://cdn.ckeditor.com/typings/ckeditor5.d.ts; Component( { selector: app-root, templateUrl: ./app.component.html, styleUrls: [./app.component.css], imports: [ CommonModule, CKEditorModule ], standalone: true } ) export class AppComponent { public Editor: typeof ClassicEditor | null null; public config: EditorConfig | null null; public ngOnInit(): void { loadCKEditorCloud( { version: 47.0.0, translations: [ es ] } ).then( this._setupEditor.bind( this ) ); } private _setupEditor ( cloud: CKEditorCloudResult{ version: 47.0.0} ) { const { ClassicEditor, Paragraph, Essentials, Bold, Italic } cloud.CKEditor; this.Editor ClassicEditor; this.config { licenseKey: YOUR_LICENSE_KEY, plugins: [ Essentials, Bold, Italic, Paragraph ], toolbar: [ undo, redo, |, bold, italic ] }; } }UI 语言的更多配置方式可参见 UI 语言指南。支持的 Angular 版本自ckeditor/ckeditor5-angular6.0.0 起可直接使用 CKEditor 5 提供的原生类型定义。由于 Angular 库输出格式存在破坏性变更该包按以下版本对应关系发布以支持不同 Angular 生态CKEditor 5 Angular 组件版本Angular 版本详情当前维护版本^1119需要 CKEditor 5 47 或更高版本。历史版本不再维护^1016需要 CKEditor 5 46 或更高版本。^916迁移到 TypeScript 5声明文件不向后兼容。需要 CKEditor 5 43 或更高版本。^813需要 CKEditor 5 42 或更高版本。^713peer 依赖发生变化。需要 CKEditor 5 37 或更高版本。^613需要 CKEditor 5 37 或更高版本。^513需要 Angular 13 或更高版本。^49.1需要 CKEditor 5 34 或更高版本。^39.1需要 Node.js 14 或更高版本。^29.1迁移到 TypeScript 4声明文件不向后兼容。^15.x – 8.xAngular 版本已不再维护。所有可用的 Angular 版本都可以从 npm 拉取。从 npm 安装迁移到 CDN 的详细步骤可参考 Angular 迁移到 CDN 指南。下一步学习如何读取与设置编辑器数据获取与设置数据参考 配置区 中的更多指南进一步定制编辑器查看 功能分类 了解各个特性的详细用法。【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 CKEditor 5 在 Angular 中基于 CDN 的集成指南：从安装、组件 API 到表单与样式实战
CKEditor 5 在 Angular 中基于 CDN 的集成指南从安装、组件 API 到表单与样式实战【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5CKEditor 5 官方提供了 Angular 组件ckeditor/ckeditor5-angular通过 CDN 分发方式即可在 Angular 应用中快速接入富文本编辑器无需将庞大的编辑器代码打包进应用 bundle。本文以当前仓库的 Angular CDN 集成文档 为骨架结合仓库源码与相关文档完整讲解安装步骤、loadCKEditorCloud资源加载、ckeditor组件的全部Input/Output属性、ngModel双向绑定、样式定制、文档/内联编辑器等实战场景帮助你掌握在 Angular含 standalone 与 NGModule 组件中配置经典、内联、气泡和文档decoupled编辑器的方法。快速开始准备 Angular 项目本指南假设你已经拥有一个 Angular 项目。如果没有可以通过 Angular CLI 创建。创建好项目后先安装 CKEditor 5 的官方 Angular 组件npm install ckeditor/ckeditor5-angular由于 Angular 是 TypeScript 优先的环境你还需要为 CKEditor 导入 TypeScript 类型。根据你所使用的插件与功能可能需要安装以下开源与付费premium包npm install --save-dev ckeditor5 # Open-source plugin types. npm install --save-dev ckeditor5-premium-features # Premium features plugin types.注意这里的ckeditor5与ckeditor5-premium-features仅用于提供类型定义编辑器本身的运行时代码仍然通过 CDN 加载不会被打包进应用。使用loadCKEditorCloud加载 CDN 资源CDN 方案的核心是loadCKEditorCloud辅助函数。在 Angular 的ngOnInit生命周期钩子中调用它传入配置中的version即可加载编辑器代码与插件。若要使用付费插件则将premium设置为true并在配置中提供你的 license key。// app.component.ts import { Component } from angular/core; import { CommonModule } from angular/common; import { CKEditorModule, loadCKEditorCloud, CKEditorCloudResult } from ckeditor/ckeditor5-angular; import type { ClassicEditor, EditorConfig } from https://cdn.ckeditor.com/typings/ckeditor5.d.ts; Component( { selector: app-root, templateUrl: ./app.component.html, styleUrls: [./app.component.css], imports: [ CommonModule, CKEditorModule ], standalone: true } ) export class AppComponent { public Editor: typeof ClassicEditor | null null; public config: EditorConfig | null null; public ngOnInit(): void { loadCKEditorCloud( { version: 47.0.0, premium: true } ).then( this._setupEditor.bind( this ) ); } private _setupEditor ( cloud: CKEditorCloudResult{ version: 47.0.0, premium: true } ) { const { ClassicEditor, Essentials, Paragraph, Bold, Italic } cloud.CKEditor; const { FormatPainter } cloud.CKEditorPremiumFeatures; this.Editor ClassicEditor; this.config { licenseKey: YOUR_LICENSE_KEY, plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ], toolbar: [ undo, redo, |, bold, italic, |, formatPainter ] }; } }关于类型来源需要特别说明示例中的EditorConfig类型从https://cdn.ckeditor.com/typings/ckeditor5.d.ts导入但这并不是一个真实可访问的 URL而是一个合成 TypeScript 模块为编辑器提供类型定义。真正的类型由ckeditor5或ckeditor5-premium-features包提供且依赖ckeditor/ckeditor5-angular包。因此务必保留--save-dev安装的这两个类型包。最后在模板中使用ckeditor标签渲染富文本编辑器无论插件配置如何用法都是一致的!-- app.component.html -- ckeditor *ngIf( Editor config ) datapHello, world!/p [editor]Editor [config]config /ckeditorloadCKEditorCloud的完整选项loadCKEditorCloud以及 React、Vue 集成中对应的useCKEditorCloud包装函数接受以下选项详见 Loading CDN resourcesversion必填——要加载的 CKEditor 5以及启用premium时的付费插件版本号translations可选——需要加载的语言代码数组premium可选——布尔值是否加载付费插件ckbox可选——CKBox 集成加载配置plugins可选——额外插件加载配置键为全局插件名值为插件配置injectedHtmlElementsAttributes可选——注入到页面script和link标签上的属性对象可用于添加integrity、crossorigin等属性默认值为{ crossorigin: anonymous }。其中使用premium、ckbox、plugins选项会产生额外的 JS 与 CSS 网络请求只有在确需时才应启用。函数返回的 Promise 解析后的对象形如const { CKEditor, CKEditorPremiumFeatures } await loadCKEditorCloud( { version: 47.0.0, premium: true } );返回对象中的CKEditor是 CKEditor 5 基础库CKEditorPremiumFeatures仅在premium: true时存在CKBox与自定义插件键仅在对应选项提供时出现。支持的Input属性CKEditor 5 Angular 组件支持以下Input属性editor必填提供静态create()方法的编辑器类用于创建编辑器实例。相关生命周期细节可参见 编辑器生命周期ckeditor [editor]Editor/ckeditorconfig编辑器的配置对象其结构对应仓库中 editorconfig.ts 里定义的EditorConfig接口ckeditor [config]{ toolbar: [ heading, |, bold, italic ] }/ckeditordata编辑器的初始数据。既可以是静态值ckeditor datapHello, world!/p/ckeditor也可以是父组件共享的属性Component( { // ... } ) export class MyComponent { public editorData; private _setupEditor( cloud ) { this.editorData pHello, world!/p; } // ... }ckeditor [data]editorData/ckeditortagName编辑器所挂载的 HTML 元素标签名默认为divckeditor tagNametextarea/ckeditor警告tagName输入已被弃用推荐改用config.root.element或config.roots.main.element。新的配置项允许你自定义可编辑元素的标签名、类、内联样式和 HTML 属性详见下文使用内联编辑器一节。disabled控制编辑器的只读状态对应Editor#isReadOnly状态Component( { // ... } ) export class MyComponent { public isDisabled; // ... private _setupEditor( cloud ) { this.isDisabled false; } toggleDisabled() { this.isDisabled !this.isDisabled; } }ckeditor [disabled]isDisabled/ckeditor button (click)toggleDisabled() {{ isDisabled ? Enable editor : Disable editor }} /buttonwatchdog一个ContextWatchdog类实例负责为多个编辑器实例共享同一个 context并在崩溃时重启整个结构。仓库源码定义于 contextwatchdog.tsContextWatchdog类import { loadCKEditorCloud } from ckeditor/ckeditor5-angular; Component( { // ... } ) export class MyComponent { public editor; public watchdog: any; public ready; ngOnInit() { loadCKEditorCloud( { version: 47.0.0, } ).then( this._setupEditor.bind( this ) ); } private _setupEditor( cloud ) { const { ClassicEditor, ContextWatchdog, Context } cloud.CKEditor; const contextConfig { // Your context configuration. }; this.Editor ClassicEditor; this.ready false; this.watchdog new ContextWatchdog( Context ); this.watchdog.create( contextConfig ) .then( () { this.ready true; } ); } }div *ngIfready ckeditor [watchdog]watchdog/ckeditor ckeditor [watchdog]watchdog/ckeditor ckeditor [watchdog]watchdog/ckeditor /diveditorWatchdogConfig若未使用watchdog属性组件默认使用EditorWatchdog见 editorwatchdog.ts。editorWatchdogConfig允许传入该 watchdog 的配置其中crashNumberLimit等配置项定义于 watchdog.ts默认值为3Component( { // ... } ) export class MyComponent { public myWatchdogConfig; private _setupEditor( cloud ) { this.myWatchdogConfig { crashNumberLimit: 5, // ... }; } // ... }ckeditor [editorWatchdogConfig]myWatchdogConfig/ckeditordisableTwoWayDataBinding允许禁用双向数据绑定机制默认值为false。此选项的引入是为了解决大文档中的性能问题默认情况下使用ngModel时每当编辑器数据变化组件都必须在编辑器实例与绑定属性之间同步数据这会调用editor.getData()函数在大文档中打字时造成明显卡顿。开启此选项后可以禁用默认行为仅在需要时按需调用editor.getData()从而避免性能下降。支持的Output属性CKEditor 5 Angular 组件支持以下Output事件ready编辑器就绪时触发对应editor#ready事件事件载荷为编辑器实例。需要注意该方法可能被多次调用初次初始化时会触发每次崩溃恢复后重新初始化时也会触发。每次重新初始化都是一次完整的编辑器重启在基于用量计费usage-based billing场景下会计为一次新的编辑器加载。不要在内部保存编辑器实例的引用因为重启后引用会变化应改用watchdog.editor属性。change编辑器内容变化时触发对应editor.model.document#change:data事件事件载荷为包含编辑器与change:data事件对象的对象ckeditor [editor]Editor (change)onChange($event)/ckeditorimport { ClassicEditor } from ckeditor5; import { ChangeEvent } from ckeditor/ckeditor5-angular/ckeditor.component; Component( { // ... } ) export class MyComponent { public Editor; private _setupEditor( cloud ) { const { ClassicEditor } cloud.CKEditor; this.Editor ClassicEditor; } public onChange( { editor }: ChangeEvent ) { const data editor.getData(); console.log( data ); } // ... }blur编辑视图失焦时触发对应editor.editing.view.document#blur事件事件载荷包含编辑器与blur事件数据。focus编辑视图获得焦点时触发对应editor.editing.view.document#focus事件事件载荷包含编辑器与focus事件数据。error编辑器崩溃时触发。崩溃后内部 watchdog 机制会重启编辑器并触发ready事件。在 ckeditor5-angularv7.0.1之前编辑器初始化过程中的崩溃不会触发此事件。与ngModel集成组件实现了 Angular 的ControlValueAccessor接口可与ngModel配合使用。先在组件中创建共享模型Component( { // ... } ) export class MyComponent { public model; private _setupEditor( cloud ) { this.model { editorData: pHello, world!/p }; } // ... }然后在模板中使用模型启用双向数据绑定ckeditor [(ngModel)]model.editorData [editor]Editor/ckeditor样式定制CKEditor 5 Angular 组件既可通过组件样式表也可通过全局样式表进行样式定制。下面以设置组件高度为例演示两种方式。通过组件样式表设置高度先在父组件目录下创建 (S)CSS 文件并用:host与::ng-deep伪选择器前缀修饰对应编辑部件/* src/app/app.component.css */ :host ::ng-deep .ck-editor__editable_inline { min-height: 500px; }然后在父组件中添加该样式表的相对路径/* src/app/app.component.ts */ Component( { // ... styleUrls: [ ./app.component.css ] } )通过全局样式表设置高度先创建全局样式表/* src/styles.css */ .ck-editor__editable_inline { min-height: 500px; }再将其加入angular.json配置architect: { build: { options: { styles: [ { input: src/styles.css } ] } } }设置占位符要在主可编辑元素中显示占位符可在组件配置中设置root.placeholder字段。占位符功能本身不需要单独安装插件详见 编辑器占位符Component( { // ... } ) export class MyComponent { public config; private _setupEditor( cloud ) { // ... this.config { root: { placeholder: Type the content here! } } } }访问编辑器实例组件已覆盖大多数使用场景当你需要访问完整的 CKEditor 5 API 时可通过以下步骤获取编辑器实例。先创建一个指向ckeditor组件的模板引用变量#editorckeditor #editor [editor]Editor/ckeditor再使用ViewChild( editor )装饰的属性获取组件并在需要时访问编辑器实例Component() export class MyComponent { ViewChild( editor ) editorComponent: CKEditorComponent; public getEditor() { // Warning: This may return undefined if the editor is hidden behind the *ngIf directive or // if the editor is not fully initialised yet. return this.editorComponent.editorInstance; } }编辑器的创建是异步的因此在创建完成前editorInstance不可用。若想对刚创建的编辑器进行修改更好的方式是在ready事件中获取 CKEditor 5 实例。常见场景实践使用文档decoupled编辑器类型使用文档decoupled编辑器时需要手动将工具栏添加到 DOM// app.component.ts import { Component } from angular/core; import { CommonModule } from angular/common; import { CKEditorCloudResult, CKEditorModule, loadCKEditorCloud } from ckeditor/ckeditor5-angular; import { DecoupledEditor, EditorConfig } from https://cdn.ckeditor.com/typings/ckeditor5.d.ts; Component( { selector: app-root, templateUrl: ./app.component.html, styleUrls: [ ./app.component.css ], imports: [ CommonModule, CKEditorModule ], standalone: true } ) export class AppComponent { title angular; public Editor: typeof DecoupledEditor | null null; public config: EditorConfig | null null; public ngOnInit(): void { loadCKEditorCloud( { version: 47.0.0 } ).then( this._setupEditor.bind( this ) ); } private _setupEditor( cloud: CKEditorCloudResult{ version: 47.0.0} ) { const { DecoupledEditor, Essentials, Paragraph, Bold, Italic } cloud.CKEditor; this.Editor DecoupledEditor; this.config { licenseKey: YOUR_LICENSE_KEY, plugins: [ Essentials, Paragraph, Bold, Italic ], toolbar: [ undo, redo, |, bold, italic ] }; } public onReady( editor: DecoupledEditor ) { const element editor.ui.getEditableElement()!; const parent element.parentElement!; parent.insertBefore( editor.ui.view.toolbar.element!, element ); } }然后在模板中关联该方法!-- app.component.html -- ckeditor *ngIf(Editor config) datapHello, world!/p [editor]Editor [config]config (ready)onReady($event) /ckeditor使用内联编辑器单根编辑器如InlineEditor、BalloonEditor与DecoupledEditor可配置为仅接受内联内容文本、加粗、斜体、链接的内联编辑器适用于标题、题注或单行输入等短字段场景。设置root.modelElement为$inlineRoot即可将根限制为内联内容。可选地提供自定义root.element将可编辑宿主渲染为特定标签例如标题使用h1替代默认的div// app.component.ts import { Component } from angular/core; import { CommonModule } from angular/common; import { CKEditorCloudResult, CKEditorModule, loadCKEditorCloud } from ckeditor/ckeditor5-angular; import { BalloonEditor, EditorConfig } from https://cdn.ckeditor.com/typings/ckeditor5.d.ts; Component( { selector: app-root, templateUrl: ./app.component.html, imports: [ CommonModule, CKEditorModule ], standalone: true } ) export class AppComponent { public Editor: typeof BalloonEditor | null null; public config: EditorConfig | null null; public ngOnInit(): void { loadCKEditorCloud( { version: 47.0.0 } ).then( this._setupEditor.bind( this ) ); } private _setupEditor( cloud: CKEditorCloudResult{ version: 47.0.0 } ) { const { BalloonEditor, Essentials, Bold, Italic } cloud.CKEditor; this.Editor BalloonEditor; this.config { licenseKey: YOUR_LICENSE_KEY, plugins: [ Essentials, Bold, Italic ], toolbar: [ bold, italic ], root: { element: h1, modelElement: $inlineRoot, initialData: Document title, placeholder: Enter title... } }; } }!-- app.component.html -- ckeditor *ngIf(Editor config) [editor]Editor [config]config /ckeditorroot.element属性接受两种形式对应 editorconfig.ts 中ViewRootElementDefinition接口标签名字符串例如h1或section包含name、classes、styles与attributes字段的描述对象。classes可为字符串或字符串数组styles与attributes为字符串到字符串的记录。若只设置标签而不设置modelElement: $inlineRoot则仅宿主标签改变根内模式仍允许块级内容。重要对于ClassicEditorckeditor组件始终渲染div宿主无论root.element设置为何值。经典编辑器会将工具栏与可编辑区域包装在自己的结构中。如需控制宿主元素请使用InlineEditor、BalloonEditor或DecoupledEditor。使用协作插件仓库项目本身定位为带模块化架构的现代富文本编辑器框架支持协作编辑等特性。官方提供了 Angular 应用中集成交互式协作编辑的开箱即用示例real-time collaboration for Angular虽然不是必须基于这些示例构建应用但它们能帮助你快速上手。协作类付费特性需配合premium: true与 license key 使用。本地化CKEditor 5 支持多种 UI 语言官方 Angular 组件同样支持。要翻译编辑器将所需语言传入loadCKEditorCloud函数配置中的translations数组import { Component } from angular/core; import { CommonModule } from angular/common; import { CKEditorModule, loadCKEditorCloud, CKEditorCloudResult } from ckeditor/ckeditor5-angular; import { ClassicEditor, EditorConfig } from https://cdn.ckeditor.com/typings/ckeditor5.d.ts; Component( { selector: app-root, templateUrl: ./app.component.html, styleUrls: [./app.component.css], imports: [ CommonModule, CKEditorModule ], standalone: true } ) export class AppComponent { public Editor: typeof ClassicEditor | null null; public config: EditorConfig | null null; public ngOnInit(): void { loadCKEditorCloud( { version: 47.0.0, translations: [ es ] } ).then( this._setupEditor.bind( this ) ); } private _setupEditor ( cloud: CKEditorCloudResult{ version: 47.0.0} ) { const { ClassicEditor, Paragraph, Essentials, Bold, Italic } cloud.CKEditor; this.Editor ClassicEditor; this.config { licenseKey: YOUR_LICENSE_KEY, plugins: [ Essentials, Bold, Italic, Paragraph ], toolbar: [ undo, redo, |, bold, italic ] }; } }UI 语言的更多配置方式可参见 UI 语言指南。支持的 Angular 版本自ckeditor/ckeditor5-angular6.0.0 起可直接使用 CKEditor 5 提供的原生类型定义。由于 Angular 库输出格式存在破坏性变更该包按以下版本对应关系发布以支持不同 Angular 生态CKEditor 5 Angular 组件版本Angular 版本详情当前维护版本^1119需要 CKEditor 5 47 或更高版本。历史版本不再维护^1016需要 CKEditor 5 46 或更高版本。^916迁移到 TypeScript 5声明文件不向后兼容。需要 CKEditor 5 43 或更高版本。^813需要 CKEditor 5 42 或更高版本。^713peer 依赖发生变化。需要 CKEditor 5 37 或更高版本。^613需要 CKEditor 5 37 或更高版本。^513需要 Angular 13 或更高版本。^49.1需要 CKEditor 5 34 或更高版本。^39.1需要 Node.js 14 或更高版本。^29.1迁移到 TypeScript 4声明文件不向后兼容。^15.x – 8.xAngular 版本已不再维护。所有可用的 Angular 版本都可以从 npm 拉取。从 npm 安装迁移到 CDN 的详细步骤可参考 Angular 迁移到 CDN 指南。下一步学习如何读取与设置编辑器数据获取与设置数据参考 配置区 中的更多指南进一步定制编辑器查看 功能分类 了解各个特性的详细用法。【免费下载链接】ckeditor5Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.项目地址: https://gitcode.com/GitHub_Trending/ck/ckeditor5创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考