前言在富文本编辑器场景中，表格是一个不可忽视的功能，但是在目前的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仓库，我们需要复制它的源码，同时clonequill的2.x源码，作为最后维护的依赖文件格式为：├──quill│├──assets│├──blots│├──core│├──core.ts│├──formats│├──modules│├──quill.ts│├──theme│└──ui├──react-quill│├──index.tsx│└──quill.snow.less详情请查看仓库：https://github.com/Grewer/rea...不同点：CSS样式问题（原来的li,ol不再以标签区分，而是以节点类型区分）。同样，代码块pre也使用了div，而不是添加一些新的格式。不再支持IE11setContentsAPIeditor的改变.clipboard.convert的使用由原来的editor.clipboard.convert(value)改为editor.clipboard.convert({html:string,text:string},formats:Record={})others一些API改动（与表单功能关系不大）可以更详细查看：https://github.com/quilljs/qu...现有表单功能后研究升级到2.0，我们的编辑器已经有了表格功能，但是没有扩展，比如插入一行，插入一列，删除等等，这些都是用户常用的操作，所以我们需要一个插件来扩展搜索后出现的关键词quill+tableonGitHub结果：目前star大于10，为普通库（_非测试库，类似这种_）。最近2-3年有更新，但只有2个结果。最后，我们对这2个库进行研究https://github.com/volser/qui...https://github.com/soccerlowa...这两个库都有各自对应的demo，可以点击查看：quill-table-uiquill-better-table目前看到这两个仓库基本可以实现更好的表方案，本文选择quill-table-ui作为接入方案。如果你喜欢quill-better-table，也可以考虑自己接入扩展表格功能，添加文件模块/table.ts:这里简单展示一下主要逻辑exportdefaultclassTableUI{menuItems:MenuItem[]=[{title:'Insertcolumnright',icon:iconAddColRight,handler:()=>{if(!(this.options.maxRowCount>0)||this.getColCount(){//控制菜单显示};showMenu(){//菜单显示的具体dom操作}hideMenu(){//删除菜单dom操作}createMenuItem(item:MenuItem){//创建菜单时，构造菜单结构constnode=document.createElement('股利');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);返回节点；}destroy(){//删除时，移除引用对象、监视器等}}注意这个附加组件有错误，我们需要修改它的依赖包：import{positionElements}from'positioning';替换为“position.js”中的导入位置；同时替换原来的positionElements逻辑。注册完成后，我们正式调用相应的API创建表：TableUI},true);functioninsertTable(){constquill=editorRef.current?.editorif(quill){quill.focus();consttable=quill.getModule('table');table.insertTable(3,2);}}添加效果动画演示：这里再展示一下，我们添加的表格插件，包括正常的插入/删除行和列的功能：完成添加功能后，我们还需要一个自定义长宽的表格功能这里我们使用数组创建一个10*10的正方形，最后在外层添加代理：{this.cellArr.map((row,rowIndex)=>{returnrow.map((col,colIndex)=>{return(});})}当你点击最后，得到长宽，调用table.insertTable(x,y);api就这样，表格功能基本就完成了。结论本文中的demo为简化版，风格没有做任何调整。如果需要进一步优化，目前由于quill一直卡在2.0@dev，后续升级需要自己维护其功能和api非常丰富，可以满足90%以上的业务需求，但是以后要开发新的功能需要花很大的功夫。可以酌情使用系列富文本编辑器quill.js开发（一）：自定义工具栏富文本编辑器quill.js开发（二）：升级和表格功能
