How can you detect and delete leading/trailing whitespace in Quill, which is a rich text editor?
For instance, the sample HTML below represents Quill output for the text "\nHi".
We want to detect and delete leading and trailing whitespace for each block of the text created by Quill (not for an entire document). Basically, trim leading/trailing whitespace for each embedded Quill editor. (We embed multiple editors within the same page.)
The API doesn't seem to offer a simple way to achieve this and would require some hacking?
Is there an elegant way to trim text with Quill effectively?
<div class="ql-editor"
data-gramm="false"
contenteditable="true"
spellcheck="false"
autoplete="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>
How can you detect and delete leading/trailing whitespace in Quill, which is a rich text editor?
For instance, the sample HTML below represents Quill output for the text "\nHi".
We want to detect and delete leading and trailing whitespace for each block of the text created by Quill (not for an entire document). Basically, trim leading/trailing whitespace for each embedded Quill editor. (We embed multiple editors within the same page.)
The API doesn't seem to offer a simple way to achieve this and would require some hacking?
Is there an elegant way to trim text with Quill effectively?
<div class="ql-editor"
data-gramm="false"
contenteditable="true"
spellcheck="false"
autoplete="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>
- I didn't manage to reproduce this in quilljs./playground . Mind providing a working example? – Alex Brohshtut Commented Apr 14, 2020 at 6:37
- @AlexBrohshtut thanks for the reply! did you include the newline before "hi'? with two lines in the quill playground (first line is newline; second line is "hi"), the html output has two <p> elements as indicated in the question. – Crashalot Commented Apr 14, 2020 at 7:18
-
yes I did. Here the output:
<div class="ql-editor" data-gramm="false" contenteditable="true" data-placeholder="Compose an epic..."><p><br></p><p>Hello</p></div>– Alex Brohshtut Commented Apr 14, 2020 at 9:00 -
@AlexBrohshtut ah the leading
<p><br></p>is the whitespace we want to trim. basically, we don't want any entries with leading/trailing<p><br></p>parts. do you know how to hook into quill and parse these values from the html output? thanks again for your help! – Crashalot Commented Apr 14, 2020 at 9:19 - Do you want to remove leading and trailing whitespaces for all text blocks or just at the beginning and at ending of plete quill editor. Your requirement is not so clear, can you please explain by giving a good example? Let say i have text "\n Hi \n Crashalot \n \n Bye \n" – Jasdeep Singh Commented Apr 14, 2020 at 9:38
1 Answer
Reset to default 5 +100Quill uses the Delta class to describe the rich text format and we can use Quill getContents method to get all content entries which will be in the following format:
Delta {
ops: [
insert: "↵↵↵Hello↵world!↵↵"
]
}
We have to create a logic using a loop through all these entries, detect and eliminate leading and ending line feeds.
We use two arrays, one array that we'll store the new delta entries and one for storing the pending ending line feeds that we may or may not append to the new delta entries array. We'll also have a flag indicating whether we've fixed the leading line feeds.
This solution uses this method "handling blur event" to detect the blur event.
Quill blur code and snippet (run to see it in action):
Please read inline ments
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./ajax/libs/quill/1.3.7/quill.core.js" integrity="sha256-jvauzib5XGeoiDyHV6mlZnpuKsEAcjhruilbo0e+L6k=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/quill/1.3.7/quill.js" integrity="sha256-CN8TogJAzCcMj0uYishm9mmawPUFKJeJh//zR/CfCO8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/quill/1.3.7/quill.core.css" integrity="sha256-2kIq+5smyR4blGwdXXCCVrPLENwavLyrG8+kLPfDPJk=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/quill/1.3.7/quill.bubble.css" integrity="sha256-2hxHujXw890GumwDHPWrwJCtdZZdrJanlGsrOTSfXnc=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare./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>I've tested it with image assets and formatting and it seems to work pretty well. Of course the code can be further optimized and maybe simplified.
You can also check this Stackblitz project if you wanna fork it and make some tests.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744293780a4567159.html
评论列表（0条）