Skip to content

Commit

Permalink
Docs: Add the context about TS to the Angular CDN guide.
Browse files Browse the repository at this point in the history
  • Loading branch information
gorzelinski committed Nov 15, 2024
1 parent c2d0f13 commit 750806c
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 2 deletions.
10 changes: 9 additions & 1 deletion docs/getting-started/integrations-cdn/angular.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@ First, install the [CKEditor 5 WYSIWYG editor component for Angular](https:
npm install @ckeditor/ckeditor5-angular
```

Angular is TypeScript first, so most likely, you will need to import some additional types for CKEditor. Depending on your plugins and types, additionally install the open-source and premium packages:

```bash
npm install ckeditor5 ckeditor5-premium-features
```

In the below example, the `loadCKEditorCloud` helper is used to load the editor code and plugins from CDN. To use CKEditor 5 with CDN, you need to import the function and call it inside the `ngOnInit` lifecycle hook with the `version` provided in the configuration. To use premium plugins, set the `premium` property to `true` and provide your license key in the configuration. For more information about the `loadCKEditorCloud` helper, see the {@link getting-started/setup/loading-cdn-resources Loading CDN resources} guide.

```ts
Expand All @@ -42,7 +48,7 @@ In the below example, the `loadCKEditorCloud` helper is used to load the editor
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';
import type { ClassicEditor, EditorConfig } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts';

@Component( {
selector: 'app-root',
Expand Down Expand Up @@ -87,6 +93,8 @@ export class AppComponent {
}
```

In the example above, the `EditorConfig` type is imported from the `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` package, while the editor itself loads from the CDN. Note that `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` is not an actual URL to the CKEditor 5 typings file but a synthetic TypeScript module providing type definitions for the editor. The `ckeditor5` or `ckeditor5-premium-features` packages supply the actual types, which depend on the `@ckeditor/ckeditor5-angular` package.

Finally, use the `<ckeditor>` tag in the template to run the rich text editor. The usage is the same regardless of the plugin configuration.

```html
Expand Down
2 changes: 1 addition & 1 deletion docs/getting-started/integrations-cdn/react-default-cdn.md
Original file line number Diff line number Diff line change
Expand Up @@ -394,7 +394,7 @@ const CKEditorDemo = () => {
};
```

In the example above, the `EventInfo` type is imported from the `https://cdn.ckeditor.com/typings/ckeditor5.d.ts package`, while the editor itself loads from the CDN. Note that `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` is not an actual URL to the CKEditor&nbsp;5 typings file but a synthetic TypeScript module providing typings for the editor. The `ckeditor5` package supplies the actual typings, which depend on the `@ckeditor/ckeditor5-react` package.
In the example above, the `EventInfo` type is imported from the `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` package, while the editor itself loads from the CDN. Note that `https://cdn.ckeditor.com/typings/ckeditor5.d.ts` is not an actual URL to the CKEditor&nbsp;5 typings file but a synthetic TypeScript module providing typings for the editor. The `ckeditor5` package supplies the actual types, which depend on the `@ckeditor/ckeditor5-react` package.

Although this setup might seem complex, it prevents users from directly importing anything from the `ckeditor5` package, which could lead to duplicated code issues.

Expand Down

0 comments on commit 750806c

Please sign in to comment.