动态实例化 QuillJS 编辑器

Dynamically instantiate QuillJS editor

(首先,我是一名新的 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 的必要知识。我的底线是我想知道:

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

提前致谢。


是的,您可以通过单击

动态创建 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();
    }
}

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

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