javascript - Quill text editor how to use instances after creating with JQuery - Stack Overflow

admin管理员组

文章数量:1287631

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.

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.

• javascript
• jquery
• quill

Share Improve this question Follow asked Jan 16, 2017 at 9:56 FinFonFinFon 9511 gold badge22 silver badges88 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

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.

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.

According to Quill Rich Text Editor Documentation you can get the editor instance by getting the DOM element and inserting it inside the Static method find(). This method returns the Quill or Blot instance for the given DOM node.

You can use the method as follows:

function getQuillInstanceText(quillID)
{
    var linkNode = document.querySelector(quillID);
    var linkBlot = Quill.find(linkNode);
    return linkBlot;
}

本文标签： javascriptQuill text editor how to use instances after creating with JQueryStack Overflow