feat: replace CKEditor with self-hosted TinyMCE

WEB-435 Unit Test Coverage for ViewCollateralComponent

feat: replace CKEditor with self-hosted TinyMCE (no API key)

Change ViewChild static option to false

Author: shubhamkumar9199

angular.json

@@ -34,7 +34,12 @@
               "src/favicon.ico",
               "src/robots.txt",
               "src/manifest.json",
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "**/*",
+                "input": "node_modules/tinymce",
+                "output": "assets/tinymce"
+              }
             ],
             "styles": [
               "node_modules/@fortawesome/fontawesome-free/css/all.css",
@@ -49,7 +54,7 @@
             "scripts": [],
             "allowedCommonJsDependencies": [
               "lodash",
-              "@ckeditor/ckeditor5-build-classic",
+              "tinymce",
               "moment"
             ],
             "browser": "src/main.ts",

package-lock.json

@@ -43,8 +43,6 @@
     "@angular/platform-browser": "19.2.14",
     "@angular/platform-browser-dynamic": "19.2.14",
     "@angular/router": "19.2.14",
-    "@ckeditor/ckeditor5-angular": "6.0.1",
-    "@ckeditor/ckeditor5-build-classic": "40.2.0",
     "@fortawesome/angular-fontawesome": "^1.0.0",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@fortawesome/fontawesome-svg-core": "6.2.1",
@@ -54,6 +52,7 @@
     "@ngx-translate/http-loader": "^16.0.1",
     "@swimlane/ngx-graph": "^10.0.0",
     "@tailwindcss/forms": "^0.5.4",
+    "@tinymce/tinymce-angular": "^9.1.1",
     "chart.js": "^4.5.1",
     "d3": "^7.9.0",
     "exceljs": "^4.4.0",
@@ -64,6 +63,7 @@
     "moment": "^2.29.4",
     "ngx-mat-select-search": "^7.0.10",
     "rxjs": "7.8.1",
+    "tinymce": "^8.2.2",
     "tslib": "^2.0.0",
     "vkbeautify": "^0.99.3",
     "zone.js": "0.15.1"

package.json

@@ -81,15 +81,17 @@
 
     <mat-card-content>
       <div role="editor" class="editor-wrapper">
-        <label for="ckeditor" class="required-label required-label-ckeditor">
+        <label for="template-text-editor" class="required-label required-label-editor">
           {{ 'labels.inputs.Text' | translate }} <span class="required-asterisk">*</span>
         </label>
-        <ckeditor
-          #ckEditor
-          [editor]="Editor"
-          (change)="onEditorChange($event)"
-          [data]="templateData.template?.text"
-        ></ckeditor>
+        <editor
+          id="template-text-editor"
+          #tinymceEditor
+          [init]="tinymceConfig"
+          [initialValue]="templateData.template?.text || ''"
+          licenseKey="gpl"
+          [formControl]="templateForm.controls.text"
+        ></editor>
       </div>
     </mat-card-content>
 

src/app/templates/create-edit-template/create-edit-template.component.html

@@ -9,16 +9,13 @@ import {
 } from '@angular/forms';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
-/** CKEditor5 Imports */
-import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
-
 /** Custom Imports */
 import { clientParameterLabels, loanParameterLabels, repaymentParameterLabels } from '../template-parameter-labels';
 
 /** Custom Services */
 import { TemplatesService } from '../templates.service';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
+import { EditorComponent, EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
 import {
   MatAccordion,
   MatExpansionPanel,
@@ -37,18 +34,37 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     FaIconComponent,
-    CKEditorModule,
+    EditorModule,
     MatAccordion,
     MatExpansionPanel,
     MatExpansionPanelHeader,
     MatExpansionPanelTitle
+  ],
+  providers: [
+    {
+      provide: TINYMCE_SCRIPT_SRC,
+      useValue: 'assets/tinymce/tinymce.min.js'
+    }
   ]
 })
 export class CreateEditComponent implements OnInit {
-  /** CKEditor5 */
-  public Editor = ClassicEditor;
-  /** CKEditor5 Template Reference */
-  @ViewChild('ckEditor', { static: true }) ckEditor: any;
+  /** TinyMCE instance configuration */
+  tinymceConfig = {
+    base_url: 'assets/tinymce',
+    suffix: '.min',
+    menubar: false,
+    branding: false,
+    height: 320,
+    forced_root_block: false,
+    statusbar: false,
+    elementpath: false,
+    resize: false,
+    plugins: 'lists link table media codesample',
+    toolbar:
+      'undo redo | blocks | bold italic underline | link | numlist bullist outdent indent | alignleft aligncenter alignright alignjustify | table media | removeformat'
+  };
+  /** TinyMCE component reference */
+  @ViewChild('tinymceEditor', { static: false }) tinymceEditor: EditorComponent;
 
   /** Template form. */
   templateForm: UntypedFormGroup;
@@ -166,6 +182,7 @@ export class CreateEditComponent implements OnInit {
         });
       }
       this.setEditorContent('');
+      this.templateForm.get('text').setValue('');
     });
     if (this.mode === 'create') {
       this.templateForm.get('entity').patchValue(0);
@@ -192,44 +209,31 @@ export class CreateEditComponent implements OnInit {
   }
 
   /**
-   * Adds text to CKEditor at cursor position.
+   * Adds text to the editor at cursor position.
    * @param {string} label Template parameter label.
    */
   addText(label: string) {
-    if (this.ckEditor && this.ckEditor.editorInstance) {
-      this.ckEditor.editorInstance.model.change((writer: any) => {
-        const insertPosition = this.ckEditor.editorInstance.model.document.selection.getFirstPosition();
-        writer.insertText(label, insertPosition);
-      });
-    }
+    this.tinymceEditor?.editor?.insertContent(label);
   }
 
   /**
-   * Gets the contents of CKEditor.
+   * Gets the contents of the editor.
    */
   getEditorContent() {
-    if (this.ckEditor && this.ckEditor.editorInstance) {
-      return this.ckEditor.editorInstance.getData();
-    }
-    return '';
+    return this.tinymceEditor?.editor?.getContent({ format: 'html' }) || '';
   }
 
   /**
-   * Sets the contents of CKEditor.
+   * Sets the contents of the editor.
    * @param {string} content Editor Content
    */
   setEditorContent(content: string) {
-    if (this.ckEditor && this.ckEditor.editorInstance) {
-      return this.ckEditor.editorInstance.setData(content);
+    if (this.tinymceEditor?.editor) {
+      this.tinymceEditor.editor.setContent(content || '');
     }
     return '';
   }
 
-  onEditorChange(event: any) {
-    const editorContent = event.editor.getData();
-    this.templateForm.get('text').setValue(editorContent);
-  }
-
   /**
    * Submits a template.
    */

src/app/templates/create-edit-template/create-edit-template.component.ts

@@ -2,7 +2,7 @@
 import { NgModule } from '@angular/core';
 
 /** Custom Modules */
-import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
+import { EditorModule } from '@tinymce/tinymce-angular';
 import { SharedModule } from '../shared/shared.module';
 import { DirectivesModule } from '../directives/directives.module';
 import { TemplatesRoutingModule } from './templates-routing.module';
@@ -19,7 +19,7 @@ import { CreateEditComponent } from './create-edit-template/create-edit-template
  */
 @NgModule({
   imports: [
-    CKEditorModule,
+    EditorModule,
     SharedModule,
     DirectivesModule,
     TemplatesRoutingModule,

src/app/templates/templates.module.ts

@@ -43,9 +43,3 @@ interface Window {
 }
 
 declare module 'chart.js';
-
-declare module '@ckeditor/ckeditor5-build-classic' {
-  const ClassicEditorBuild: any;
-
-  export = ClassicEditorBuild;
-}