Skip to content

Commit 9c62280

Browse files
Mati365Mati365
authored
Merge pull request #431 from ckeditor/ck/cloud-poc
Feature: Add cloud CDN support. MAJOR BREAKING CHANGE: Changed minimum supported version of Angular to the oldest supported LTS: >= 16.x MAJOR BREAKING CHANGE: Switched compiler from TS 4.x → 5.x to ensure compatibility with the newest CKEditor packages
2 parents 2bd4329 + 364752f commit 9c62280

21 files changed

+4753
-3213
lines changed

‎package.json

+18-16
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,25 @@
1919
"release:publish-packages": "node scripts/publishpackages.js"
2020
},
2121
"dependencies": {
22-
"@angular/animations": "^13.3.11",
23-
"@angular/common": "^13.3.11",
24-
"@angular/compiler": "^13.3.11",
25-
"@angular/core": "^13.3.11",
26-
"@angular/forms": "^13.3.11",
27-
"@angular/platform-browser": "^13.3.11",
28-
"@angular/platform-browser-dynamic": "^13.3.11",
29-
"@angular/router": "^13.3.11",
22+
"@angular/animations": "^16",
23+
"@angular/common": "^16",
24+
"@angular/compiler": "^16",
25+
"@angular/core": "^16",
26+
"@angular/forms": "^16",
27+
"@angular/platform-browser": "^16",
28+
"@angular/platform-browser-dynamic": "^16",
29+
"@angular/router": "^16",
3030
"core-js": "^3.21.1",
3131
"rxjs": "^6.5.5",
3232
"tslib": "^2.0.3",
33-
"zone.js": "~0.11.7"
33+
"zone.js": "~0.13.0",
34+
"@ckeditor/ckeditor5-integrations-common": "^1.0.0"
3435
},
3536
"devDependencies": {
36-
"@angular-devkit/build-angular": "^13.3.9",
37-
"@angular/cli": "^13.3.9",
38-
"@angular/compiler-cli": "^13.3.11",
39-
"@angular/language-service": "^13.3.11",
37+
"@angular-devkit/build-angular": "^16",
38+
"@angular/cli": "^16",
39+
"@angular/compiler-cli": "^16",
40+
"@angular/language-service": "^16",
4041
"@ckeditor/ckeditor5-dev-bump-year": "^40.2.0",
4142
"@ckeditor/ckeditor5-dev-ci": "^40.2.0",
4243
"@ckeditor/ckeditor5-dev-release-tools": "^40.2.0",
@@ -45,7 +46,8 @@
4546
"@types/node": "^14.11.8",
4647
"@typescript-eslint/eslint-plugin": "~5.43.0",
4748
"@typescript-eslint/parser": "^5.31.0",
48-
"ckeditor5": "alpha",
49+
"ckeditor5": "^42.0.2",
50+
"ckeditor5-premium-features": "^42.0.2",
4951
"coveralls": "^3.1.1",
5052
"css-loader": "^5.2.7",
5153
"cypress": "^12.17.4",
@@ -63,15 +65,15 @@
6365
"karma-jasmine-html-reporter": "^1.7.0",
6466
"lint-staged": "^10.4.0",
6567
"minimist": "^1.2.8",
66-
"ng-packagr": "^13.3.1",
68+
"ng-packagr": "^16",
6769
"postcss-loader": "^4.3.0",
6870
"raw-loader": "^4.0.1",
6971
"semver": "^7.0.0",
7072
"start-server-and-test": "^2.0.3",
7173
"style-loader": "^2.0.0",
7274
"ts-loader": "^9.4.3",
7375
"ts-node": "^9.0.0",
74-
"typescript": "~4.6.4",
76+
"typescript": "~5.1.3",
7577
"upath": "^2.0.1",
7678
"webpack": "^5.94.0",
7779
"webpack-cli": "^4.10.0"

‎src/app/app.component.html

+7-6
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@ <h1>CKEditor 5 integration with Angular</h1>
22

33
<nav>
44
<ul>
5-
<li><a routerLink="/simple-usage" routerLinkActive="active">Simple usage</a></li>
6-
<li><a routerLink="/forms" routerLinkActive="active">Integration with forms (<code>ngModel</code>)</a></li>
7-
<li><a routerLink="/reactive-forms" routerLinkActive="active">Integration with reactive forms (<code>formControlName</code>)</a></li>
8-
<li><a routerLink="/watchdog" routerLinkActive="active">Integration with CKEditor Watchdog</a></li>
9-
<li><a routerLink="/context" routerLinkActive="active">Integration with CKEditor Context</a></li>
10-
<li><a routerLink="/init-crash" routerLinkActive="active">Catching error when editor crashes during initialization</a></li>
5+
<li><a href="/simple-usage" routerLinkActive="active">Simple usage</a></li>
6+
<li><a href="/simple-cdn-usage" routerLinkActive="active">Simple CDN usage</a></li>
7+
<li><a href="/forms" routerLinkActive="active">Integration with forms (<code>ngModel</code>)</a></li>
8+
<li><a href="/reactive-forms" routerLinkActive="active">Integration with reactive forms (<code>formControlName</code>)</a></li>
9+
<li><a href="/watchdog" routerLinkActive="active">Integration with CKEditor Watchdog</a></li>
10+
<li><a href="/context" routerLinkActive="active">Integration with CKEditor Context</a></li>
11+
<li><a href="/init-crash" routerLinkActive="active">Catching error when editor crashes during initialization</a></li>
1112
</ul>
1213
</nav>
1314

‎src/app/app.module.ts

+34-26
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,52 @@
11
import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
3-
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
4-
import type { Routes } from '@angular/router';
5-
import { RouterModule } from '@angular/router';
6-
import { AppComponent } from './app.component';
3+
import { RouterModule, type Routes } from '@angular/router';
74

5+
import { AppComponent } from './app.component';
86
import { CKEditorModule } from '../ckeditor/ckeditor.module';
9-
import { SimpleUsageComponent } from './simple-usage/simple-usage.component';
10-
import { DemoFormComponent } from './demo-form/demo-form.component';
11-
import { DemoReactiveFormComponent } from './demo-reactive-form/demo-reactive-form.component';
12-
import { ContextDemoComponent } from './context-demo/context-demo';
13-
import { WatchdogDemoComponent } from './watchdog-demo/watchdog-demo';
14-
import { InitializationCrashComponent } from './initialization-crash/initialization-crash.component';
157

168
const appRoutes: Routes = [
179
{ path: '', redirectTo: '/simple-usage', pathMatch: 'full' },
18-
{ path: 'context', component: ContextDemoComponent },
19-
{ path: 'forms', component: DemoFormComponent },
20-
{ path: 'reactive-forms', component: DemoReactiveFormComponent },
21-
{ path: 'watchdog', component: WatchdogDemoComponent },
22-
{ path: 'simple-usage', component: SimpleUsageComponent },
23-
{ path: 'init-crash', component: InitializationCrashComponent }
10+
{
11+
path: 'context',
12+
loadChildren: () => import( './context-demo/context-demo.module' ).then( m => m.ContextDemoModule )
13+
},
14+
{
15+
path: 'forms',
16+
loadChildren: () => import( './demo-form/demo-form.module' ).then( m => m.DemoFormModule )
17+
},
18+
{
19+
path: 'reactive-forms',
20+
loadChildren: () => import( './demo-reactive-form/demo-reactive-form.module' ).then( m => m.DemoReactiveFormModule )
21+
},
22+
{
23+
path: 'watchdog',
24+
loadChildren: () => import( './watchdog-demo/watchdog-demo.module' ).then( m => m.WatchdogDemoModule )
25+
},
26+
{
27+
path: 'simple-usage',
28+
loadChildren: () => import( './simple-usage/simple-usage.module' ).then( m => m.SimpleUsageModule )
29+
},
30+
{
31+
path: 'simple-cdn-usage',
32+
loadChildren: () => import( './simple-cdn-usage/simple-cdn-usage.module' ).then( m => m.SimpleCdnUsageModule )
33+
},
34+
{
35+
path: 'init-crash',
36+
loadChildren: () => import( './initialization-crash/initialization-crash.module' ).then( m => m.InitializationCrashModule )
37+
}
2438
];
2539

2640
@NgModule( {
2741
imports: [
2842
BrowserModule,
29-
FormsModule,
30-
ReactiveFormsModule,
3143
CKEditorModule,
32-
RouterModule.forRoot( appRoutes )
44+
RouterModule.forRoot( appRoutes, {
45+
onSameUrlNavigation: 'reload'
46+
} )
3347
],
3448
declarations: [
35-
AppComponent,
36-
ContextDemoComponent,
37-
DemoFormComponent,
38-
DemoReactiveFormComponent,
39-
SimpleUsageComponent,
40-
WatchdogDemoComponent,
41-
InitializationCrashComponent
49+
AppComponent
4250
],
4351
providers: [],
4452
bootstrap: [ AppComponent ]

‎src/app/context-demo/context-demo.module.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule } from '@angular/router';
3+
import { BrowserModule } from '@angular/platform-browser';
4+
import { CKEditorModule } from 'src/ckeditor';
5+
import { ContextDemoComponent } from './context-demo';
6+
7+
@NgModule( {
8+
declarations: [
9+
ContextDemoComponent
10+
],
11+
imports: [
12+
BrowserModule,
13+
CKEditorModule,
14+
RouterModule.forChild( [
15+
{
16+
path: '',
17+
component: ContextDemoComponent
18+
}
19+
] )
20+
]
21+
} )
22+
export class ContextDemoModule {}

‎src/app/demo-form/demo-form.module.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule } from '@angular/router';
3+
import { BrowserModule } from '@angular/platform-browser';
4+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
5+
6+
import { CKEditorModule } from 'src/ckeditor';
7+
import { DemoFormComponent } from './demo-form.component';
8+
9+
@NgModule( {
10+
declarations: [
11+
DemoFormComponent
12+
],
13+
imports: [
14+
FormsModule,
15+
ReactiveFormsModule,
16+
BrowserModule,
17+
CKEditorModule,
18+
RouterModule.forChild( [
19+
{
20+
path: '',
21+
component: DemoFormComponent
22+
}
23+
] )
24+
]
25+
} )
26+
export class DemoFormModule {}

‎src/app/demo-reactive-form/demo-reactive-form.module.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule } from '@angular/router';
3+
import { BrowserModule } from '@angular/platform-browser';
4+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
5+
6+
import { CKEditorModule } from 'src/ckeditor';
7+
import { DemoReactiveFormComponent } from './demo-reactive-form.component';
8+
9+
@NgModule( {
10+
declarations: [
11+
DemoReactiveFormComponent
12+
],
13+
imports: [
14+
FormsModule,
15+
ReactiveFormsModule,
16+
BrowserModule,
17+
CKEditorModule,
18+
RouterModule.forChild( [
19+
{
20+
path: '',
21+
component: DemoReactiveFormComponent
22+
}
23+
] )
24+
]
25+
} )
26+
export class DemoReactiveFormModule {}

‎src/app/initialization-crash/initialization-crash.module.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { NgModule } from '@angular/core';
2+
import { RouterModule } from '@angular/router';
3+
import { BrowserModule } from '@angular/platform-browser';
4+
import { CKEditorModule } from 'src/ckeditor';
5+
import { InitializationCrashComponent } from './initialization-crash.component';
6+
7+
@NgModule( {
8+
declarations: [
9+
InitializationCrashComponent
10+
],
11+
imports: [
12+
BrowserModule,
13+
CKEditorModule,
14+
RouterModule.forChild( [
15+
{
16+
path: '',
17+
component: InitializationCrashComponent
18+
}
19+
] )
20+
]
21+
} )
22+
export class InitializationCrashModule {}

‎src/app/simple-cdn-usage/simple-cdn-usage.component.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
:host ::ng-deep .ck.ck-editor__editable.ck-read-only {
2+
background: #fafafa;
3+
color: #888;
4+
}

‎src/app/simple-cdn-usage/simple-cdn-usage.component.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<h2>Simple CDN usage</h2>
2+
3+
<p><strong>Note:</strong> Open the console for additional logs.</p>
4+
5+
<p>
6+
<button (click)="toggleDisableEditors()">{{ isDisabled ? 'Enable editors' : 'Disable editors' }}</button>
7+
</p>
8+
9+
<h3>Classic build</h3>
10+
<ckeditor
11+
*ngIf="Editor"
12+
13+
[data]="editorData"
14+
[editor]="Editor"
15+
[disabled]="isDisabled"
16+
[config]="config"
17+
id="classic-editor"
18+
name="classic-editor"
19+
20+
(ready)="onReady()"
21+
(change)="onChange()"
22+
(focus)="onFocus()"
23+
(error)="onError()"
24+
(blur)="onBlur()">
25+
</ckeditor>
26+
27+
<h4>Component events:</h4>
28+
<ul>
29+
<li *ngFor="let eventInfo of componentEvents">
30+
<span>{{ eventInfo }}</span>
31+
</li>
32+
</ul>

0 commit comments

Comments
 (0)