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

Question

我使用Quill文本编辑器作为我网站的文本编辑器，其中一个站点选项是创建动态文本编辑器，定义主轴编辑器的功能如下所示：

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

我怎样才能使用我在其他函数中创建的这个quill实例？ 例如：

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

我想使用quill API函数，如getContents（）等。

我怎样才能到达刚刚创建的实例？ 非常感谢。

Answer 1

不幸的是，没有Quill API会从相应的DOM容器中返回Quill实例。 如果您使用的是jQuery，则可以使用$ .data（）：

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

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

或者使用简单的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;
}

编辑：从Quill 1.2.0开始，您现在可以使用实验性查找 API。

Answer 2

您可以创建一个包含所有编辑器的对象，而不是将编辑器对象保存为HTML的属性，您可以随时按键（ID）存储和获取每个编辑器：

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

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

在这种情况下，您不需要任何DOM查询或JQuery。