tinyMCE added

angular.json

@@ -25,6 +25,7 @@
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/assets",
+              { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" },
               {
                 "glob": "**/*",
                 "input": "src/assets/",
@@ -38,7 +39,9 @@
               }
             ],
             "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [
+              "node_modules/tinymce/tinymce.min.js"
+            ]
           },
           "configurations": {
             "production": {

package.json

@@ -26,9 +26,11 @@
     "@angular/platform-server": "^18.2.8",
     "@angular/router": "^18.0.0",
     "@ngrx/signals": "^18.1.0",
+    "@tinymce/tinymce-angular": "^8.0.1",
     "express": "^4.21.1",
     "ng-zorro-antd": "^18.1.1",
     "rxjs": "~7.8.0",
+    "tinymce": "^7.6.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
   },

src/app/+admin/management/job/feature/job-form.component.ts

@@ -8,16 +8,21 @@ import { JobApi } from '../data-access/model/job-manager.model';
 import { NzNotificationService } from 'ng-zorro-antd/notification'
 import { catchError, of, tap } from 'rxjs';
 import { NzFormModule } from 'ng-zorro-antd/form';
+import { EditorComponent, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular'
+import { CommonModule } from '@angular/common';
 
 @Component({
     selector: 'job-form',
     standalone: true,
     imports: [
+        CommonModule,
         NzButtonModule,
         NzModalModule,
         ReactiveFormsModule,
-        NzFormModule
+        NzFormModule,
+        EditorComponent,
     ],
+    providers: [{ provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }],
     template: `
         <div class="tw-w-full tw-grid tw-justify-items-end">
             <button nz-button nzType="primary" (click)="isCreate = true">Create new job</button>
@@ -29,8 +34,7 @@ import { NzFormModule } from 'ng-zorro-antd/form';
                 <div>
                     <label>Type</label>
                     <select class="tw-border tw-rounded-lg tw-w-full tw-h-8" formControlName="type">
-                        <option value="Full Time">Full Time</option>
-                        <option value="Part Time">Part Time</option>
+                        <option *ngFor="let item of jobTypeItems" (value)="item"> {{ item }} </option>
                     </select>
                 </div>
                 <div class="tw-col-span-2">
@@ -78,7 +82,7 @@ import { NzFormModule } from 'ng-zorro-antd/form';
                     <nz-form-item>
                         <nz-form-control nzErrorTip="Please enter description!">
                             <nz-input-group>
-                            <textarea class="tw-border tw-rounded-lg tw-w-full tw-h-40" type="text" formControlName="description"></textarea>
+                            <editor apiKey="4nrurq8srrs4laamy5l9tbrd2je0huj4bu3z3mweu864gkfj" [init]="init" formControlName="description"></editor>
                             </nz-input-group>
                         </nz-form-control>
                     </nz-form-item>
@@ -122,9 +126,9 @@ import { NzFormModule } from 'ng-zorro-antd/form';
 
 export class JobFormComponent {
     @Output() ReloadData = new EventEmitter();
-
     isCreate: boolean = false;
     jobCreatingFormGroup: FormGroup;
+    jobTypeItems = ['Full Time', 'Part Time'];
 
     constructor(private _fb: FormBuilder,
         private _service: JobManagerService,
@@ -142,6 +146,10 @@ export class JobFormComponent {
         });
     }
 
+    init: EditorComponent['init'] = {
+        plugins: 'lists link image table code help wordcount'
+    };
+
     createNotification(type: string, title: string, message: string): void {
         this._notification.create(
             type,

src/app/+admin/management/job/feature/job-list.component.ts

@@ -3,7 +3,7 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
 import { NzTableModule } from 'ng-zorro-antd/table';
 import { CommonModule } from '@angular/common';
 import { JobManagerService } from '../data-access/service/job-manager.service';
-import { Observable, Observer, catchError, of, tap } from 'rxjs';
+import { catchError, of, tap } from 'rxjs';
 import { ResponseResult, Rows } from '../../../../shared/data-access/interface/response.type';
 import { JobApi } from '../data-access/model/job-manager.model';
 import { NzButtonModule } from 'ng-zorro-antd/button';
@@ -13,7 +13,8 @@ import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators }
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
+import { NzUploadModule } from 'ng-zorro-antd/upload';
+import { EditorComponent } from '@tinymce/tinymce-angular';
 
 @Component({
     selector: 'job-list',
@@ -30,6 +31,7 @@ import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
         NzIconModule,
         FormsModule,
         NzUploadModule,
+        EditorComponent,
     ],
     styles: `
         nz-table[_ngcontent-jjj-c198] nz-pagination[_ngcontent-jjj-c198] {
@@ -49,8 +51,7 @@ import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
                 <div>
                     <label>Type</label>
                     <select class="tw-border tw-rounded-lg tw-w-full tw-h-8" formControlName="type">
-                        <option value="Full Time">Full Time</option>
-                        <option value="Part Time">Part Time</option>
+                        <option *ngFor="let item of jobTypeItems" (value)="item">{{ item }}</option>
                     </select>
                 </div>
                 <div class="tw-col-span-2">
@@ -98,7 +99,7 @@ import { NzUploadFile, NzUploadModule } from 'ng-zorro-antd/upload';
                     <nz-form-item>
                         <nz-form-control nzErrorTip="Please enter description!">
                             <nz-input-group>
-                            <textarea id=myTextarea class="tw-border tw-rounded-lg tw-w-full tw-h-40" type="text" formControlName="description"></textarea>
+                            <editor apiKey="4nrurq8srrs4laamy5l9tbrd2je0huj4bu3z3mweu864gkfj" [init]="init" formControlName="description"></editor>
                             </nz-input-group>
                         </nz-form-control>
                     </nz-form-item>
@@ -249,6 +250,10 @@ export class JobListComponent implements OnInit {
 
     }
 
+    init: EditorComponent['init'] = {
+        plugins: 'lists link image table code help wordcount'
+    };
+
     createNotification(type: string, title: string, message: string) {
         this._notification.create(
             type,

src/app/+shell/ui/components/footer/feature/footer.component.html

@@ -2,27 +2,15 @@
     <div class="tw-w-full tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3">
         <div>
             <p class="tw-text-lg tw-font-semibold">Text</p>
-            <p>Text text text</p>
-            <p>Text text text</p>
-            <p>Text text text</p>
-            <p>Text text text</p>
-            <p>Text text text</p>
+            <p *ngFor="let item of [0, 1, 2, 3, 4, 5]">Text text text</p>
         </div>
         <div>
             <p class="tw-text-lg tw-font-semibold">Text</p>
-            <p>Text text text</p>
-            <p>Text text text</p>
-            <p>Text text text</p>
-            <p>Text text text</p>
-            <p>Text text text</p>
+            <p *ngFor="let item of [0, 1, 2, 3, 4, 5, 6]">Text text text</p>
         </div>
         <div>
             <p class="tw-text-lg tw-font-semibold">Text</p>
-            <p>Text text text</p>
-            <p>Text text text</p>
-            <p>Text text text</p>
-            <p>Text text text</p>
-            <p>Text text text</p>
+            <p *ngFor="let item of [0, 1, 2, 3, 4, 5]">Text text text</p>
         </div>
         <div class="tw-col-span-full tw-text-center tw-pt-6">
             <p class="tw-opacity-50">2024 Copyright ... Angular</p>