Quill文本编辑器如何在使用JQuery创建后使用实例

Question

I'm using Quill text editor as the text editor of my site, one of the site options is to create dynamic text editors, the function that defines the quill editor looks like that:

function quillDefine(quillID) //quillID is the id of the div that I'm going to define as quill element
{
    var toolbarOptions = 
        [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote'],
            [{'align':[]}],
            ['clean']
        ]

    var quill = new Quill('#'+quillID, {
        modules: {toolbar: toolbarOptions},
        theme: 'snow'
    });
}

how can I use this quill instance that I created inside other funcitons? for example:

funciton getQuillInstanceText(quillID)
{
    //I know I can use $('#'quillID).html(), but is that the proper way to do so?
}

I want to use the quill API functions like getContents() and etc.

How can I reach to the instance I just created? Thanks a lot.

Answer 1

Unfortunately there is no Quill API that will return a Quill instance from a corresponding DOM container. If you are using jQuery you can use $.data():

var quill = new Quill(quillID);
$(quillID).data("quill", quill);

funciton getQuillInstanceText(quillID) {
  var quill = $(quillID).data("quill");
  var text = quill.getText();
  return text;
}

Or with plain JS:

var container = document.querySelector(quillID);
var quill = new Quill(container);
container.__quill = quill;

funciton getQuillInstanceText(quillID) {
  var container = document.querySelector(quillID);
  var quill = container.__quill;
  var text = quill.getText();
  return text;
}

Edit: As of Quill 1.2.0, you can now use the experimental find API.

Answer 2

Instead of saving the editor object as an attribute of the HTML, you can also create an object that will hold all editors, and you can store and get each editor by key (ID) whenever you want:

var editors={};
editors[quilID] = new Quill(quilID);

function getQuillInstanceText(quillID) {
  var quill = editors[quillID];
  var text = quill.getText();
  return text;
}

In this case you don't need any DOM querying nor JQuery.