work in progress - making Quill.js work

package.json

@@ -11,42 +11,43 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.1.1",
-    "@angular/cdk": "^6.4.2",
-    "@angular/common": "^6.1.1",
-    "@angular/compiler": "^6.1.1",
-    "@angular/core": "^6.1.1",
-    "@angular/flex-layout": "^6.0.0-beta.16",
-    "@angular/forms": "^6.1.1",
-    "@angular/http": "^6.1.1",
-    "@angular/material": "^6.4.2",
-    "@angular/platform-browser": "^6.1.1",
-    "@angular/platform-browser-dynamic": "^6.1.1",
-    "@angular/router": "^6.1.1",
-    "@types/file-saver": "^1.3.0",
-    "core-js": "^2.5.4",
+    "@angular/animations": "^6.1.10",
+    "@angular/cdk": "^6.4.7",
+    "@angular/common": "^6.1.10",
+    "@angular/compiler": "^6.1.10",
+    "@angular/core": "^6.1.10",
+    "@angular/flex-layout": "^6.0.0-beta.18",
+    "@angular/forms": "^6.1.10",
+    "@angular/http": "^6.1.10",
+    "@angular/material": "^6.4.7",
+    "@angular/platform-browser": "^6.1.10",
+    "@angular/platform-browser-dynamic": "^6.1.10",
+    "@angular/router": "^6.1.10",
+    "@types/file-saver": "^1.3.1",
+    "@types/quill": "^1.3.10",
+    "core-js": "^2.6.0",
     "file-saver": "^1.3.8",
     "quill": "^1.3.6",
-    "rxjs": "^6.0.0",
+    "rxjs": "^6.3.3",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.11.1",
-    "@angular/cli": "~6.1.2",
-    "@angular/compiler-cli": "^6.1.1",
-    "@angular/language-service": "^6.1.1",
-    "@types/jasmine": "~2.8.6",
-    "@types/jasminewd2": "~2.0.3",
+    "@angular/cli": "^6.2.8",
+    "@angular/compiler-cli": "^6.1.10",
+    "@angular/language-service": "^6.1.10",
+    "@types/jasmine": "^2.8.12",
+    "@types/jasminewd2": "^2.0.6",
     "@types/node": "~8.9.4",
     "codelyzer": "~4.2.1",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "^3.1.3",
     "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.0",
+    "karma-coverage-istanbul-reporter": "^2.0.4",
     "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "^5.4.0",
+    "protractor": "^5.4.1",
     "ts-node": "~5.0.1",
     "tslint": "~5.9.1",
     "typescript": "~2.9.2"

src/app/app.module.ts

@@ -21,6 +21,7 @@ import { FlexLayoutModule } from "@angular/flex-layout";
 
 
 
+
 @NgModule({
   declarations: [
     AppComponent,

src/app/superadmin/about-text/about-text.component.html

-<form [formGroup]="aboutTextForm" (ngSubmit)="setAboutText()">
+<!-- <form [formGroup]="aboutTextForm" (ngSubmit)="setAboutText()">
   <div fxLayout="row">
     <button mat-raised-button type="submit">
         <mat-icon>save</mat-icon>
@@ -6,4 +6,20 @@
   </div>
   <br>
   <textarea matInput formControlName="myTextArea" cols="90" rows="20" placeholder="Enter text here..."></textarea>
-</form>
\ No newline at end of file
+</form> -->
+
+<form [formGroup]="aboutTextForm" (ngSubmit)="setAboutText()">
+  <div fxLayout="row">
+    <button mat-raised-button>
+        <mat-icon>save</mat-icon>
+    </button>
+  </div>
+  <br>
+
+</form>
+
+<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
+<div id="editor-container"></div>
+
+
+<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

src/app/superadmin/about-text/about-text.component.ts

@@ -11,6 +11,9 @@ import { ConfirmDialogComponent, ConfirmDialogData, MessageDialogComponent,
 import { MainDatastoreService } from './../../admin/maindatastore.service';
 import { BackendService as BackendServiceReadOnly } from './../../backend.service';
 import { BackendService as BackendServiceSuperAdmin } from './../backend.service';
+import * as Quill from'quill';
+
+
 
 @Component({
   selector: 'itc-about-text',
@@ -20,6 +23,7 @@ import { BackendService as BackendServiceSuperAdmin } from './../backend.service
 export class AboutTextComponent implements OnInit {
   aboutTextForm: FormGroup;
   public dataLoading = false;
+  aboutText: string;
 
   constructor(
     private mds: MainDatastoreService,
@@ -35,6 +39,18 @@ export class AboutTextComponent implements OnInit {
     });
     this.mds.pageTitle$.next('');
     this.bsRO.getAboutText().subscribe(t => this.aboutTextForm.get('myTextArea').setValue(t as string));
+    
+    var quill = new quill('#editor-container', {
+      modules: {
+        toolbar: [
+          [{ header: [1, 2, false] }],
+          ['bold', 'italic', 'underline'],
+          ['image', 'code-block']
+        ]
+      },
+      placeholder: 'Compose an epic...',
+      theme: 'snow'  // or 'bubble'
+    });
   }
 
   setAboutText() {
@@ -49,4 +65,6 @@ export class AboutTextComponent implements OnInit {
     });
   }
 
+
+
 }