前言

在富文本编辑器场景中, 表格是一种不可漠视的性能, 然而在以后 quill.js 的正式版本(1.x)中, 却不反对此性能

所以本文承接上文 链接, 来讲述下 quill.js 降级到 2.x 的问题以及增加表格性能

为什么须要降级

在目前的 1.x 版本中并不反对表格的元素, 而咱们想要这个性能的话
一是降级, 通过官网的反对来增加, 二是咱们本人开发, 然而这样的老本过大了

以后官网进度

依据 npm 官网包的公布工夫来看, 2.x 版本处于开发的停滞阶段

所以本次咱们就以以后官网版本 1.3.7 为根底, 再手动增加 2.0.0-dev.4 的代码

手动进行 2.0 降级

目前咱们应用的是 react-quill 仓库, 咱们要将其源码复制下来, 同时也将 quill 的 2.x 源码克隆, 将其作为依赖

最终保护的文件格式为:

├── quill│   ├── assets│   ├── blots│   ├── core│   ├── core.ts│   ├── formats│   ├── modules│   ├── quill.ts│   ├── themes│   └── ui├── react-quill│   ├── index.tsx│   └── quill.snow.less

详情可查看仓库: https://github.com/Grewer/rea...

差别点:

  • CSS 款式问题(原有的 li, ol 不再通过标签来辨别, 而是用节点的类型)
  • 同样地代码块 pre 也是应用了 div 代替
  • 增加了一些新的 formats
  • 不再反对 IE11
  • setContents API 的变更
    editor.clipboard.convert 的应用从原有的 editor.clipboard.convert(value) 改为 editor.clipboard.convert({html: string, text: string}, formats: Record<string, unknown> = {} )
  • 其余的一些 API 变更(和表格性能关系不大)

更加具体的变更可查看: https://github.com/quilljs/qu...

现有表格性能调研

在降级 2.0 之后, 咱们的编辑器曾经领有了表格性能, 然而没有扩大, 比方插入一行, 插入一列, 删除等等, 这些是用户罕用的操作
所以咱们须要一个插件来扩大

在 GitHub 上搜寻关键词 quill + table 之后呈现的后果:

目前 star 大于 10, 且是失常库(_非测试库, 相似于这种_), 最近 2-3 年有更新的, 后果只有 2 个, 最初咱们对这 2 个库来进行调研

  1. https://github.com/volser/qui...
  2. https://github.com/soccerlowa...

这两个库都是有本人对应的 demo, 能够点击查看:

  1. quill-table-ui
  2. quill-better-table

目前看这两个仓库根本都能实现较好的表格计划

本文抉择了 quill-table-ui 作为接入计划, 大伙如果喜爱 quill-better-table 也能够思考本人来了接入

扩大表格性能

新增文件 modules/table.ts :
这里就简略展现一下次要逻辑

export default class TableUI {    menuItems: MenuItem[] = [        {            title: 'Insert column right',            icon: iconAddColRight,            handler: () => {                if (                    !(this.options.maxRowCount > 0) ||                    this.getColCount() < this.options.maxRowCount                ) {                    this.table.insertColumnRight();                }            },        },        // 省略        // 这里的数据是点击一个表格, 显示的菜单, 新增行列, 删除行列    ];                toggleClickHandler = (e) => {        // 管制菜单显示    };        showMenu() {        // 菜单显示的具体 dom 操作    }        hideMenu() {        // 删除菜单的 dom 操作    }        createMenuItem(item: MenuItem) {        // 创立菜单时, 构建菜单构造        const node = document.createElement('div');        node.classList.add('ql-table-menu__item');            node.addEventListener(            'click',            (e) => {                e.preventDefault();                e.stopPropagation();                this.quill.focus();                item.handler();                this.hideMenu();                this.detectButton(this.quill.getSelection());            },            false        );        return node;    }                destroy() {        // 删除时, 去掉援用对象, 监听等等操作    }}

留神点
此额定组件本来就有谬误, 咱们须要批改他的依赖包:
将 import { positionElements } from 'positioning'; 替换为 import positions from 'position.js';

同时替换原有的 positionElements 逻辑即可

在注册之后, 咱们就正式调用对应的 API, 来创建表格:

// 注册Quill.register({ 'modules/tableUI': TableUI }, true);function insertTable() {    const quill = editorRef.current?.editor    if(quill){        quill.focus();        const table = quill.getModule('table');        table.insertTable(3, 2);    }}

增加成果动图演示:

这里再展现一下, 咱们增加的表格插件, 包含了失常的插入/删除行列等等性能:

在实现增加性能之后, 咱们还须要一个增加自定义长宽的表格性能

这里咱们用数组来创立一个 10*10 的方格即可, 最初在外层增加代理:

<div  className={`${preClass}-box`}  onMouseMove={this.mouseoverHandle}  onClick={this.clickHandle}>  {this.cellArr.map((row, rowIndex) => {    return row.map((col, colIndex) => {      return (        <div          data-position={`${rowIndex},${colIndex}`}          className={classNames(this.cellClass, {            active: rowIndex <= activeRow && colIndex <= activeCol,          })}          key={`${rowIndex}${colIndex}`}        />      );    });  })}

最初点击时, 获取长宽, 调用 table.insertTable(x, y); api 即可

至此, 表格性能根本曾经全副实现

结语

本文中的 demo 都是简化版本, 款式也没有调整, 如果要在生产中应用的话还需进一步的优化

目前来说, 因为 quill 始终卡在 [email protected] 中, 前面的降级都须要本人来保护
他的性能和 api 是十分丰盛的, 能够满足 90% 以上的业务需要, 然而后续开发新性能的话也会破费一番精力, 大家能够酌情应用

系列版本

  • 富文本编辑器 quill.js 开发(一): 自定义工具栏
  • 富文本编辑器 quill.js 开发(二): 降级与表格性能