关于前端:富文本编辑器-quilljs-开发二-升级与表格功能

前言

在富文本编辑器场景中, 表格 是一种不可漠视的性能, 然而在以后 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 开发(二): 降级与表格性能