Question

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

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 functions之类的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。

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

2 个答案: