一、导出编辑器内容,表格无边框样式
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,设为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;
},