如何访问具有相同 class 名称的多个 Quill 实例的 innerHTML？

Question

I am trying to have multiple Quill text editor instances on a single page, I achieved that but now I am straggling on how to get the innerHTML of each. To create a single instance and get its innerHTML and assign it to a hidden input, I use the following:

// 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;
}

But when I create for instance, two instances of QUILL, how could I use the querySelector to get the innerHTML of each instance and assign it to a variable?

Answer 1

You can usequerySelectorAll to get all elements that match a class name. To iterate over the resulting NoteList you'll have to convert it to an array, my method of choice is using the 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>