![](/img/trans.png)
[英]How to capture content typed in a rich text editor div - Quill rich editor
[英]How to detect and trim leading/trailing whitespace in Quill (rich text editor)?
如何检测和删除Quill中的前导/尾随空格,它是一个富文本编辑器?
例如,下面的示例HTML代表Quill output 的文本"\nHi"
。
我们想要检测并删除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 class 来描述富文本格式,我们可以使用 Quill getContents
方法获取所有内容条目,格式如下:
Delta {
ops: [
insert: "↵↵↵Hello↵world!↵↵"
]
}
我们必须使用循环遍历所有这些条目来创建逻辑,检测并消除前导和结束换行符。
我们使用两个 arrays,一个用于存储新的增量条目的数组,另一个用于存储我们可能会或可能不会 append 到新的增量条目数组的未决结束换行符。 我们还将有一个标志,指示我们是否已修复领先的换行符。
该解决方案使用这种方法“处理模糊事件”来检测模糊事件。
请阅读内联评论
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>
我已经用图像资产和格式对其进行了测试,它似乎工作得很好。 当然,代码可以进一步优化甚至简化。
如果你想分叉它并进行一些测试,你也可以检查这个Stackblitz 项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.