Changed to Quill.js for better editor support

Author: codingdefined

src/LetsDisc.Web.Host/appsettings.json

@@ -5,7 +5,7 @@
   "App": {
     "ServerRootAddress": "http://localhost:21021/",
     "ClientRootAddress": "http://localhost:4200/",
-    "CorsOrigins": "http://localhost:4200,http://localhost:8080,http://localhost:8081"
+    "CorsOrigins": "http://localhost:4200,http://localhost:8080,http://localhost:8081,http://localhost:8085/"
   },
   "Authentication": {
     "JwtBearer": {

src/LetsDisc.Web.Host/package-lock.json

@@ -58,8 +58,10 @@
     "ngx-bootstrap": "^3.0.0",
     "ngx-chips": "^2.0.0-beta.0",
     "ngx-pagination": "^3.0.3",
+    "ngx-quill": "^7.1.2",
     "node-waves": "^0.7.5",
     "push.js": "1.0.4",
+    "quill": "^1.3.6",
     "raphael": "^2.2.7",
     "rxjs": "^6.0.0",
     "simple-line-icons": "^2.4.1",

src/LetsDisc.Web.Host/package.json

@@ -44,6 +44,7 @@ import { UserDetailComponent } from './users/user-detail/user-detail.component';
 import { PrivacyComponent } from './privacy/privacy.component';
 import { ContactComponent } from './contact/contact.component';
 import { SearchPostsComponent } from './search-posts/search-posts.component';
+import { QuillModule } from 'ngx-quill';
 
 @NgModule({
     declarations: [
@@ -88,7 +89,8 @@ import { SearchPostsComponent } from './search-posts/search-posts.component';
         NgxPaginationModule,
         CKEditorModule,
         TagInputModule,
-        SocialLoginModule
+        SocialLoginModule,
+        QuillModule.forRoot()
     ],
     providers: [
     ]

src/LetsDisc.Web.Host/src/app/app.module.ts

@@ -23,6 +23,7 @@
 }
 
 .invalid-feedback {
+    display:block;
     color: red;
     padding: 5px;
     font-size: 12px;
@@ -34,4 +35,8 @@ input.ng-touched.ng-invalid {
 
 .tag-input.ng-touched.ng-invalid {
     border: 1px solid red !important;
+}
+
+.quill-body {
+    height: 200px;
 }

src/LetsDisc.Web.Host/src/app/posts/create-question/create-question.component.css

@@ -27,7 +27,35 @@ <h3>
             <div class="form-group">
                 <div class="form-line">
                     <label for="question-body">{{l('Body')}}</label>
-                    <ckeditor id="question-body" [(ngModel)]="question.body" [editor]="Editor" [config]="config" name="Body" data="<p></p>" class="body" #body="ngModel" required></ckeditor>
+                    <!--<ckeditor id="question-body" [(ngModel)]="question.body" [editor]="Editor" [config]="config" name="Body" data="<p></p>" class="body" #body="ngModel" required></ckeditor>-->
+                    <quill-editor id="question-body" [(ngModel)]="question.body" name="Body" class="body" #body="ngModel" [required]="true" [styles]="{height: '250px'}" placeholder="Type the content here!">
+                        <div quill-editor-toolbar>
+                            <span class="ql-formats">
+                                <button class="ql-bold" [title]="'Bold'"></button>
+                                <button class="ql-italic" [title]="'Italic'"></button>
+                            </span>
+                            <span class="ql-formats">
+                                <button class="ql-blockquote" [title]="'Block Quote'"></button>
+                                <button class="ql-code-block" [title]="'Code Block'"></button>
+                            </span>
+                            <span class="ql-formats">
+                                <button class="ql-list" value="ordered" [title]="'Ordered List'"></button>
+                                <button class="ql-list" value="bullet" [title]="'Ordered List'"></button>
+                            </span>
+                            <span class="ql-formats">
+                                <select class="ql-size" [title]="'Size'">
+                                    <option selected></option>
+                                    <option value="small"></option>
+                                    <option value="large"></option>
+                                    <option value="huge"></option>
+                                </select>
+                            </span>
+                            <span class="ql-formats">
+                                <button class="ql-link" [title]="'Insert Link'"></button>
+                                <button class="ql-image" [title]="'Image'"></button>
+                            </span>
+                        </div>
+                    </quill-editor>
                 </div>
                 <div *ngIf="body.invalid && (body.dirty || body.touched)" class="invalid-feedback">
                     <div *ngIf="body.errors.required">
@@ -36,6 +64,11 @@ <h3>
                 </div>
             </div>
 
+            <div class="form-group">
+                <label for="question-body">Preview</label>
+                <quill-view [content]="question.body" theme="snow"></quill-view>
+            </div>
+
             <div class="form-group">
                 <label for="question-tags">{{l('Tags')}}</label>
                 <tag-input [(ngModel)]="items"
@@ -56,7 +89,7 @@ <h3>
                 </div>
             </div>
 
-                <button type="submit" [disabled]="!myform.form.valid || saving" class="btn btn-primary">Post Your Question</button>
+            <button type="submit" [disabled]="!myform.form.valid || saving" class="btn btn-primary">Post Your Question</button>
         </form>
     </div>
 </div>

src/LetsDisc.Web.Host/src/app/posts/create-question/create-question.component.html

@@ -23,9 +23,8 @@
 }
 
 .question-body {
-    margin-top: 10px;
-    margin-left: 8%;
-    min-height: 120px;
+    margin-top:0px;
+    min-height: 140px;
 }
 
 .vote-layout {