I have a quill js editor on a html (MVC C# .Net Project). I want to preserve white-spaces (including tabs/indent). Adding white-space: pre
to the editor solves it, however when pasting from Microsoft Word some strange line breaks appear.
With white-space: normal
I can paste from Microsoft Word with no problems - it keeps the indentation. However when saving the HTML string to a database and presenting it again on the editor, the white space is not preserved. (Makes sense, since white-space is normal).
However if I set white-space: pre
(or pre-line, or pre-wrap), everything works great with the database saves and presentation. But when pasting from Microsoft Word line breaks appear in the middle of every sentence...
I ended up solving this issue by redefining the block generated by Quill!
var Block = Quill.import('blots/block');
Block.tagName = 'DIV';
Block.className = 'pre';
Quill.register(Block, true);
By doing so, I register the text blocks on the quill editor as being <div>
with class "pre": <div class='pre'>
.
After this declaration I set the 'pre' class style (css):
.pre {
white-space: pre-wrap !important;
}
Now what happens is that every block of text is turned into a <div>
with a customizable style. This solved my issue! Microsoft Word copies are now preserved, as well as normal text input!