如何访问具有相同 class 名称的多个 Quill 实例的 innerHTML?
How to access the innerHTML of multiple Quill instances with the same class name?
我想在一个页面上有多个 Quill 文本编辑器实例,我实现了,但现在我正在为如何获取每个实例的 innerHTML 而苦恼。要创建单个实例并获取其 innerHTML 并将其分配给隐藏输入,我使用以下内容:
// 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 并将其分配给一个变量?
您可以使用 querySelectorAll
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>
我想在一个页面上有多个 Quill 文本编辑器实例,我实现了,但现在我正在为如何获取每个实例的 innerHTML 而苦恼。要创建单个实例并获取其 innerHTML 并将其分配给隐藏输入,我使用以下内容:
// 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 并将其分配给一个变量?
您可以使用 querySelectorAll
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>