用Quill打造高效富文本编辑器的实战经验和踩坑记录

我的写法，亲测靠谱

Quill 是一个非常强大的富文本编辑器库，我用过不少次了。今天就来分享一下我在使用 Quill 过程中的一些实战经验，希望能帮到大家。

初始化 Quill，这一步很重要

首先，初始化 Quill 时，一定要确保你的 DOM 元素已经加载完毕。否则，你可能会遇到一些奇怪的问题，比如编辑器不显示或者报错。

我一般这样处理：

document.addEventListener('DOMContentLoaded', function() {
  const editor = new Quill('#editor-container', {
    theme: 'snow'
  });
});

这样可以确保 DOM 元素已经加载完毕后再初始化 Quill。别小看这个细节，有时候就是这些看似不起眼的小问题导致项目出问题。

自定义工具栏，灵活又方便

Quill 的默认工具栏功能挺全的，但有时候还是需要自定义一下。比如说，有些按钮我不需要，有些按钮我需要加上。这时候，你可以自己定义一个工具栏。

<div id="toolbar">
  <span class="ql-formats">
    <button class="ql-bold"></button>
    <button class="ql-italic"></button>
    <button class="ql-underline"></button>
  </span>
  <span class="ql-formats">
    <select class="ql-font">
      <option value="serif">Serif</option>
      <option value="monospace">Monospace</option>
    </select>
  </span>
</div>

<div id="editor-container"></div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const editor = new Quill('#editor-container', {
      theme: 'snow',
      modules: {
        toolbar: '#toolbar'
      }
    });
  });
</script>

这种写法更靠谱，因为你可以完全控制工具栏的样式和功能。而且，这样做也更容易维护和扩展。

处理内容变化，别再踩坑了

Quill 提供了 on 方法来监听内容的变化。但是，如果你不注意，很容易踩到一些坑。比如，你可能会发现 on 方法在某些情况下不会触发，或者触发时机不对。

我一般这样处理：

const editor = new Quill('#editor-container', {
  theme: 'snow'
});

editor.on('text-change', function(delta, oldDelta, source) {
  console.log('Content changed:', delta);
  // 在这里处理内容变化
});

为什么这样写？因为 text-change 事件在每次内容发生变化时都会触发，而且会传递三个参数：delta、oldDelta 和 source。delta 是内容变化的描述，oldDelta 是上一次的内容变化描述，source 是触发变化的来源（比如用户操作、API 调用等）。

常见的错误写法是直接使用 change 事件：

// 错误写法
editor.on('change', function() {
  console.log('Content changed');
  // 在这里处理内容变化
});

这种写法容易出问题，因为 change 事件在很多情况下不会触发，或者触发时机不对。所以，建议避开 change 事件，使用 text-change 事件更靠谱。

实际项目中的坑

在实际项目中，我遇到过一些常见的坑。比如，Quill 在某些浏览器下的兼容性问题，还有就是内容格式化的问题。

首先说说浏览器兼容性。虽然 Quill 声称支持所有现代浏览器，但在某些老版本的浏览器下，还是会出现一些问题。比如说，我在 IE11 下就遇到了一些奇怪的问题，比如编辑器不显示或者无法输入。

解决这个问题的方法是，使用 polyfill 库来弥补浏览器的不足。比如，使用 babel-polyfill 或者 core-js：

<script src="https://cdn.jsdelivr.net/npm/core-js@3.20.3/client/shim.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

这样可以确保在老版本的浏览器下也能正常使用 Quill。

其次，内容格式化的问题。有时候，你可能会发现 Quill 生成的内容格式不符合预期，特别是在复制粘贴其他地方的内容时。这时候，你需要对内容进行一些预处理。

const Clipboard = Quill.import('modules/clipboard');

class CustomClipboard extends Clipboard {
  onPaste(event) {
    const clipboardData = event.clipboardData || window.clipboardData;
    const pastedData = clipboardData.getData('Text');
    this.quill.clipboard.dangerouslyPasteHTML(pastedData);
  }
}

const editor = new Quill('#editor-container', {
  theme: 'snow',
  modules: {
    clipboard: { matchVisual: false },
    customClipboard: new CustomClipboard()
  }
});

这种写法可以确保粘贴的内容不会带入多余的格式，只保留纯文本。当然，你也可以根据需要进行更多的定制。

总结一下

以上是我总结的一些 Quill 的最佳实践，希望对你有帮助。如果有更好的方案，欢迎评论区交流。这个技巧的拓展用法还有很多，后续我会继续分享这类博客。