I need to change the toolbar for quill.Js using angular, I tried to use <ng-quill-toolbar></ng-quill-toolbar> however it is not working as expected and on multiple editor its causing error, Is there a way where it can be changed using the options as given in quill.Js document using angular

/

Module-Config

(function() {
    'use strict';
    angular
        .module('app')
        .config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
            ngQuillConfigProvider.set();
        }]);
})();

Controller

(function () {
    'use strict';

    angular
        .module('app')
        .controller('Ctrl', Ctrl);
    function Ctrl($document) {
        var doc = $document[0];

        var container = doc.getElementsByClassName('editor');

        var toolbarOptions = [
            ['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
        ];
        var options = {
            debug: 'info',
            modules: {
                toolbar: toolbarOptions
            },
            placeholder: 'Compose an epic...',
            readOnly: true,
            theme: 'snow'
        };
        var editor = new Quill(container, options); //this instance is not initializing

    }

})();

HTML

 <ng-quill-editor name="description" 
    required theme="snow"                                     
    placeholder="Enter your question here" 
    ng-model="vm.QUES" 
    class="editor">
 </ng-quill-editor>


Error:  var editor = new Quill(container, options); //this instance is not initializing

I need to change the toolbar for quill.Js using angular, I tried to use <ng-quill-toolbar></ng-quill-toolbar> however it is not working as expected and on multiple editor its causing error, Is there a way where it can be changed using the options as given in quill.Js document using angular

https://quilljs./docs/configuration/

Module-Config

(function() {
    'use strict';
    angular
        .module('app')
        .config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
            ngQuillConfigProvider.set();
        }]);
})();

Controller

(function () {
    'use strict';

    angular
        .module('app')
        .controller('Ctrl', Ctrl);
    function Ctrl($document) {
        var doc = $document[0];

        var container = doc.getElementsByClassName('editor');

        var toolbarOptions = [
            ['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
        ];
        var options = {
            debug: 'info',
            modules: {
                toolbar: toolbarOptions
            },
            placeholder: 'Compose an epic...',
            readOnly: true,
            theme: 'snow'
        };
        var editor = new Quill(container, options); //this instance is not initializing

    }

})();

HTML

 <ng-quill-editor name="description" 
    required theme="snow"                                     
    placeholder="Enter your question here" 
    ng-model="vm.QUES" 
    class="editor">
 </ng-quill-editor>


Error:  var editor = new Quill(container, options); //this instance is not initializing

• javascript
• angularjs
• rich-text-editor
• quill

• 1 Make sure you have <script src="https://cdn.quilljs./1.2.6/quill.js"></script> referenced on page before ng-quill.js – Pankaj Parkar Commented Jun 23, 2017 at 8:01
• yes it is there in index file, the quill editor is working fine just need to customize the toolbar – Mr X Commented Jun 23, 2017 at 8:05

2 Answers 2

Recently I have faced same issues then I gone through ng-quill documentation from here.

Also check issue to here How to configure toolbar items?

With this ponent we have two options for customizations

1. Using HTML elements add in <ng-quill-toolbar>
2. Set Configuration using ngQuillConfigProvider.set()
3. Using modules attribute of ng-quill-editor ponent

1.Using HTML elements add in <ng-quill-toolbar>

Please check example to here.

2.Using ngQuillConfigProvider

I have used following code for customization of editor

    .config(['ngQuillConfigProvider', function (ngQuillConfigProvider) {
          var config = {
            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']                         // link and image, video
              ]
            },
            theme: 'snow',
            placeholder: 'Insert text here ...'
          }

          ngQuillConfigProvider.set(config);
    }]);

3.Using modules attribute of ng-quill-editor ponent

In controller add your editorModules

          $scope.editorModules = {
            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']                         // link and image, video
            ]
          }

And add it on view like as follows

         <ng-quill-editor modules="editorModules" 
                           placeholder="Some text here" 
                           ng-model="message">
          </ng-quill-editor>

Hope this will help to someone!!

In case you still want the editor instance to access the API or for other usages, you can use the onEditorCreated callback or any other available callbacks: availables callbacks/outputs

Example:

In the view:

<ng-quill-editor ng-model="text" on-editor-created="onEditorCreated(editor)"></ng-quill-editor>

In the controller:

$scope.onEditorCreated = function (editor) {
  $scope.editor = editor;
};