[Ionic] Add Rich text editor

1.-package json

"ngx-quill": "^14.0.0",

"quill": "^1.3.7"

1. angular.json

{
  ......,
  "projects": {
    "app": {
      .....,
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            .......,
            "assets": [....],
            "styles": [
              .....,
              "./node_modules/quill/dist/quill.core.css",
              "./node_modules/quill/dist/quill.bubble.css",
              "./node_modules/quill/dist/quill.snow.css"
            ],
            "scripts": ["./node_modules/quill/dist/quill.min.js"]
          },
          "configurations": {

3.- app.module.ts

import { QuillModule } from 'ngx-quill';

@NgModule({
  ....,
  imports: [
    ......,
    QuillModule,
]

4-. your-page.module.ts

import { QuillModule } from 'ngx-quill';

const quillModules = {
  toolbar: [
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
    ['blockquote'],
    // [{ header: 1 }, { header: 2 }], // custom button values
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
    [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
    [{ direction: 'rtl' }], // text direction
    // [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    [{ font: [] }],
    [{ align: [] }],
    ['clean'], // remove formatting button
    ['link']// ['link', 'image', 'video'] // link and image, video
  ]
};


@NgModule({
  imports: [
    ......,
    QuillModule.forRoot({
      modules: {
        toolbar: quillModules.toolbar
      }
    })
  ],
  ......
})

5. – your-component.component.ts

<quill-editor [(ngModel)]="body" style="height: 250px" bounds="self"></quill-editor>