Skip to content

Commit

Permalink
Add cloud integration
Browse files Browse the repository at this point in the history
  • Loading branch information
Mati365 committed Aug 20, 2024
1 parent 84c7e78 commit add7f46
Show file tree
Hide file tree
Showing 20 changed files with 4,760 additions and 3,072 deletions.
34 changes: 18 additions & 16 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,25 @@
"release:publish-packages": "node scripts/publishpackages.js"
},
"dependencies": {
"@angular/animations": "^13.3.11",
"@angular/common": "^13.3.11",
"@angular/compiler": "^13.3.11",
"@angular/core": "^13.3.11",
"@angular/forms": "^13.3.11",
"@angular/platform-browser": "^13.3.11",
"@angular/platform-browser-dynamic": "^13.3.11",
"@angular/router": "^13.3.11",
"@angular/animations": "^16",
"@angular/common": "^16",
"@angular/compiler": "^16",
"@angular/core": "^16",
"@angular/forms": "^16",
"@angular/platform-browser": "^16",
"@angular/platform-browser-dynamic": "^16",
"@angular/router": "^16",
"core-js": "^3.21.1",
"rxjs": "^6.5.5",
"tslib": "^2.0.3",
"zone.js": "~0.11.7"
"zone.js": "~0.11.7",
"@ckeditor/ckeditor5-integrations-common": "^0.1.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^13.3.9",
"@angular/cli": "^13.3.9",
"@angular/compiler-cli": "^13.3.11",
"@angular/language-service": "^13.3.11",
"@angular-devkit/build-angular": "^16",
"@angular/cli": "^16",
"@angular/compiler-cli": "^16",
"@angular/language-service": "^16",
"@ckeditor/ckeditor5-dev-bump-year": "^40.2.0",
"@ckeditor/ckeditor5-dev-ci": "^40.2.0",
"@ckeditor/ckeditor5-dev-release-tools": "^40.2.0",
Expand All @@ -45,7 +46,8 @@
"@types/node": "^14.11.8",
"@typescript-eslint/eslint-plugin": "~5.43.0",
"@typescript-eslint/parser": "^5.31.0",
"ckeditor5": "alpha",
"ckeditor5": "^42.0.2",
"ckeditor5-premium-features": "^42.0.2",
"coveralls": "^3.1.1",
"css-loader": "^5.2.7",
"cypress": "^12.17.4",
Expand All @@ -63,15 +65,15 @@
"karma-jasmine-html-reporter": "^1.7.0",
"lint-staged": "^10.4.0",
"minimist": "^1.2.8",
"ng-packagr": "^13.3.1",
"ng-packagr": "^16",
"postcss-loader": "^4.3.0",
"raw-loader": "^4.0.1",
"semver": "^7.0.0",
"start-server-and-test": "^2.0.3",
"style-loader": "^2.0.0",
"ts-loader": "^9.4.3",
"ts-node": "^9.0.0",
"typescript": "~4.6.4",
"typescript": "~5.1.3",
"upath": "^2.0.1",
"webpack": "^5.77.0",
"webpack-cli": "^4.10.0"
Expand Down
13 changes: 7 additions & 6 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ <h1>CKEditor 5 integration with Angular</h1>

<nav>
<ul>
<li><a routerLink="/simple-usage" routerLinkActive="active">Simple usage</a></li>
<li><a routerLink="/forms" routerLinkActive="active">Integration with forms (<code>ngModel</code>)</a></li>
<li><a routerLink="/reactive-forms" routerLinkActive="active">Integration with reactive forms (<code>formControlName</code>)</a></li>
<li><a routerLink="/watchdog" routerLinkActive="active">Integration with CKEditor Watchdog</a></li>
<li><a routerLink="/context" routerLinkActive="active">Integration with CKEditor Context</a></li>
<li><a routerLink="/init-crash" routerLinkActive="active">Catching error when editor crashes during initialization</a></li>
<li><a href="/simple-usage" routerLinkActive="active">Simple usage</a></li>
<li><a href="/simple-cdn-usage" routerLinkActive="active">Simple CDN usage</a></li>
<li><a href="/forms" routerLinkActive="active">Integration with forms (<code>ngModel</code>)</a></li>
<li><a href="/reactive-forms" routerLinkActive="active">Integration with reactive forms (<code>formControlName</code>)</a></li>
<li><a href="/watchdog" routerLinkActive="active">Integration with CKEditor Watchdog</a></li>
<li><a href="/context" routerLinkActive="active">Integration with CKEditor Context</a></li>
<li><a href="/init-crash" routerLinkActive="active">Catching error when editor crashes during initialization</a></li>
</ul>
</nav>

Expand Down
60 changes: 34 additions & 26 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -1,44 +1,52 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import type { Routes } from '@angular/router';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { RouterModule, type Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { CKEditorModule } from '../ckeditor/ckeditor.module';
import { SimpleUsageComponent } from './simple-usage/simple-usage.component';
import { DemoFormComponent } from './demo-form/demo-form.component';
import { DemoReactiveFormComponent } from './demo-reactive-form/demo-reactive-form.component';
import { ContextDemoComponent } from './context-demo/context-demo';
import { WatchdogDemoComponent } from './watchdog-demo/watchdog-demo';
import { InitializationCrashComponent } from './initialization-crash/initialization-crash.component';

const appRoutes: Routes = [
{ path: '', redirectTo: '/simple-usage', pathMatch: 'full' },
{ path: 'context', component: ContextDemoComponent },
{ path: 'forms', component: DemoFormComponent },
{ path: 'reactive-forms', component: DemoReactiveFormComponent },
{ path: 'watchdog', component: WatchdogDemoComponent },
{ path: 'simple-usage', component: SimpleUsageComponent },
{ path: 'init-crash', component: InitializationCrashComponent }
{
path: 'context',
loadChildren: () => import( './context-demo/context-demo.module' ).then( m => m.ContextDemoModule )
},
{
path: 'forms',
loadChildren: () => import( './demo-form/demo-form.module' ).then( m => m.DemoFormModule )
},
{
path: 'reactive-forms',
loadChildren: () => import( './demo-reactive-form/demo-reactive-form.module' ).then( m => m.DemoReactiveFormModule )
},
{
path: 'watchdog',
loadChildren: () => import( './watchdog-demo/watchdog-demo.module' ).then( m => m.WatchdogDemoModule )
},
{
path: 'simple-usage',
loadChildren: () => import( './simple-usage/simple-usage.module' ).then( m => m.SimpleUsageModule )
},
{
path: 'simple-cdn-usage',
loadChildren: () => import( './simple-cdn-usage/simple-cdn-usage.module' ).then( m => m.SimpleCdnUsageModule )
},
{
path: 'init-crash',
loadChildren: () => import( './initialization-crash/initialization-crash.module' ).then( m => m.InitializationCrashModule )
}
];

@NgModule( {
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
CKEditorModule,
RouterModule.forRoot( appRoutes )
RouterModule.forRoot( appRoutes, {
onSameUrlNavigation: 'reload'
} )
],
declarations: [
AppComponent,
ContextDemoComponent,
DemoFormComponent,
DemoReactiveFormComponent,
SimpleUsageComponent,
WatchdogDemoComponent,
InitializationCrashComponent
AppComponent
],
providers: [],
bootstrap: [ AppComponent ]
Expand Down
22 changes: 22 additions & 0 deletions src/app/context-demo/context-demo.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { CKEditorModule } from 'src/ckeditor';
import { ContextDemoComponent } from './context-demo';

@NgModule( {
declarations: [
ContextDemoComponent
],
imports: [
BrowserModule,
CKEditorModule,
RouterModule.forChild( [
{
path: '',
component: ContextDemoComponent
}
] )
]
} )
export class ContextDemoModule {}
26 changes: 26 additions & 0 deletions src/app/demo-form/demo-form.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { CKEditorModule } from 'src/ckeditor';
import { DemoFormComponent } from './demo-form.component';

@NgModule( {
declarations: [
DemoFormComponent
],
imports: [
FormsModule,
ReactiveFormsModule,
BrowserModule,
CKEditorModule,
RouterModule.forChild( [
{
path: '',
component: DemoFormComponent
}
] )
]
} )
export class DemoFormModule {}
26 changes: 26 additions & 0 deletions src/app/demo-reactive-form/demo-reactive-form.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { CKEditorModule } from 'src/ckeditor';
import { DemoReactiveFormComponent } from './demo-reactive-form.component';

@NgModule( {
declarations: [
DemoReactiveFormComponent
],
imports: [
FormsModule,
ReactiveFormsModule,
BrowserModule,
CKEditorModule,
RouterModule.forChild( [
{
path: '',
component: DemoReactiveFormComponent
}
] )
]
} )
export class DemoReactiveFormModule {}
22 changes: 22 additions & 0 deletions src/app/initialization-crash/initialization-crash.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { CKEditorModule } from 'src/ckeditor';
import { InitializationCrashComponent } from './initialization-crash.component';

@NgModule( {
declarations: [
InitializationCrashComponent
],
imports: [
BrowserModule,
CKEditorModule,
RouterModule.forChild( [
{
path: '',
component: InitializationCrashComponent
}
] )
]
} )
export class InitializationCrashModule {}
4 changes: 4 additions & 0 deletions src/app/simple-cdn-usage/simple-cdn-usage.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
:host ::ng-deep .ck.ck-editor__editable.ck-read-only {
background: #fafafa;
color: #888;
}
31 changes: 31 additions & 0 deletions src/app/simple-cdn-usage/simple-cdn-usage.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<h2>Simple CDN usage</h2>

<p><strong>Note:</strong> Open the console for additional logs.</p>

<p>
<button (click)="toggleDisableEditors()">{{ isDisabled ? 'Enable editors' : 'Disable editors' }}</button>
</p>

<h3>Classic build</h3>
<ckeditor
*ngIf="Editor"

[data]="editorData"
[editor]="Editor"
[disabled]="isDisabled"
id="classic-editor"
name="classic-editor"

(ready)="onReady()"
(change)="onChange()"
(focus)="onFocus()"
(error)="onError()"
(blur)="onBlur()">
</ckeditor>

<h4>Component events:</h4>
<ul>
<li *ngFor="let eventInfo of componentEvents">
<span>{{ eventInfo }}</span>
</li>
</ul>
57 changes: 57 additions & 0 deletions src/app/simple-cdn-usage/simple-cdn-usage.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { Component, type OnInit } from '@angular/core';
import type { ClassicEditor } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts';

import { createCdnEditor } from 'src/editor/create-cdn-editor';
import { loadCKEditorCloud } from '@ckeditor/ckeditor5-integrations-common';

@Component( {
selector: 'app-simple-cdn-usage',
templateUrl: './simple-cdn-usage.component.html',
styleUrls: [ './simple-cdn-usage.component.css' ]
} )
export class SimpleCdnUsageComponent implements OnInit {
public Editor: typeof ClassicEditor | null = null;

public isDisabled = false;
public editorData =
`<p>Getting used to an entirely different culture can be challenging.
While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person.
You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>`;

public componentEvents: Array<string> = [];

public toggleDisableEditors(): void {
this.isDisabled = !this.isDisabled;
}

public ngOnInit(): void {
loadCKEditorCloud( {
version: '43.0.0'
} )
.then( cloud => {
this.Editor = createCdnEditor( {
cloud
} );
} );
}

public onReady(): void {
this.componentEvents.push( 'The editor is ready.' );
}

public onChange(): void {
this.componentEvents.push( 'Editor model changed.' );
}

public onFocus(): void {
this.componentEvents.push( 'Focused the editing view.' );
}

public onBlur(): void {
this.componentEvents.push( 'Blurred the editing view.' );
}

public onError(): void {
this.componentEvents.push( 'The editor crashed.' );
}
}
22 changes: 22 additions & 0 deletions src/app/simple-cdn-usage/simple-cdn-usage.module.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { CKEditorModule } from 'src/ckeditor';
import { SimpleCdnUsageComponent } from './simple-cdn-usage.component';

@NgModule( {
declarations: [
SimpleCdnUsageComponent
],
imports: [
BrowserModule,
CKEditorModule,
RouterModule.forChild( [
{
path: '',
component: SimpleCdnUsageComponent
}
] )
]
} )
export class SimpleCdnUsageModule {}
Loading

0 comments on commit add7f46

Please sign in to comment.