wangeditor 表格问题总结及适配方案

一、导出编辑器内容，表格无边框样式 

1、通过 let article = this.editor.getHtml();  // editor.getHtml() 获取 HTML 内容；

2、处理文本字符串：（手动为 table 加上 css样式）；

article = article.replace(/
3、再将最终处理好的 article 上传到服务器；
二、禁止新增、删除行/列
1、导入的表格默认有 插入、删除列/行等功能，如果不想使用的话，我们通过css样式将它隐藏
 在不想展示的元素上方右键 — 检查 — 找到该元素的唯一属性：如 “插入” 为 data-menu-key="insertTableRow" ，为该 button 设置 display：none；属性，即可隐藏；
// 隐藏图片"编辑"、表格“新增、删除行列”按钮
    button[data-menu-key="editImage"], 
    button[data-menu-key="tableFullWidth"],
    button[data-menu-key="insertTableRow"],
    button[data-menu-key="deleteTableRow"],
    button[data-menu-key="insertTableCol"],
    button[data-menu-key="deleteTableCol"],
    button[data-menu-key="tableHeader"]{
        display: none;
    }
 三、输入内容较长撑开列表，导致超屏问题
1、设计编辑器的样式：得设置 max-width 才有效（具体原因不清楚，欢迎大佬指导），内容超出换行 word-break：break-word；
td{
   max-width: 50px !important;
   word-break: break-word;
}
2、导出的编辑器内容处理：
        根据表格列数，设置每个 td 的最大宽度为(100 / 列数)%，即平均分配；
let article = this.editor.getHtml();
article = this.tableBorderDel(article);

// 处理表格内容超屏
        tableBorderDel(str){      
            let tableReg = //g;  // 匹配
对
            let styleReg = /width=".*?"/g;   // 匹配所有的width，设为auto
            let trReg = //;   // 匹配tr
            let tdReg = //g;   // 匹配所有td

            let tableList = str.match(tableReg);
            if ( tableList != null ) {
                tableList.map(tableItem =>{
                    let newTable = tableItem.replace(styleReg, 'width="auto"');
                    str = str.replace(tableItem, newTable);
                })

                // 计算出最大宽度（根据列数，平均分配）
                let firstTr = tableList[0].match(trReg)[0];
                let tdNum = firstTr.match(tdReg).length;
                str = str.replace(/