7/10/2019 - 3:04 AM

Angular: WYSIWYG Editor with JS Quill

readme.md

Rendered
Source

Library ngx-quill

Quill configuration

Installing library

npm install ngx-quill
for projects using Angular < v5.0.0 install npm install ngx-quill@1.6.0
install @angular/core, @angular/common, @angular/forms, @angular/platform-browser, quill and rxjs - peer dependencies of ngx-quill include theme stylings: bubble.css, snow.css of quilljs in your index.html, or add them in your css/scss files with @import statements, or add them external stylings in your build process.

How to use it

import `QuillModule` from `ngx-quill`

import { QuillModule } from 'ngx-quill'

add `QuillModule` to the imports of your `NgModule`:

@NgModule({
  imports: [
    ...,

    QuillModule.forRoot()
  ],
  ...
})
class YourModule { ... }

use <quill-editor></quill-editor> in your templates to add a default quill editor
do not forget to include quill + theme css in your buildprocess, module or index.html!

<!-- quill style -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

for builds with angular-cli >=6 only add quilljs to your scripts or scripts section of angular.json, if you need it as a global :)!

Tips

html sample

<quill-editor formControlName="description"
  placeholder="Enter Description text...."
  format="html"
  [styles]=editorStyle
  [modules]="editorConfig"
  (onContentChanged)="onEditorContentChange($event)"
  id="field_description">
</quill-editor>

Setting limit to text

onEditorContentChange(e: any) {
  this.limitEditTextSize(e);
}

limitEditTextSize(e: any) {
  const textLimit = 10000;
  if (e.editor.getLength() > textLimit) {
    e.editor.deleteText(textLimit, e.editor.getLength());
  }
}

Defining configuration and style

editorConfig = {
  toolbar: [
    ['bold', 'italic', 'underline'], // toggled buttons
    [{ list: 'ordered' }, { list: 'bullet' }],
    ['link']
  ]
};

editorStyle = {
  height: '250px'
};

Show formatted content

 <span [innerHTML]="course.description"></span>

Fix bold format

On styles.scss

strong {
    font-weight: bold !important;
}

Jhipster

To use Quill extensions on jhipster, such as quill-image-resize, it is important to defile window.Quill as a global variable. Edit file webpack.common.js

module.exports = (options) => (
  {
  // ...
    pluguins: [
      // ...
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js'
      }),
      // ...
    ]
  }
);

Image Resize

npm install quill-image-resize-module
Register ImageResize module on component
Turn ImageResize option on in Quill Edit

// Component class
import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;

import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

editorConfig = {
        toolbar: [
            ['bold', 'italic', 'underline'], // toggled buttons
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link'],
            ['image', 'video']
        ],
        imageResize: {},
    };

<quill-editor formControlName="description"
                                  placeholder="Enter Description text...."
                                  format="html"
                                  [styles]=editorStyle
                                  [modules]="editorConfig"

                                  (onContentChanged)="onEditorContentChange($event)"
                                  id="field_description">
                    </quill-editor>

shared-libs.module.ts

\!h import { QuillModule } from 'ngx-quill';

@NgModule({
\!h    imports: [NgbModule.forRoot(), InfiniteScrollModule, CookieModule.forRoot(), FontAwesomeModule, QuillModule.forRoot()],
    exports: [FormsModule, ReactiveFormsModule, CommonModule, NgbModule, NgJhipsterModule, InfiniteScrollModule, FontAwesomeModule]
})
export class FrontendSharedLibsModule {
}

model.module.ts

import { QuillModule } from 'ngx-quill';

@NgModule({
    imports: [FrontendSharedModule, RouterModule.forChild(ENTITY_STATES), QuillModule.forRoot()]

index.html

    <link rel="manifest" href="manifest.webapp" />
    <link rel="stylesheet" href="content/css/loading.css">
    <!-- jhipster-needle-add-resources-to-root - JHipster will add new resources here -->
    <!-- quill style -->
\!h    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>

update.component.ts

import { FormBuilder, FormControl, FormGroup } from '@angular/forms';

@Component({
    selector: 'jhi-course-update',
    templateUrl: './course-update.component.html'
})
export class CourseUpdateComponent implements OnInit {
  // using reactive forms
  form: FormGroup;
    
    // editor configuration
    editorConfig = {
        toolbar: [
            ['bold', 'italic', 'underline'], // toggled buttons
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['link']
        ]
    };
    // editor style
    editorStyle = {
        height: '250px'
    };
    
    constructor(
        protected courseService: CourseService,
        protected experienceService: ExperienceService,
        protected accountService: AccountService,
        protected activatedRoute: ActivatedRoute,
        protected eventManager: JhiEventManager,
        protected jhiAlertService: JhiAlertService,
\!h        protected fb: FormBuilder
    ) {}
    
    setNewForm() {
        this.form = new FormGroup({
            id: new FormControl(),
            institutionId: new FormControl(),
            name: new FormControl(),
            description: new FormControl()
        });
    }

    setFormValue(c: ICourse) {
        this.form = this.fb.group({
            id: c.id,
            institutionId: c.institutionId,
            name: c.name,
            description: c.description
        });
    }

    getFormValue() {
        this.course.name = this.form.get('name').value;
        this.course.description = this.form.get('description').value;
        this.course.institutionId = this.form.get('institutionId').value;

        console.log('--description: ' + this.course.description);
    }
    // editor change callback
    onEditorContentChange(e: any) {
        this.limitEditTextSize(e);
    }
    // set limit to editor text
    limitEditTextSize(e: any) {
        const textLimit = 10000;
        if (e.editor.getLength() > textLimit) {
            e.editor.deleteText(textLimit, e.editor.getLength());
        }
    }
    
    save() {
        this.isSaving = true;
        this.getFormValue();
    }
}

update.component.html

<form [formGroup]="form" name="editForm" role="form" novalidate (ngSubmit)="save()" #editForm="ngForm">
  <!-- Id -->
  <div class="form-group" [hidden]="!course.id">
    <label for="id" jhiTranslate="global.field.id">ID</label>
    <input type="text" class="form-control" id="id" name="id"
   formControlName="id" readonly />
  </div>
  <!-- Name -->
  <div class="form-group">
    <label class="form-control-label" jhiTranslate="frontendApp.courseCourse.name" for="field_name">Name</label>
    <input type="text" class="form-control" name="name" id="field_name"
     formControlName="name" required/>
    <div [hidden]="!(form.get('name')?.dirty && form.get('name')?.invalid)">
      <small class="form-text text-danger"
       [hidden]="!form.get('name')?.errors?.required" jhiTranslate="entity.validation.required">
        This field is required.
      </small>
    </div>
  </div>
  <!-- WYSIWYG Editor -->
  <div class="form-group">
    <label class="form-control-label" jhiTranslate="frontendApp.courseCourse.description" for="description">Description</label>
    <quill-editor formControlName="description"
      placeholder="Enter Description text...."
      format="html"
      [styles]=editorStyle
      [modules]="editorConfig"
      (onContentChanged)="onEditorContentChange($event)"
      id="field_description">
    </quill-editor>
  </div>
</form>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster