Merge pull request #2818 from shubhamkumar9199/feat/replace-ckeditor-with-tinymce-fix

WEB-310-feat(editor): replace CKEditor5 with TinyMCE

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

@@ -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.ts

@@ -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/templates.module.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,