Javascript 如何从控制器访问ng Quill实例以更改AngularJs中的工具栏

我需要使用angular更改quill.Js的工具栏，我尝试使用

，但是它没有按预期工作，并且在多个编辑器上导致错误，是否可以使用quill.Js文档中使用angular提供的选项更改它

模块配置

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

控制器

(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

错误：var编辑器=新纬管（容器，选项）//此实例未初始化

最近我遇到了同样的问题，然后我查阅了来自的ng quill文档

也可以在这里查看问题

使用此组件，我们有两个自定义选项

使用HTML元素外接程序

使用ngQuillConfigProvider.Set（）设置配置

使用

毛笔编辑器
组件的
模块
属性

1.使用HTML元素加载项

请检查示例以了解更多信息

2.使用ngQuillConfigProvider

(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

    }

})();

我使用以下代码定制编辑器

    .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.使用ng羽毛笔编辑器组件的模块属性

在控制器中添加编辑器模块

          $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
            ]
          }

并将其添加到视图中，如下所示

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

---

希望这将有助于某人

如果您仍然希望编辑器实例访问API或用于其他用途，您可以 使用

onEditorCreated

回调或任何其他可用回调：

示例：

他认为：

---

确保在ng-quill.js之前的页面上引用了

。是的，它在索引文件中，quill编辑器工作正常，只需自定义工具栏

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