angular 2+组件 - 框架 - 集成 - 构建文档 - ckeditor5中文文档

CKEditor 5由现成的编辑器构建和构建所基于的CKEditor 5 Framework组成。

目前，Angular的CKEditor 5组件仅支持通过构建集成CKEditor 5。 由于缺乏在angular-cli中调整webpack配置的能力，因此无法集成从源构建的CKEditor 5。

虽然目前还没有支持从源代码集成CKEditor 5，但您仍然可以创建CKEditor 5的自定义构建并将其包含在Angular应用程序中。

快速开始

在现有的Angular项目中，为Angular 2+安装CKEditor 5 WYSIWYG编辑器组件：

npm install --save @ckeditor/ckeditor5-angular

安装一个官方编辑器版本或创建一个自定义编辑器（例如，如果您要安装更多插件或自定义无法通过编辑器配置控制的内容）。

假设你选择了@ckeditor/ckeditor5-build-classic：

npm install --save @ckeditor/ckeditor5-build-classic

现在，将CKEditorModule添加到您的应用程序模块导入：

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';

@NgModule( {

    imports: [

        ...

        CKEditorModule,

        ...

    ],

    ...

} )

在Angular组件中导入编辑器构建并将其分配给public属性，以便在模板中可以访问它：

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

@Component( {

    ...

} )

export class MyComponent {

public Editor = ClassicEditor;

...

}

最后，使用模板中的<ckeditor>标记运行富文本编辑器：

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>

重建你的应用程序，CKEditor 5应该用“Hello，world！”来迎接你。

注意：使用文档编辑器构建

如果要使用文档编辑器构建，则需要手动将工具栏添加到DOM。

import * as DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';

@Component( {

    ...

} )

export class MyComponent {

public Editor = DecoupledEditor;

public onReady( editor ) {

        editor.ui.view.editable.element.parentElement.insertBefore(

            editor.ui.view.toolbar.element,

            editor.ui.view.editable.element

        );

    }

}

然后，在模板中：

<ckeditor [editor]="Editor" data="<p>Hello, world!</p>" (ready)="onReady($event)"></ckeditor>

与 ngModel整合

该组件实现ControlValueAccessor接口并与ngModel一起使用。 以下是如何使用它：

1. @Component( {     ... } ) export class MyComponent { public model = {         editorData: '<p>Hello, world!</p>'     }; ... }
2. <ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>

支持的@Input属性

Angular 2+的CKEditor 5组件支持以下@Input属性：

editor (required)

Editor提供静态create()方法来创建编辑器的实例：

<ckeditor [editor]="Editor"></ckeditor>

config

编辑器的配置：

<ckeditor [config]="{ toolbar: [ 'heading', '|', 'bold', 'italic' ] }" ...></ckeditor>

data

编辑器的初始数据。 它可以是静态值：

<ckeditor data="<p>Hello, world!</p>" ...></ckeditor>

或共享父组件的属性

@Component( {

...

} )

export class MyComponent {

public editorData = '<p>Hello, world!</p>';

...

}

<ckeditor [data]="editorData" ...></ckeditor>

tagName

指定将在其上创建编辑器的HTML元素的标记名称。

默认的标签是 <div>.

<ckeditor tagName="textarea" ...></ckeditor>

disabled

控制编辑器的只读状态：

@Component( {

    ...

} )

export class MyComponent {

public isDisabled = false;

...

    toggleDisabled() {

this.isDisabled = !this.isDisabled

    }

}

<ckeditor [disabled]="isDisabled" ...></ckeditor>

<button (click)="toggleDisabled()">

    {{ isDisabled ? 'Enable editor' : 'Disable editor' }}

</button>

支持的@Output属性

Angular 2+的CKEditor 5组件支持以下@Output属性：

ready

编辑器准备就绪时触发。 它与编辑器#ready事件相对应。 与编辑器实例一起解雇。

change

编辑器的内容发生变化时触发。 它对应于editor.model.document#change:data事件。

使用包含编辑器和CKEditor 5的对象change:data事件对象。

<ckeditor [editor]="Editor" (change)="onChange($event)"></ckeditor>

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';

import { ChangeEvent } from '@ckeditor/ckeditor5-angular/ckeditor.component';

@Component( {

    ...

} )

export class MyComponent {

    public Editor = ClassicEditor;

    public onChange( { editor }: ChangeEvent ) {

        const data = editor.getData();

        console.log( data );

    }

...

}

blur

编辑器的编辑视图模糊时触发。 它对应于editor.editing.view.document#blur事件。

与包含编辑器和CKEditor 5失去焦点事件数据的对象一起使用。

focus

聚焦编辑器的编辑视图时触发。 它与editor.editing.view.document#focus事件相对应。

与包含编辑器和CKEditor 5focus事件数据的对象一起使用。

样式

Angular的CKEditor 5组件可以使用组件样式表或使用全局样式表进行样式设置。 让我们看看如何使用这两种方法设置CKEditor 5组件的高度。

通过组件样式表设置高度

首先，在父组件的目录中创建一个(S)CSS文件，并为给定编辑器的部分设置样式，前面是:host和::ng-deep伪选择器。

/* src/app/app.component.css */

:host ::ng-deep .ck-editor__editable {

    min-height: 500px;

}

然后在父组件中添加上述样式表的相对路径。

/* src/app/app.component.ts */

@Component( {

    // ...

    styleUrls: [ './app.component.css' ]

} )

通过全局样式表设置高度

要使用全局样式表设置组件样式，首先要创建它：

/* src/styles.css */

.ck-editor__editable {

    min-height: 500px;

}

然后，将其添加到angular.json配置文件中。

"architect": {

    "build": {

        "options": {

            "styles": [

                { "input": "src/styles.css" }

            ]

        }

    }

}

本土化

CKEditor 5可以分两步进行本地化。

1. 加载翻译文件

首先，您需要将转换文件添加到捆绑包中。 这一步可以通过两种方式实现：

• import '@ckeditor/ckeditor5-build-classic/build/translations/de'; import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'; ...
• "architect": {     "build": {         "options": {             "scripts": [ "node_modules/@ckeditor/ckeditor5-build-classic/build/translations/de.js" ]         }     } }

2. 配置语言

然后，您需要配置编辑器以使用给定的语言：

@Component( {

    ...

} )

export class MyComponent {

public Editor = ClassicEditor;

public config = {

        language: 'de'

    };

}

有关高级用法，请参阅设置UI语言指南。

贡献和报告问题

Angular 2+的富文本编辑器组件的源代码可以在GitHub上的https://github.com/ckeditor/ckeditor5-angular中找到。

文章作者ianzhi,原文地址：https://cloud.tencent.com/developer/article/1476868

文章版权归作者所有，转载请保留此声明。