Search code examples
asp.net-mvcms-wordwhitespacequill

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


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


Solution

  • 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!