Add wysiwyg rich text editor in admin backoffice for description and …

…testimonial fields
PnX-SI · Apr 6, 2024 · cd06dc3 · cd06dc3 · camillemonchicourt · Apr 7, 2024
1 parent f5938aa
commit cd06dc3
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 6 deletions.
diff --git a/admin/angular.json b/admin/angular.json
@@ -31,7 +31,16 @@
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "./node_modules/leaflet-draw/dist/leaflet.draw.css",
               "node_modules/ngx-toastr/toastr.css" ,
-              "./node_modules/leaflet/dist/leaflet.css"
+              "./node_modules/leaflet/dist/leaflet.css",
+              "node_modules/@syncfusion/ej2-base/styles/material.css",
+              "node_modules/@syncfusion/ej2-icons/styles/material.css",
+              "node_modules/@syncfusion/ej2-buttons/styles/material.css",
+              "node_modules/@syncfusion/ej2-splitbuttons/styles/material.css",
+              "node_modules/@syncfusion/ej2-inputs/styles/material.css",
+              "node_modules/@syncfusion/ej2-lists/styles/material.css",
+              "node_modules/@syncfusion/ej2-navigations/styles/material.css",
+              "node_modules/@syncfusion/ej2-popups/styles/material.css",
+              "node_modules/@syncfusion/ej2-richtexteditor/styles/material.css"
             ],
             "scripts": ["node_modules/leaflet/dist/leaflet.js"]
           },

diff --git a/admin/package.json b/admin/package.json
@@ -27,6 +27,7 @@
     "@ng-bootstrap/ng-bootstrap": "^4.0.0",
     "@ng-select/ng-select": "^2.12.1",
     "@swimlane/ngx-datatable": "^14.0.0",
+    "@syncfusion/ej2-angular-richtexteditor": "^18.1.54",
     "@types/jsts": "^0.17.12",
     "@types/lodash": "^4.14.118",
     "@types/moment": "^2.13.0",

diff --git a/admin/src/app/add-site/add-site.component.html b/admin/src/app/add-site/add-site.component.html
@@ -108,14 +108,20 @@
           </div>
           <div class="form-group">
             <label class="label" for="desc">DESCRIPTION</label>
-            <textarea InputFeedBack class="form-control" formControlName="desc_site"
-              placeholder="Ecrivez ici la description du site" id="desc" rows="3"></textarea>
+            <div id="descRTE">
+              <ejs-richtexteditor #defaultRTE id='desc' [toolbarSettings]='tools' InputFeedBack formControlName="desc_site" placeholder="Ecrivez ici la description du site">
+                <ng-template #descRTE></ng-template>
+              </ejs-richtexteditor>
+            </div>
             <app-form-error controlName="desc_site" errorKey="required"></app-form-error>
           </div>
           <div class="form-group">
-            <label class="label" for="testim">TÉMOIGNAGE</label>
-            <textarea InputFeedBack class="form-control" formControlName="testim_site"
-              placeholder="Ecrivez ici les témoignages" id="testim" rows="3"></textarea>
+            <label class="label" for="testim">TÉMOIGNAGES</label>
+            <div id="testimRTE">
+              <ejs-richtexteditor #defaultRTE id='testim' [toolbarSettings]='tools' InputFeedBack formControlName="testim_site" placeholder="Ecrivez ici les témoignages">
+                <ng-template #testimRTE></ng-template>
+              </ejs-richtexteditor>
+            </div>
             <app-form-error controlName="testim_site" errorKey="required"></app-form-error>
           </div>
 

diff --git a/admin/src/app/add-site/add-site.component.ts b/admin/src/app/add-site/add-site.component.ts
@@ -16,13 +16,28 @@ import { NgxSpinnerService } from 'ngx-spinner';
 import { ObservatoriesService } from '../services/observatories.service';
 import { ObservatoryType } from '../types';
 import { DbConfService, IDBConf } from '../services/dbconf.service';
+import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
 
 @Component({
   selector: 'app-add-site',
   templateUrl: './add-site.component.html',
   styleUrls: ['./add-site.component.scss'],
+  providers: [ToolbarService, LinkService, ImageService, HtmlEditorService],
 })
 export class AddSiteComponent implements OnInit, OnDestroy {
+  /* RichTextEditor toolbar configuration --> Hide image upload tool */
+  public tools: object = {
+    type: 'Expand',
+    items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
+      'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
+      'LowerCase', 'UpperCase', '|',
+      'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
+      'Outdent', 'Indent', '|',
+      'CreateLink',
+      /*'Image', */
+      '|', 'ClearFormat', 'Print',
+      'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
+  };
   selectedFile: File[];
   modalRef: NgbModalRef;
   selectedSubthemes = [];

diff --git a/admin/src/app/app.module.ts b/admin/src/app/app.module.ts
@@ -30,6 +30,7 @@ import { ObservatoriesComponent } from './observatories/observatories.component'
 import { ObservatoriesService } from './services/observatories.service';
 import { ObservatoryComponent } from './observatory/observatory.component';
 import { DbConfService } from './services/dbconf.service';
+import { RichTextEditorAllModule } from '@syncfusion/ej2-angular-richtexteditor';
 
 @NgModule({
   declarations: [
@@ -59,6 +60,7 @@ import { DbConfService } from './services/dbconf.service';
     BrowserAnimationsModule,
     ToastrModule.forRoot(),
     NgxSpinnerModule,
+    RichTextEditorAllModule,
   ],
   providers: [
     LoginService,