That’s the Quill library.
Me neither, actually. I simply did a little bit of looking out and that was what got here up.
Nonetheless, right here’s one thing of a proof:
Quill has an idea of modules, which permit Quill’s conduct and performance to be personalized. The Clipboard module is required by Quill and doesn’t must be included explicitly.
The Clipboard handles copy, lower and paste between Quill and exterior functions. This has an API which permits us to customise this behaviour. We will do that with matchers and the addMatcher methodology.
// Initialize Quill
const quill = new Quill('#editor',
...
// Add a matcher
quill.cliboard.addMatcher(selector, (node, delta) =>
// Code to customise the clipboard conduct right here
);
For an outline of what matchers, nodes and deltas are, please seek advice from the Clipboard module’s docs (linked above).
By following the docs and examples I discovered on Stack Overflow, I used to be capable of get the next matcher to work for me and to strip out any formatting on paste:
quill.clipboard.addMatcher (Node.ELEMENT_NODE, (node, delta) =>
const plaintext = node.innerText;
const Delta = Quill.import('delta');
return new Delta().insert(plaintext);
);
Right here is the whole code with the intention to run it in context. I took the setup code from Quill’s quick start page.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>Quill clipboard demo</title>
<hyperlink href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<physique>
<div id="editor">
<p>Hiya World!</p>
<p>Some preliminary <sturdy>daring</sturdy> textual content</p>
<p><br></p>
</div>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
const quill = new Quill('#editor',
theme: 'snow',
);
quill.clipboard.addMatcher (Node.ELEMENT_NODE, (node, delta) =>
const plaintext = node.innerText;
const Delta = Quill.import('delta');
return new Delta().insert(plaintext);
);
</script>
</physique>
</html>
To see the demo in motion attempt copy/pasting any formatted textual content (from this thread, for instance). With the matcher lively, it needs to be inserted as plain textual content. If you happen to delete the matcher, it ought to retain its formatting.
