Quill1.0与2.0对比

前言

        因项目迭代，需要给文本编辑器新增插入表格的功能，但是1.0版本没有提供该功能，必须把版本升级到2.0。在升级的过程中发现，1.0版本与2.0版本有较大改动。现总结目前在升级过程中发现的改动点。

---

Quill1.0与2.0对比

1.方法

• pasteHTML升级为dangerouslyPasteHTML

  // 1.0版本
  this.quill.pasteHTML(newVal);
  // 2.0版本
  this.quill.clipboard.dangerouslyPasteHTML(newVal);

• Parchment.Attributor.Style升级为Parchment.StyleAttributor

  // 1.0版本
  class lineHeightAttributor extends Parchment.Attributor.Style {};
  class FontFamilyStyle extends Parchment.Attributor.Style {};
  
  // 2.0版本
  class lineHeightAttributor extends Parchment.StyleAttributor {};
  class FontFamilyStyle extends Parchment.StyleAttributor{};

2.Dom

• 在1.0版本中，有序列表使用的ol元素，无序列表使用的是ul元素；列表符号直接通过li::before来设置；
• 在2.0版本中，有序列表和无序列表使用的都是ol元素，通过属性data-list来区分，ordered表示有序列表，bullet表示无序列表；列表符号加了span标签并设置类名为qi-ui。

3.样式

        如果在本地引入了quill的样式文件，那么升级到2.0版本之后，有以下两点需要注意：

（1）因为1.0版本中列表使用的元素是ul和ol，而2.0版本只有ul，所以元素的选择必定有所差别，如图所示（仅列出部分）：

（2）因为只有2.0版本新增了表格的功能，所以1.0版本没有对表格元素的样式设置，新增样式如下：

.ql-editor table {
  table-layout: fixed;
  width: 100%;
}
.ql-editor table td {
  outline: none;
}

.ql-editor table {
  border-collapse: collapse;
}
.ql-editor td {
  border: 1px solid #000;
  padding: 2px 5px;
}

---

总结

        Quill1.0版本与2.0版本差别较大，升级时需要注意兼容性问题，如果找不到问题可去对比源码。