Simplify CDN demo

ckeditor · Sep 4, 2024 · d6935de · d6935de
1 parent 1d3ef1a
commit d6935de
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 120 deletions.
diff --git a/src/app/simple-cdn-usage/simple-cdn-usage.component.html b/src/app/simple-cdn-usage/simple-cdn-usage.component.html
@@ -13,6 +13,7 @@ <h3>Classic build</h3>
 	[data]="editorData"
 	[editor]="Editor"
 	[disabled]="isDisabled"
+	[config]="config"
 	id="classic-editor"
 	name="classic-editor"
 

diff --git a/src/app/simple-cdn-usage/simple-cdn-usage.component.ts b/src/app/simple-cdn-usage/simple-cdn-usage.component.ts
@@ -1,8 +1,7 @@
 import { Component, type OnInit } from '@angular/core';
-import type { ClassicEditor } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts';
+import type { ClassicEditor, EditorConfig } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts';
 
-import { createCdnEditor } from 'src/editor/create-cdn-editor';
-import { loadCKEditorCloud } from '@ckeditor/ckeditor5-integrations-common';
+import { loadCKEditorCloud, type CKEditorCloudResult } from '@ckeditor/ckeditor5-integrations-common';
 
 @Component( {
 	selector: 'app-simple-cdn-usage',
@@ -12,6 +11,8 @@ import { loadCKEditorCloud } from '@ckeditor/ckeditor5-integrations-common';
 export class SimpleCdnUsageComponent implements OnInit {
 	public Editor: typeof ClassicEditor | null = null;
 
+	public config: EditorConfig | null = null;
+
 	public isDisabled = false;
 	public editorData =
 		`<p>Getting used to an entirely different culture can be challenging.
@@ -28,11 +29,107 @@ You learn to appreciate each and every single one of the differences while you b
 		loadCKEditorCloud( {
 			version: '43.0.0'
 		} )
-			.then( cloud => {
-				this.Editor = createCdnEditor( {
-					cloud
-				} );
-			} );
+			.then( this._setupEditor.bind( this ) );
+	}
+
+	private _setupEditor( cloud: CKEditorCloudResult ) {
+		const {
+			ClassicEditor,
+			Essentials,
+			CKFinderUploadAdapter,
+			Autoformat,
+			Bold,
+			Italic,
+			BlockQuote,
+			CKBox,
+			CKFinder,
+			CloudServices,
+			EasyImage,
+			Heading,
+			Image,
+			ImageCaption,
+			ImageStyle,
+			ImageToolbar,
+			ImageUpload,
+			Indent,
+			Link,
+			List,
+			MediaEmbed,
+			Paragraph,
+			PasteFromOffice,
+			PictureEditing,
+			Table,
+			TableToolbar,
+			TextTransformation
+		} = cloud.CKEditor;
+
+		this.Editor = ClassicEditor;
+		this.config = {
+			plugins: [
+				Essentials,
+				CKFinderUploadAdapter,
+				Autoformat,
+				Bold,
+				Italic,
+				BlockQuote,
+				CKBox,
+				CKFinder,
+				CloudServices,
+				EasyImage,
+				Heading,
+				Image,
+				ImageCaption,
+				ImageStyle,
+				ImageToolbar,
+				ImageUpload,
+				Indent,
+				Link,
+				List,
+				MediaEmbed,
+				Paragraph,
+				PasteFromOffice,
+				PictureEditing,
+				Table,
+				TableToolbar,
+				TextTransformation
+			],
+			toolbar: {
+				items: [
+					'undo',
+					'redo',
+					'|',
+					'heading',
+					'|',
+					'bold',
+					'italic',
+					'|',
+					'link',
+					'uploadImage',
+					'insertTable',
+					'blockQuote',
+					'mediaEmbed',
+					'|',
+					'bulletedList',
+					'numberedList',
+					'outdent',
+					'indent'
+				]
+			},
+			image: {
+				toolbar: [
+					'imageStyle:inline',
+					'imageStyle:block',
+					'imageStyle:side',
+					'|',
+					'toggleImageCaption',
+					'imageTextAlternative'
+				]
+			},
+			table: {
+				contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
+			},
+			language: 'en'
+		};
 	}
 
 	public onReady(): void {

diff --git a/src/editor/create-cdn-editor.ts b/src/editor/create-cdn-editor.ts