How to preserve white-space on Quill JS, while maintaining format of copy/paste from Microsoft Word?

user_12347905 0
Viewed 2714

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...

quill ms-word whitespace asp.net-mvc
1 Answers

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!

user_123479050
Related