CODEWITHSUNDEEP
javascripthtmlangularjsquill
Christie
Christie

Reputation: 45

Dynamically instantiate QuillJS editor

(I'm going to preface this with the fact that I'm a new javascript developer, and I'm sure I have gaps in my knowledge about how javascript/angular/quill all work together on the page.)

I'm wanting to know if this is possible. Instead of instantiating the editor in the script tag on the page, I want to instantiate the editor for the div when it gets clicked. I'm using an Angular controller for my page, and inside the on click event I set up for the div, I tried a few things:

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

But that didn't work, so I thought maybe I had to explicitly pass the id of the div:

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

This didn't work, and didn't focus inside the div and allow me to edit. So I thought maybe the problem was that I was hijacking the click event with angular, and maybe I need to switch the focus to the div after instantiating the editor. So I created a focus directive (just copy/pasted from another SO article) which worked fine when I tested on an input. 

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

then in the on click function in the angular controller:

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

That worked to select the text inside the div, but it didn't show the toolbar and so I suspected it didn't really work. I'm sure I'm misunderstanding some interactions and I'm fully aware I lack a lot of necessary knowledge about JS. My bottom line is I want to know:

  1. Is it possible to dynamically instantiate the editor only for the current section, and to instantiate the editor again for another section when it gets clicked, etc.
  2. If so, how?

Thanks in advance.

Upvotes: 1

Views: 3800

Answers (3)

OverFlow
OverFlow

Reputation: 1

Its much easier:

var quills = [];
  counter = 0;
  $( ".init_quill_class" ).each(function() { // add this class to desired div
    quills[counter] = new Quill($(".init_quill_class")[counter], {});
    //quills[counter].enable(false);  // if u only want to show elems
    counter++;
  });

Upvotes: 0

Adam Starrh
Adam Starrh

Reputation: 6958

For those who aren't using Angular: 

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

Upvotes: 1

Tom
Tom

Reputation: 336


yes you can create Quill instances dynamically by clicking on a <div>. It's exactly what we do.

That's how (roughly):

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

Upvotes: 3

Related Questions