如何在 Quill JS 上保留 white-space，同时保持 Microsoft Word 中 copy/paste 的格式？

Question

我在 html（MVC C# .Net 项目）上有一个 quill js 编辑器。我想保留白色-spaces（包括tabs/indent）。在编辑器中添加 white-space: pre 可以解决问题，但是从 Microsoft Word 粘贴时会出现一些奇怪的换行符。

使用 white-space: normal 我可以毫无问题地从 Microsoft Word 粘贴 - 它保留了缩进。但是，当将 HTML 字符串保存到数据库并再次在编辑器上显示时，白色 space 未保留。（有道理，因为 white-space 是正常的）。

但是，如果我设置 white-space: pre（或预行，或预包装），一切都与数据库保存和演示配合得很好。但是从 Microsoft Word 粘贴时，换行符出现在每个句子的中间...

Answer 1

我最终通过重新定义 Quill 生成的块解决了这个问题！

var Block = Quill.import('blots/block');
Block.tagName = 'DIV';
Block.className = 'pre';
Quill.register(Block, true);

通过这样做，我将 quill 编辑器上的文本块注册为 <div> 和 class "pre": <div class='pre'>。在此声明之后，我设置了 'pre' class 样式 (css):

.pre {
   white-space: pre-wrap !important;
}

现在发生的是每个文本块都变成了具有可自定义样式的 <div>。这解决了我的问题！现在保留了 Microsoft Word 副本以及正常的文本输入！

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