diff --git a/src/app/simple-cdn-usage/simple-cdn-usage.component.html b/src/app/simple-cdn-usage/simple-cdn-usage.component.html index 0cdd84d..7273204 100644 --- 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 @@

Classic build

[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 index e7e1692..1f0bfd5 100644 --- 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 = `

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 deleted file mode 100644 index 36267d7..0000000 --- a/src/editor/create-cdn-editor.ts +++ /dev/null @@ -1,112 +0,0 @@ -/** - * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. - * For licensing, see LICENSE.md. - */ - -import type { CKEditorCloudResult } from '@ckeditor/ckeditor5-integrations-common'; -import type { ClassicEditor, Plugin } from 'https://cdn.ckeditor.com/typings/ckeditor5.d.ts'; - -type ClassicEditorCreatorConfig = { - cloud: CKEditorCloudResult; - additionalPlugins?: Array; - overrideConfig?: object; -}; - -export const createCdnEditor = ( { - cloud, additionalPlugins, overrideConfig -}: ClassicEditorCreatorConfig ): typeof ClassicEditor => { - const { - ClassicEditor: ClassicEditorBase, - 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; - - class ClassicEditor extends ClassicEditorBase { - public static override builtinPlugins = [ - 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, - ...additionalPlugins || [] - ]; - - public static override defaultConfig = { - 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', - ...overrideConfig - }; - } - - return ClassicEditor; -};