【Ueditor】粘贴office表格时，单元格样式丢失

问题描述

百度富文本编辑器Ueditor，在粘贴office表格时，单元格样式丢失

表格截图：

直接粘贴后效果截图：

期待粘贴效果截图：

问题根源

office的样式是定义在类名中的，但是粘贴的时候是只取 body 标签内的元素，既不会保留类名样式，也不会将类名样式转为内联样式，所以就出现了单元格样式丢失的现象。下面我们看看剪切板中复制的代码：

注意看我红色方框圈出来的位置，我们设置的表格样式是写在类名中的，但是编辑器只取我们 body 标签的内容。

解决方案

• 方案：在粘贴的时候，拦截粘贴内容，并将类名样式转换为内联样式
• 具体实施：

  • 修改文件：public\ueditor\ueditor.config.js

  • 修改位置：粘贴事件的监听事件
    

  • 修改：
    

    备注：getClipboardData.call(me, function (div) {}) 中的函数参数 div 是已经大致提取处理的会粘贴到编辑器中的DOM元素（body标签内的元素），所以可以在这里直接拦截处理。

• 效果呈现：
  • 处理后的代码：类名中样式已经成功塞进内联样式中了
  • 处理后的效果:

拓展

• window.clipboardData: 剪贴板对象。作用是在页面上将需要的东西复制到剪贴板上
  • 方法：
    • clearData(sDataFormat): 删除剪贴板中指定格式的数据
    • getData(sDataFormat): 从剪贴板中获取指定格式的数据
    • setData(sDataFormat, sData): 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。
  • sDataFormat：数据格式
    • text/plain: 普通字符串
    • text/html: 带有样式的html
    • Files: 文件（例如剪贴板中的数据）
• DOMParser：可以将存储在字符串中XML或HTML源代码解析为一个 DOM Document
  • 参考：DOMParser - MDN
  • 语法：let domparser = new DOMParser();
  • 方法：let doc = domparser.parseFromString(string, mimeType)
  • 参数：
    • string：要解析的DOMString(DOM字符串)
    • mimeType：要解析的类型
      • text/html: Document
      • text/xml: XMLDocument
      • application/xml: XMLDocument
      • application/xhtml+xml: XMLDocument
      • image/svg+xml: XMLDocument