wangEditor解决表格用v-html无法显示边框

531 阅读1分钟

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

image.png

image.png

因为官方文档在介绍的时候说明表格是没有样式的,我们可以在改变编辑器内容的时候识别到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;
    },

image.png