Wednesday, September 26, 2018

Angular WYSIWYG HTML Rich Text Editor tutorials with examples | Quill Editor

In this blog post, We are going to learn ngx-quill WYSIWYG rich editor with integration in Angular 2/4/5/6 versions.

WYSIWYG  Editor

It is abbreviated as what you see is what you get.It is a UI component used to create/design documents online, you can see the output of the document online. This enables the developer to not write a code for layout and only focus on actual content.
There are a lot of open source frameworks in which we can create a WYSIWYG rich text editor online in Angular Applications.

Following are some of the popular Angular WYSIWYG editors
  • ngx-quill WYSIWYG Editor
  • Angular Froala WYSIWYG Editor 
  • Angular - CKEditor component
  • ngx-editor

Quill JS  Wysiwyg rich text editor

Quill is a javascript opensource framework for WYSIWYG rich text editor. It is a very popular editor for javascript and jquery frameworks.
ngx-quill is an angular version of QuillJS framework. It supports all angular 2/4/5/6 versions.

ngx-quill  tutorials

In the below sections, It covers the features, notes and examples and angular versions.

Features and notes

  • It is based on custom modules, Which can configure or extend the modules  Example, can configure pre-built-in toolbar or custom toolbar
  • Supports bubble/snow theme styles, Default CSS themes are snow
  • Supports Angular Two way binding using ngModel
  • Can override inbuilt styles using custom CSS styles
  • Inbuilt events - onEditorCreated  - this will be called when the editor is created its instance. onContentChanged  - this will be fired when content is modified or updated. onSelectionChanged  - selected content update event.

Angular Application Generation using CLI

Angular CLI is an Application generator for creating project structure.
This includes generation of typescript configuration, component and test files.

npm install and setup

It provides an npm package to integrate into an Angular application.
ngx-quill has a dependency of quill js framework.
npm install ngx-quill --save
npm install quill --save
This installs ngx-quill package in node_modules and added ngx-quill as a dependency in package.json of a project
"dependencies": {
    "ngx-quill": "^3.6.0",
    "quill": "^1.3.6"
 ----------------
 }

Import QuillModule in Angular application

The below code shows how to import Third party module into Application module To make use of third-party modules, First import module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import { QuillModule } from 'ngx-quill';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    QuillModule, // Add Quill Angular WYSIWYG Editor
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:
        [CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule { }

Include Style in index.html

Either you need to copy stylesheets to src/assets folder and include in angular.json or include Quill CDN URL in index.xml
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.6/quill.snow.min.css">
Html Template changes
We are going to add <quill-editor> </quill-editor> in HTML template file
app.component.html
<div style="text-align:center">
   <h1>
    Primeng Quill WYSIWYG Component Example
</h1>
</div>
<quill-editor>
<div quill-editor-toolbar>
<span class="ql-formats">
  <button class="ql-bold" [title]="'Bold'"></button>
</span>
<span class="ql-formats">
  <select class="ql-align" [title]="'Aligment'">
    <option selected></option>
    <option value="center"></option>
    <option value="right"></option>
    <option value="justify"></option>
  </select>
  <select class="ql-align" [title]="'Aligment2'">
    <option selected></option>
    <option value="center"></option>
    <option value="right"></option>
    <option value="justify"></option>
  </select>
</span>
</div>
</quill-editor>
Start Development server using ng server. This starts angular project and listening at 4200 Output is Angular Wysiwyg ngx-quill tutorial with example

Supported Angular Versions 

  • Angular 2 and 4 - ngx-quill supports less than equal 1.6.0 version 
  • Angular 5 - ngx-quill supports greater than 1.6.0 version 
  • Angular 6 -  ngx-quill supports greater than equal 3.6.0 version. 

The above example uses the 3.6.0 version. The latest version is always preferable

Related article


EmoticonEmoticon