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

发布时间:2023-11-09 13:30

为什么要写这篇文章

  • 首先源自于实际项目的客户需求,真实且刚需。
  • 本人在网上查找了很多相关资料,也对比和参考了其他类似的文本编辑器,才实现到本文实现的效果。提前声明,本文没有做到百分百粘贴前后同样的效果,介意者慎入!!以免浪费您的宝贵时间。
  • 基于 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 文档
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Page title</title>
    <link href="/lib/layui-2.7.0/css/layui.css" rel="stylesheet">
    <style>
    </style>
</head>

<body>
    <script src="/lib/layui-2.7.0/layui.js"></script>
    <script>
    </script>
</body>

</html>
  • 定义编辑器 html 结构,并引入 css 和 js
    编辑器和工具栏是强制分离的,所以需要定义两个 div。此时代码结构如下。
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Page title</title>
    <link href="/lib/layui-2.7.0/css/layui.css" rel="stylesheet">
    <link href="/lib/wangeditor/style.css" rel="stylesheet">
    <style>
    </style>
</head>

<body>
    <div>
        <!-- 工具栏 -->
        <div id="toolbar-container"></div>
        <!-- 编辑器 -->
        <div id="editor-container"></div>
    </div>
    <script src="/lib/layui-2.7.0/layui.js"></script>
    <script src="/lib/wangeditor/index.js"></script>
    <script>
    </script>
</body>

</html>
  • 创建编辑器(主要是 JS 代码实现)
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <title>Page title</title>
    <link href="/lib/layui-2.7.0/css/layui.css" rel="stylesheet">
    <link href="/lib/wangeditor/style.css" rel="stylesheet">
    <style>
        body {
            padding: 20px;
        }
    </style>
</head>

<body>
    <div style="border: 1px solid #e1e1e1;">
        <!-- 工具栏 -->
        <div id="toolbar-container" style="border-bottom: 1px solid #e1e1e1;"></div>
        <!-- 编辑器 -->
        <div id="editor-container" style="height: 400px;"></div>
    </div>
    <script src="/lib/layui-2.7.0/layui.js"></script>
    <script src="/lib/wangeditor/index.js"></script>
    <script>
        const {
            createEditor,
            createToolbar
        } = window.wangEditor;

        // 编辑器配置
        const editorConfig = {};
        editorConfig.placeholder = '请输入内容';

        // 工具栏配置
        const toolbarConfig = {};

        // 创建编辑器
        const editor = createEditor({
            selector: '#editor-container',
            config: editorConfig,
            mode: 'default'
        });

        // 创建工具栏
        const toolbar = createToolbar({
            editor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'default'
        });
    </script>
</body>

</html>

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

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

场景描述

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

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

分析思路

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

  • 样式丢失

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

    • 为什么会丢失呢?

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

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

      例如,wangEditor 可以识别 <strong>hello</strong> 为加粗,但无法识别 <span style="font-weight: bold;">hello</span> 等其他加粗方式。

    • 解决措施

      • 了解差异,对内容样式做额外的处理,使其尽量符合 wangEditor 支持的格式。
      • 代码实践(这只是我的思路,你还可以有更好的实现思路~~)
      // 例如缩进会超出边框,直接过滤掉相关样式即可
      html = html.replace(/text\\-indent:\\-(.*?)pt/gi, '')
      
  • 图片丢失

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

关键点:图片如何粘贴

【开门见山】

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

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

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

~~原来,其实道理就这么简单!!

最终实现代码(因为仅涉及 JS 代码,所以只提供 JS 代码)

  • 自定义 wangEditor 粘贴
// 其他代码
....

<script>
    const {
        createEditor,
        createToolbar
    } = window.wangEditor;

    // 编辑器配置
    const editorConfig = {};
    editorConfig.placeholder = '请输入内容';

    // 自定义粘贴
    editorConfig.customPaste = (editor, event) => {

        // 获取粘贴的html部分(??没错粘贴word时候,一部分内容就是html),该部分包含了图片img标签
        let html = event.clipboardData.getData('text/html');

        // 获取rtf数据(从word、wps复制粘贴时有),复制粘贴过程中图片的数据就保存在rtf中
        const rtf = event.clipboardData.getData('text/rtf');

        if (html && rtf) { // 该条件分支即表示要自定义word粘贴

            // 列表缩进会超出边框,直接过滤掉
            html = html.replace(/text\\-indent:\\-(.*?)pt/gi, '')

            // 从html内容中查找粘贴内容中是否有图片元素,并返回img标签的属性src值的集合
            const imgSrcs = findAllImgSrcsFromHtml(html);

            // 如果有
            if (imgSrcs && Array.isArray(imgSrcs) && imgSrcs.length) {

                // 从rtf内容中查找图片数据
                const rtfImageData = extractImageDataFromRtf(rtf);

                // 如果找到
                if (rtfImageData.length) {

                    // TODO:此处可以将图片上传到自己的服务器上

                    // 执行替换:将html内容中的img标签的src替换成ref中的图片数据,如果上面上传了则为图片路径
                    html = replaceImagesFileSourceWithInlineRepresentation(html, imgSrcs, rtfImageData)
                    editor.dangerouslyInsertHtml(html);

                }
            }

            // 阻止默认的粘贴行为
            event.preventDefault();
            return false;
        } else {
            return true;
        }
    }

    // 工具栏配置
    const toolbarConfig = {};

    // 创建编辑器
    const editor = createEditor({
        selector: '#editor-container',
        config: editorConfig,
        mode: 'default'
    });

    // 创建工具栏
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default'
    });
</script>
.....
// 其他代码
  • 工具函数(上面的代码中有用到)
<script>
/**
 * 从html代码中匹配返回图片标签img的属性src的值的集合
 * @param htmlData
 * @return Array
 */
function findAllImgSrcsFromHtml(htmlData) {

    let imgReg = /<img.*?(?:>|\\/>)/gi; //匹配图片中的img标签
    let srcReg = /src=[\\'\\"]?([^\\'\\"]*)[\\'\\"]?/i; // 匹配图片中的src

    let arr = htmlData.match(imgReg); //筛选出所有的img
    if (!arr || (Array.isArray(arr) && !arr.length)) {
        return false;
    }


    let srcArr = [];
    for (let i = 0; i < arr.length; i++) {
        let src = arr[i].match(srcReg);
        // 获取图片地址
        srcArr.push(src[1]);
    }

    return srcArr;
}

/**
 * 从rtf内容中匹配返回图片数据的集合
 * @param rtfData
 * @return Array
 */
function extractImageDataFromRtf(rtfData) {
    if (!rtfData) {
        return [];
    }

    const regexPictureHeader = /{\\\\pict[\\s\\S]+?({\\\\\\*\\\\blipuid\\s?[\\da-fA-F]+)[\\s}]*/
    const regexPicture = new RegExp('(?:(' + regexPictureHeader.source + '))([\\\\da-fA-F\\\\s]+)\\\\}', 'g');
    const images = rtfData.match(regexPicture);
    const result = [];

    if (images) {
        for (const image of images) {
            let imageType = false;

            if (image.includes('\\\\pngblip')) {
                imageType = 'image/png';
            } else if (image.includes('\\\\jpegblip')) {
                imageType = 'image/jpeg';
            }

            if (imageType) {
                result.push({
                    hex: image.replace(regexPictureHeader, '').replace(/[^\\da-fA-F]/g, ''),
                    type: imageType
                });
            }
        }
    }

    return result;
}

/**
 * 将html内容中img标签的属性值替换
 * @param htmlData html内容
 * @param imageSrcs html中img的属性src的值的集合
 * @param imagesHexSources rtf中图片数据的集合,与html内容中的img标签对应
 * @param isBase64Data 是否是Base64的图片数据
 * @return String
 */
function replaceImagesFileSourceWithInlineRepresentation(htmlData, imageSrcs, imagesHexSources, isBase64Data =
    true) {
    if (imageSrcs.length === imagesHexSources.length) {
        for (let i = 0; i < imageSrcs.length; i++) {
            const newSrc = isBase64Data ?
                `data:${imagesHexSources[i].type};base64,${_convertHexToBase64(imagesHexSources[i].hex)}` :
                imagesHexSources[i];

            htmlData = htmlData.replace(imageSrcs[i], newSrc);
        }
    }

    return htmlData;
}

/**
 * 十六进制转base64
 */
function _convertHexToBase64(hexString) {
    return btoa(hexString.match(/\\w{2}/g).map(char => {
        return String.fromCharCode(parseInt(char, 16));
    }).join(''));
}
</script>

总结

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

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号