一、导出编辑器内容,表格无边框样式
1、通过 let article = this.editor.getHtml(); // editor.getHtml() 获取 HTML 内容;
2、处理文本字符串:(手动为 table 加上 css样式);
article = article.replace(/<table style="/g,'<table style="border-collapse:collapse;'); // 去除单元格边框间距article = article.replace(/<table /g,'<table border="1" '); // 添加边框
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 = /<table.*?<\/table>/g; // 匹配<table></table>对let styleReg = /width=".*?"/g; // 匹配所有的width,设为autolet trReg = /<tr.*?<\/tr>/; // 匹配trlet tdReg = /<td.*?<\/td>/g; // 匹配所有tdlet 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;},