动态实例化 QuillJS 编辑器

Question

（首先，我是一名新的 javascript 开发人员，而且我确信我对 javascript/angular/quill 如何协同工作的知识存在差距在页面上。）

我想知道这是否可行。我不想在页面的脚本标记中实例化编辑器，而是想在单击 div 时实例化编辑器。我正在为我的页面使用 Angular 控制器，在我为 div 设置的点击事件中，我尝试了一些事情：

editor = new Quill(myDiv, {
         modules: { toolbar: '#toolbar' },
         theme: 'snow'
         });

但这没有用，所以我想也许我必须明确传递 div:

的 ID

editor = new Quill('#editor', {
         modules: { toolbar: '#toolbar' },
         theme: 'snow'
         });

这不起作用，并且没有聚焦在 div 内并允许我进行编辑。所以我想问题可能是我用 angular 劫持了点击事件，也许我需要在实例化编辑器后将焦点切换到 div。所以我创建了一个焦点指令（只是来自另一篇 SO 文章的 copy/pasted），当我测试输入时它工作正常。

app.directive('focusOn', function () {
return function (scope, elem, attr) {
    scope.$on(attr.focusOn, function (e) {
        elem[0].focus();
    });
};

然后在 angular 控制器的点击功能中：

$scope.$broadcast('focussec123');
                    if (editor == null) {
                        editor = new Quill('#editor', {
                            modules: { toolbar: '#toolbar' },
                            theme: 'snow'
                        });
                    }

这对 select div 中的文本有效，但它没有显示工具栏，因此我怀疑它并没有真正起作用。我确定我误解了一些交互，我完全意识到我缺乏很多关于 JS 的必要知识。我的底线是我想知道：

是否可以仅针对当前部分动态实例化编辑器，并在点击其他部分时再次实例化编辑器，等等
如果是，怎么做？

提前致谢。

Answer 1

是的，您可以通过单击

动态创建 Quill 实例。这正是我们所做的。

就是这样（大致）：

export class TextbocComponent ... {
    private quill: Quill;
    private target: HTMLElement;
    private Quill = require("quill/dist/quill");

    private onParagraphClicked(event: MouseEvent): void {
        const options = {
            theme: "bubble"
        };

        if (!this.quill) {
            this.target = <HTMLElement>event.currentTarget;

            this.quill = new this.Quill($(target).get(0), options);

            $(target).children(".ql-editor").on("click", function(e) {
                e.preventDefault();
            });
        }

        this.quill.focus();

        event.stopPropagation();
        event.preventDefault();
    }
}

Answer 2

对于那些没有使用 Angular 的人：

$(document).on('click', '#editor', function() {
    if (!$(this).hasClass('ql-container')) {
        var quill = new Quill($('#editor').get(0), {
            theme: 'snow'
        });
        quill.focus()
    }
});

动态实例化 QuillJS 编辑器

Dynamically instantiate QuillJS editor

javascript

html

angularjs

quill