Question

（我将在前面提到我是一个新的javascript开发人员，我确信我在javascript / angular / quill如何在页面上一起工作的知识方面存在差距。）< / p>

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

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

但那不起作用，所以我想也许我必须明确传递div的id：

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

这不起作用，并没有集中在div内部并允许我编辑。所以我想也许问题是我用角度劫持了click事件，也许我需要在实例化编辑器后将焦点切换到div。所以我创建了一个焦点指令（只是从另一篇SO文章中复制/粘贴），当我在输入上测试时它工作正常。

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

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

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

这样可以选择div中的文本，但它没有显示工具栏，因此我怀疑它并没有真正起作用。我确信我误解了一些互动，我完全清楚我缺乏很多关于JS的必要知识。我的底线是我想知道的：

是否可以仅为当前部分动态实例化编辑器，并在单击时再次为其他部分实例化编辑器等。
如果是这样，怎么样？

提前致谢。

Answer 1

是的，您可以通过单击＆lt; div＆gt;动态创建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编辑器

2 个答案: