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

如何使用我在其他函数中创建的这个鹅毛笔实例？ 例如：

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 开始，您现在可以使用实验性 find 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。

Answer 3

根据 Quill 富文本编辑器文档，您可以通过获取 DOM 元素并将其插入静态方法

find()

来获取编辑器实例。此方法返回给定 DOM 节点的 Quill 或 Blot 实例。

您可以使用以下方法：

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