How to Install CKEditor to an Angular 15 Project

How to Install CKEditor to an Angular 15 Project
I am on Angular 15 and the tutorial at https://ckeditor.com/docs/ckeditor5/latest/installation/integrations/angular.html#quick-start is really targeting 16+.
Here's what I did to get it running on Angular 15.
Choose either the classic or document-decoupled build. The latter includes things like font sizes and image resizing.

1. Add to your package.json dependencies:

"@ckeditor/ckeditor5-angular": "7.0.0"

"@ckeditor/ckeditor5-build-classic": "39.0.1"
OR (pick one build)
"@ckeditor/ckeditor5-build-document-decoupled": "39.0.1"

"@ckeditor/ckeditor5-core": "39.0.1"
"@ckeditor/ckeditor5-engine": "39.0.1"
"@ckeditor/ckeditor5-utils": "39.0.1"
"@ckeditor/ckeditor5-watchdog": "39.0.1"

2. Run npm -install in your ClientApp folder to install these.

3. Create a new file (if not found) "typings.d.ts" in your src/app folder (or root if you like).
Add to it:
declare module '@ckeditor/ckeditor5-build-classic'{
const ClassicEditorBuild:any;
export = ClassicEditorBuild;
}
(or replace 'Classic' with 'Document' if using decoupled-document)

4. Add to tsconfig.json under "angularCompilerOptions" the following:
"allowSyntheticDefaultImports": true

5. In app.module.ts, under Imports, add CKEditorModule (and import it from '@ckeditor/ckeditor5-angular)

6. In your webage .ts file, add a property:
public Editor = ClassicEditor;
(and import it from '@ckeditor/ckeditor5-build-classic)
(or replace 'Classic' with 'Document' if using decoupled-document)

Also make sure you have data ready for the ngModel, such as
data:string = '

'; (or use your data object)

7. In your webpage .html file, add a field:

8. You'll need to create an upload adapter for image uploads to work. Copy the default adapter class source code to your project and edit to suit. Register it as follows:
HTML - add (ready)="onCKEditorReady($event) to the ckeditor element.
TS - add that function:
onCKEditorReady(editor:any):void{
editor.plugins.get('FileRepository').createUploadAdapter = (loader:any) => {
this.uploader = new MyUploadAdapter(loader);
return this.uploader;}}

Note: I created a local copy of the adapter so the UI could show a progress bar while it was loading. Otherwise user could click a Save button before the image hits the server, and it does not get saved. In the adapter, while the upload is running, I set a boolean 'uploading' to "true".

Change their upload URL to your own. Ensure your server method returns an object with a property "url" that is set to the final URL.

9. If (Only if) you used the decoupled document editor, you need to manually create the toolbar. Add to the ready event (step 8) the following:
var element = editor.ui.getEditableElement()!;
var parent = element.parentElement;
parent.insertBefore(editor.ui.view.toolbar.element!, element);

The textarea for this mode doesn't have a border and is hard to see. You'll want to surround it with a div that has a solid border.

9. Build and run. You should see the basic editor populated!

Created By: amos 8/31/2023 9:51:28 AM