如何在富文本编辑器Quill中检测和删除开头/结尾的空白？
例如，下面的示例HTML代表文本"\nHi"的Quill输出。
我们要检测并删除Quill创建的每个文本块的前导和尾随空格（而不是整个文档）。基本上，为每个嵌入式Quill编辑器修剪前导/后缀空格。 （我们在同一页面中嵌入了多个编辑器。）
API似乎没有提供一种简单的方法来实现这一目标，并且需要进行一些黑客操作？
是否有一种优雅的方法可以有效地用Quill修剪文本？
<div class="ql-editor"
data-gramm="false"
contenteditable="true"
spellcheck="false"
autocomplete="off"
autocorrect="off"
autocapitalize="off">
<p style="align-self: center;">
<br>
</p>
<p style="align-self: center;">
<span style="font-family: Lato; color: rgb(0, 0, 0); font-size: 80px; line-height: 1.5; letter-spacing: 0em; font-weight: 400; font-style: normal;">Hi </span>
</p>
</div>
Quill使用Delta类来描述RTF格式，我们可以使用Quill getContents方法来获取将采用以下格式的所有内容条目：
getContents我们必须使用循环访问所有这些条目来创建逻辑，检测并消除开头和结尾的换行。
我们使用两个数组，一个数组将存储新的增量条目，一个数组用于存储可能会或可能不会附加到新的增量条目数组的未决结束换行。我们还将有一个标志，指示我们是否已修复了导行线。
此解决方案使用此方法Delta {
ops: [
insert: "↵↵↵Hello↵world!↵↵"
]
}
检测模糊事件。
请阅读内嵌注释
"handling blur event"
let quills = [];
[...document.getElementsByClassName('quill-editor')].forEach((el, idx) => {
const quill = new Quill(el, {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
quill.on('selection-change', function(range, oldRange, source) {
if (range === null && oldRange !== null) {
const delta = quill.getContents();
let leadingFixed = false;
let newDelta = [];
let tempDelta = [];
if(delta.ops.length === 1) {
// If there is only one entry, check if it's a string and trim leading and ending LF
let { insert, attributes } = delta.ops[0];
if(typeof(insert) === 'string') {
insert = insert.replace(/^\n+|\n+$/g, '');
}
newDelta = [{ insert, attributes }];
} else {
// Else go through all the insert entries
delta.ops.forEach(({ insert, attributes }, idx) => {
// Create a boolean to indicate if we're at the last entry
const isLast = idx === delta.ops.length - 1;
// If the entry is a string (not image/asset)
if(typeof(insert) === 'string') {
// If we haven't fixed the leading
if(!leadingFixed) {
// If the entry begins with LFs
if(/^\n+/.test(insert)) {
// Create a string witrh clean leading LFs
let cleanText = insert.replace(/^\n+/, '');
// If there is text after cleaning the LFs
if(cleanText.length > 0) {
// Add the text to the newDelta
newDelta.push({
insert: cleanText,
attributes
});
// Set leading flag to indicate we've fixed the leading
leadingFixed = true;
}
// Else if the entry does not start with LFs
} else {
// If the entry does not begin with LFs
// Add any pending entries that may exists in tempDelta to the newDelta
newDelta = newDelta.concat(tempDelta);
// Add the existing entry
newDelta.push({
insert,
attributes
});
// Clean the any pending entries
tempDelta = [];
// And set the leading flag to indicate we've fixed the leading
leadingFixed = true;
}
// Else if we have fixed the leading
} else {
// If there an entry with ending LFs
if(/\n+$/.test(insert)) {
// Create a string witrh clean ending LFs
let cleanText = insert.replace(/\n+$/, '');
// If this is the last entry
if(isLast) {
// If there is text after cleaning the LFs
if(cleanText.length > 0) {
// Add any pending entries that may exists in tempDelta to the newDelta
newDelta = newDelta.concat(tempDelta);
// Add the cleaned entry
newDelta.push({
insert: cleanText,
attributes
});
}
// Else if this is not the last entry
} else {
// If there is text after cleaning the LFs
if(cleanText.length > 0) {
// Add any pending entries that may exists in tempDelta to the newDelta
newDelta = newDelta.concat(tempDelta);
// Add the existing entry
newDelta.push({
insert,
attributes
});
// Clean the any pending entries
tempDelta = [];
// Else if there is no text after cleaning the LFs
} else {
// Add the entry to the temp deltas so to use them later if its needed
tempDelta.push({ insert, attributes });
}
}
// Else if the entry does not end with LFs
} else {
// Add any pending entries that may exists in tempDelta to the newDelta
newDelta = newDelta.concat(tempDelta);
// Add the existing entry
newDelta.push({
insert,
attributes
});
// Clean the any pending entries
tempDelta = [];
}
}
// If the entry is not a string
} else {
// Then all leading text/line feeds have been cleared if there were any
// so, it's safe to set the leading flag
leadingFixed = true;
// Add any pending entries that may exists in tempDelta to the newDelta
newDelta = newDelta.concat(tempDelta);
// Add the existing entry
newDelta.push({
insert,
attributes
})
// Clean the any pending entries
tempDelta = [];
}
});
}
quill.setContents(newDelta);
} /*else if (range !== null && oldRange === null) {
console.log('focus');
}*/
});
quills.push(quill);
});.editors {
display: flex;
}
.quill-editor-container {
flex: 1;
}
.quill-editor {
height: 100px !important;
}我已经用图像资产和格式对其进行了测试，它似乎工作得很好。当然，可以进一步优化代码，甚至可以简化代码。
[如果您想分叉<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.core.js" integrity="sha256-jvauzib5XGeoiDyHV6mlZnpuKsEAcjhruilbo0e+L6k=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.js" integrity="sha256-CN8TogJAzCcMj0uYishm9mmawPUFKJeJh//zR/CfCO8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.core.css" integrity="sha256-2kIq+5smyR4blGwdXXCCVrPLENwavLyrG8+kLPfDPJk=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.bubble.css" integrity="sha256-2hxHujXw890GumwDHPWrwJCtdZZdrJanlGsrOTSfXnc=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.css" integrity="sha256-jyIuRMWD+rz7LdpWfybO8U6DA65JCVkjgrt31FFsnAE=" crossorigin="anonymous" />
<div class="editors">
<div class="quill-editor-container"><div class="quill-editor"></div></div>
<div class="quill-editor-container"><div class="quill-editor"></div></div>
</div>并进行一些测试，也可以检查它。