一、导出编辑器内容,表格无边框样式
因为官方文档在介绍的时候说明表格是没有样式的,我们可以在改变编辑器内容的时候识别到table这个标签然后去添加css样式
二、实现方式
onChange(editor) {
console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
let html = editor.getHtml();
// 创建一个新的DOM解析器
let parser = new DOMParser();
// 使用解析器解析HTML字符串
let doc = parser.parseFromString(html, "text/html");
// 获取所有的表格元素
let tables = doc.getElementsByTagName("table");
// 遍历所有的表格元素并添加边框样式
for (let i = 0; i < tables.length; i++) {
tables[i].style.borderTop = "1px solid #ccc";
tables[i].style.borderLeft = "1px solid #ccc";
// 获取表格中的所有td和th元素
let cells = tables[i].querySelectorAll("td, th");
// 遍历所有的td和th元素并添加边框样式
for (let j = 0; j < cells.length; j++) {
cells[j].style.borderBottom = "1px solid #ccc";
cells[j].style.borderRight = "1px solid #ccc";
cells[j].style.padding = "3px 5px";
cells[j].style.textAlign = "center";
}
// 获取表格中的所有th元素并添加边框样式
let ths = tables[i].querySelectorAll("th");
for (let k = 0; k < ths.length; k++) {
ths[k].style.borderBottom = "1px solid #ccc";
}
}
// 将修改后的HTML内容转换回字符串
html = new XMLSerializer().serializeToString(doc);
// 更新编辑器的HTML内容
this.html = html;
},