ng-quill

PROJECT IS NO LONGER MAINTAINED - angularjs lts period ends on 2021/12/31


ng-quill Build Status

NPM

ng-quill is an Angular.js component for Quill rich text editor.

Donate/Support

If you like my work, feel free to support it. Donations to the project are always welcomed :)

PayPal: PayPal.Me/bengtler

Buy Me A Coffee

BTC Wallet Address: 3QVyr2tpRLBCw1kBQ59sTDraV6DTswq8Li

ETH Wallet Address: 0x394d44f3b6e3a4f7b4d44991e7654b0cab4af68f

LTC Wallet Address: MFif769WSZ1g7ReAzzDE7TJVqtkFpmoTyT

Examples

Installation

The new version is complete rewritten and is using QuillJS 1.x. For the latest old version (0.20.1) checkout the special branch for it.

Usage

<ng-quill-editor ng-model="title">
    <ng-quill-toolbar>
        <div>
            <span class="ql-formats">
                <button class="ql-bold" ng-attr-title="Bold"></button>
            </span>
            <span class="ql-formats">
                <select class="ql-align" ng-attr-title="Aligment">
                    <option selected></option>
                    <option value="center"></option>
                    <option value="right"></option>
                    <option value="justify"></option>
                </select>
                <select class="ql-align">
                    <option selected></option>
                    <option value="center"></option>
                    <option value="right"></option>
                    <option value="justify"></option>
                </select>
            </span>
        </div>
    </ng-quill-toolbar>
</ng-quill-editor>

Full Quill Toolbar HTML

Alternative Usage

let app = angular.module('app', [ 'ngQuill' ])

app.constant('NG_QUILL_CONFIG', {
  /*
   * @NOTE: this config/output is not localizable.
   */
  modules: {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ['blockquote', 'code-block'],

      [{ '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
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
      [{ 'font': [] }],
      [{ 'align': [] }],

      ['clean'],                                         // remove formatting button

      ['link', 'image', 'video']                         // link and image, video
    ]
  },
  theme: 'snow',
  debug: 'warn',
  placeholder: '',
  readOnly: false,
  bounds: document.body,
  scrollContainer: null
})

app.config([
  'ngQuillConfigProvider',
  'NG_QUILL_CONFIG',

  function (ngQuillConfigProvider, NG_QUILL_CONFIG) {
    ngQuillConfigProvider.set(NG_QUILL_CONFIG)
  }
])

*see: ./src/ng-quill/app.provider(‘ngQuillConfig’).config

Configuration

Callback/Outputs

Security Hint

Angular templates provide some assurance against XSS in the form of client side sanitizing of all inputs.

Ng-quill provides the config paramter sanitize to sanitize html-strings passed as ngModel to the component.

It is deactivated per default to avoid stripping content or styling, which is not expected.

But it is recommended to activate this option, if you are working with html strings as model values.

Advanced Usage and Configuration

After editor creation you can use everything from the ordinary quill editor -> listen to editorCreated and work with the editor instance in your controller like you want ;). Add modules, use the quill API or listen to Events. Keep in mind to use $timeout if you are listening / working with quill-Events and updating some $scope stuff to notify angular about it ;). Quill Documentation