javascript - 如何访问具有相同类名的多个 Quill 实例的innerHTML？

Question

我试图在单个页面上拥有多个 Quill 文本编辑器实例，我实现了这一点，但现在我在如何获取每个实例的innerHTML 上陷入困境。要创建单个实例并获取其 insideHTML 并将其分配给隐藏输入，我使用以下命令:

// CREATE A QUILL INSTANCE

var quill = new Quill('#editor-container', {
    modules: {
    toolbar: [
        [{'header': [1, 2, 3, 4, 5, 6, false]}],
        [{'size': ['small', false, 'large', 'huge']}],
        [{'font': [] }],
        ['bold', 'italic', 'underline', 'strike'],
        ['link', 'blockquote', 'code-block', 'image', 'video'],
    ]
},
placeholder: 'Compose an epic...',
theme: 'snow'
});

// GET THE innerHTML OF THE QUILL INSTANCE ANS ASSIGN IT TO A HIDDEN FIELD.

var form = document.getElementById("writeArticleForm");
form.onsubmit = function() {
    // Populate hidden form on submit
    var articlebody = document.querySelector('input[name=articleBody]');
    var html = document.querySelector(".ql-editor").innerHTML;
    articlebody.value = html;
    return true;
}

但是，当我创建两个 QUILL 实例时，如何使用 querySelector 获取每个实例的 innerHTML 并将其分配给变量？

Answer 1

您可以使用querySelectorAll获取与类名匹配的所有元素。迭代结果 NoteList你必须将其转换为数组，我选择的方法是使用 spread operator .

document.querySelector("#read_button").addEventListener("click", () => {
  let output = document.querySelector("#output");
  let form = document.querySelector("#form");
  output.innerHTML = "";
  form.innerHTML = "";
  // Get all inputs
  let elements = document.querySelectorAll(".input");
  // Spread NodeList into array and iterate
  [...elements].forEach((input, index) => {
    output.innerHTML += `<li>${input.innerHTML}</li>`;
    form.innerHTML += `<input type="hidden" id="input${index}_value" value="${input.innerHTML}">`;
  });
});

.input {
  border: 1px solid black;
  padding: 0.25em;
}
#read_button {
  margin-top: 1em;
}

<textarea class="input">Input 1</textarea>
<textarea class="input">Input 2</textarea>
<textarea class="input">Input 3</textarea>
<textarea class="input">Input 4</textarea>
<button id="read_button">
  Read Inputs
</button>
<p>Output:</p>
<ul id="output"></ul>

<form id="form"></form>