javascript - 动态实例化 QuillJS 编辑器

Question

(我将以我是一名新的 javascript 开发人员这一事实作为序言，并且我确信我对 javascript/angular/quill 如何在页面上协同工作的知识存在差距。)

我想知道这是否可行。我不想在页面上的脚本标记中实例化编辑器，而是想在单击 div 时实例化它的编辑器。我正在为我的页面使用 Angular Controller ，在我为 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 文章复制/粘贴)，当我测试输入时它工作正常。

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

然后在 Angular Controller 的点击函数中:

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

它可以选择 div 内的文本，但它没有显示工具栏，所以我怀疑它并没有真正起作用。我确定我误解了一些交互，我完全意识到我缺乏很多关于 JS 的必要知识。我的底线是我想知道:

1. 是否可以只为当前部分动态实例化编辑器，并在其他部分被点击时再次实例化编辑器，等等。
2. 如果是，怎么做？

提前致谢。

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();
    }
}

关于javascript - 动态实例化 QuillJS 编辑器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41669782/