ngx-quill-lite

A light weight Angular wrapper of Quilljs, powerful rich text editor.

Usage no npm install needed!

<script type="module">
  import ngxQuillLite from 'https://cdn.skypack.dev/ngx-quill-lite';
</script>

README

ngx-quill-lite

An Angular library that lazy loads Quill JavaScript and its theme CSS. Dependencies: @angular/common, @angular/core, @angular/forms, @angular/platform-browser; Released assets from Quill.

npm

Buy Me a Coffee at ko-fi.com

Demo

Features

  1. Only load Quill js/css when needed. i.e., Quill is not bundled in your application.

  2. Optimized toolbar and default configurations for common usages.

  3. This component binds the following:

  @Input() html = '';
  @Output() htmlChange = new EventEmitter<string>();

Notes

This library is not intended to be widely used. It is build to fit my own needs.

Extending this library is in my plan. PRs are welcome too.

Usage

  1. Download Quill based on instructions here.

  2. Copy & Paste quill.min.js and quill.snow.css to assets\quill folder. These two files will be lazy loaded during component initialization.

  3. Import NgxQuillLite module into the module uses Quill rich text editor.

  4. Include quill-editor by <quill-editor [(html)]="html"></quill-editor> in your component. quill-editor has two way bindings with your html string.

Why this library

I have read and contributed to ngx-quill, which is a good libary and I recommend you use that libary if you have more requirements.

My goal of making ngx-quill-lite is to have lazy loading feature, because most of my applications only need Quill in one or two pages. Thus, a specialized library is in need, which gives birth to ngx-quill-lite.

Buy Me a Coffee at ko-fi.com