wangEditor 粘贴从 word 复制的带图片内容的最佳实践

为什么要写这篇文章

• 首先源自于实际项目的客户需求，真实且刚需。
• 本人在网上查找了很多相关资料，也对比和参考了其他类似的文本编辑器，才实现到本文实现的效果。提前声明，本文没有做到百分百粘贴前后同样的效果，介意者慎入！！以免浪费您的宝贵时间。
• 基于 wangEditor 免费开源的前提下实现，没有任何需要付费或使用限制。
• 出于整理收藏、个人积累，分享出来，抛砖引玉。

基于 Layui 本地安装 wangEditor 最新版本

不建议使用官网的 CDN，亲测不是很稳定。官网安装文档

下载 JS 和 CSS 文件

• 在任意位置新建一个 test1 文件夹，打开控制台，目录定位到该文件夹，执行 npm install @wangeditor/editor 或 yarn add @wangeditor/editor;
• 安装完成，打开 node_modules/@wangeditor/editor/dist 文件夹，即可找到 JS CSS 文件：
  • index.js
  • css/style.css
• 把上面两个文件拷贝到你的项目中。

在 Layui 中创建 wangEditor

• 新建一个引入 Layui 的 HTML 文档

• 定义编辑器 html 结构，并引入 css 和 js
  编辑器和工具栏是强制分离的，所以需要定义两个 div。此时代码结构如下。

• 创建编辑器（主要是 JS 代码实现）

至此 wangEditor 编辑器已经创建成功了。刷新页面后，就可以看到和官网一样界面效果了。

wangEditor 实现 word 带图片格式内容粘贴

场景描述

• 新建一个 word 文档，并输入常规内容，如带样式的文本内容、列表、表格，并插入图片，然后选中复制；
• 打开上面创建的编辑器页面，点击编辑器输入区域，然后 ctrl+v 粘贴。

结果： 文字样式部分丢失，表格尚可，列表溢出，图片直接丢失。

分析思路

针对上面的实践结果，逐个寻找解决方案：

• 样式丢失

  • 体现：如文本样式部分丢失、列表溢出等。

  • 为什么会丢失呢？

    • 这个问题其实很容易回答，word 中的文本样式肯定与我们平时写的 HTML 样式有差异，会导致样式丢失。

    • 另外一方面，我们平时写的 HTML 格式非常灵活，但是 wangEditor 无法兼容所有的 HTML 格式，这一点官方文档有特别标红说明。也就是说，我们在编辑器输入内容时，wangEdior 会做一些处理（过滤，筛选，转换等）。

    例如，wangEditor 可以识别 hello 为加粗，但无法识别 hello 等其他加粗方式。

  • 解决措施

    • 了解差异，对内容样式做额外的处理，使其尽量符合 wangEditor 支持的格式。
    • 代码实践（这只是我的思路，你还可以有更好的实现思路~~）

    // 例如缩进会超出边框，直接过滤掉相关样式即可
    html = html.replace(/text\-indent:\-(.*?)pt/gi, '')
    

• 图片丢失

  • 为什么丢失呢？
    这个问题比较复杂，需要我们先了解复制粘贴的原理，真是情况和我们想的完全不一样，它不是简单的把 A 的内容作为一个整体一次性复制到编辑器中，而是将 A 的内容中图片的标签和图片的内容（数据）分成两部分分别以不同方式传输。此处简单说明一下，下面关键点部分做详细介绍。
  • 解决措施
    其实思路很清晰，就是我们将图片的内容复制到编辑器中，而且还可以正常显示。这块比较复杂，此处只做个概念介绍，，下面关键点部分做详细介绍。

关键点：图片如何粘贴

【开门见山】

通过 wangEditor 的编辑器配置 API 中的 customPaste 自定义粘贴。

通过该 API 可以阻止编辑器的默认粘贴处理逻辑，可以实现自己的粘贴逻辑。

即：这里的自己的粘贴逻辑，就是解决图片粘贴的关键所在。

~~原来，其实道理就这么简单！！

最终实现代码（因为仅涉及 JS 代码，所以只提供 JS 代码）

• 自定义 wangEditor 粘贴

// 其他代码
....


.....
// 其他代码

• 工具函数（上面的代码中有用到）

总结

1. 本文基本上完美实现了从 word 复制粘贴图片的需求。

2. 至于样式部分丢失的问题，目前不可能 100%解决，wangEditor 本身解析内容的原理导致，就目前而言，只能尽可能对损失或丢失的样式做一些额外的处理，使其接近复制粘贴的预期。