vue 使用quill富文本编辑器时, 编辑器的空格不回显 [坑!]

原创已于 2025-11-07 15:48:13 修改 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #编辑器 #前端

于 2025-09-22 13:52:30 首次发布

Web前端专栏收录该内容

225 篇文章

订阅专栏

vue 使用quill富文本编辑器时, 编辑器的空格不回显 [坑!]

安装

npm i quill@2.0.3 --save

html

  <!-- Quill 编辑器容器 -->
 <div class="editor" ref="editor"></div>

script

  import Quill from "quill";
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";


// dangerouslyPasteHTML为编辑器赋初始html内容时, 先将连续的空格转为 &nbsp;
this.Quill = new Quill(editor, this.options);
this.htmlValue = this.htmlValue.replace(/ {2,}/g, s => "&nbsp;".repeat(s.length));
this.Quill.clipboard.dangerouslyPasteHTML(this.htmlValue);

  .editor, .ql-toolbar {
    white-space: pre-wrap !important;
    line-height: normal !important;
  }