Summary of wangeditor table problems and adaptation solutions

1. Export the editor content, the table has no border style 

1. Get the HTML content through let article = this.editor.getHtml(); // editor.getHtml();

2. Processing text strings: (manually add css style to table);

article = article.replace(/<table style="/g,'<table style="border-collapse:collapse;');  // 去除单元格边框间距

article = article.replace(/<table /g,'<table border="1" ');  // 添加边框

3. Upload the final processed article to the server;

2. It is forbidden to add and delete rows/columns

1. The imported table has functions such as inserting and deleting columns/rows by default. If you don’t want to use it, we can hide it through css style

 Right-click on the element you don't want to display—check—find the only attribute of the element: if "insert" is data-menu-key="insertTableRow" , set display:none for the button; attribute, you can hide it;

// 隐藏图片"编辑"、表格“新增、删除行列”按钮
    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;
    }

 3. The input content is too long to expand the list, resulting in over-screen problems

1. Design the style of the editor: max-width must be set to be effective (the specific reason is not clear, welcome to guide), the content exceeds the line break word-break: break-word;

td{
   max-width: 50px !important;
   word-break: break-word;
}

2. Exported editor content processing:

        According to the number of table columns, set the maximum width of each td to (100 / number of columns)%, that is, evenly distribute;

let article = this.editor.getHtml();
article = this.tableBorderDel(article);

// 处理表格内容超屏
        tableBorderDel(str){      
            let tableReg = /<table.*?<\/table>/g;  // 匹配<table></table>对
            let styleReg = /width=".*?"/g;   // 匹配所有的width，设为auto
            let trReg = /<tr.*?<\/tr>/;   // 匹配tr
            let tdReg = /<td.*?<\/td>/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(/<td /g,`<td style="max-width:${100 / tdNum}% !important;word-break:break-word; "`);  // td 最大宽度、超出换行
            }

            return str;
        },