阅读 443

富文本编辑器粘贴 WPS Word 解决方案

一、前言

作为富文本开发爱好者,经常会听到用户抱怨粘贴 WPS Word 时文本样式缺失、解析异常(出现大量 CSS 文本)、或者多张图粘贴时图片无法访问的问题。

二、文本解析解决方案

方式一

针对文本解析的问题,常规思路是选用更优异的 HTML 解析库并优化处理逻辑。针对此种思路我推荐的 HTML 解析库是 posthtml-parser,使用过 webpack html-loader 的同学应该对这个库有所了解,专业的事交给专业的人去做才是高效的。

方式二

除了使用 HTML 解析库,我们还可以另辟蹊径,使用浏览器自带的 HTML 解析 API。DOMParser 可以将存储在字符串中的 XML 或 HTML 源代码解析为一个 DOM Document,对于前端开发者来说,DOM 树是再熟悉不过的知识块儿了。此时我们只需要对 Document.body 进行深度遍历,进行节点优化即可得到我们想要的内容了。

三、图片缺失解决方案

问题缘由

在我们粘贴 WPS Word 内容时,如果有多张图片存在,图片的 src attribute 的值都是 file:///C:/User/*/*.jpg 形式的值。由于浏览器在 https?:// 协议下是无法访问 file:// 的,于是就有了多图粘贴时图片缺失的问题。

解决思路

在我们拷贝 WPS Word 内容后,粘贴板中不仅会存在 text/html 数据,还会存在等同的 text/rtf 数据。

rtf 文本中,图片数据以二级制或十六进制(默认)的形式存在,我们只需要提取这部分内容并将其转换为 base64 并替换对应 <img>src attribute 即可。

四、成果展示

我这里采用的是 DOMParser + RTF 的组合模式,实现思路如下:

  1. 遍历整个 DOM 树,过滤多余的 attributestyle css,收集 <img>#text和树梢节点,移除不被支持的节点。
  2. 优化树梢节点,主要是移除一些空节点。从树梢向树根逐步判断并移除。
  3. 压缩 #text 深度。
  4. 解析 text/rtf 文本,生成图片 base64 数据。
  5. 按顺序替换第一步中收集到的图片的 src 属性

WPS Word 与 Web 对比

paste(2).gif

DOM 树结构

image.png

此时我们已经得到了相对简洁的 DOM 树,如果我们再对 DOM 树的深度进行压缩,将得到:

image.png

当我们拿到如此简洁的 DOM 树之后,无论是将其转换为数据模型还是直接插入 HTML 中,都可以达到比较理想的状态。

备注:由于在压缩 DOM 树深度这一步处理的不够完善,所以破坏了部分语义化标签,以及部分数据的缺失,但是整体思路是可行的

五、参考文献

  1. DOMParser - MDN
  2. Rich Text Format - 维基百科
  3. RTF V1.7 规范 中文版 - 道客巴巴
  4. rtf.js - GitHub

六、加入我们

wangEditor 首页找到我们的 QQ 群,进去私聊群主即可。

文章分类
前端
文章标签