拷贝 Word 表格内容到富文本编辑器并且保留样式

事情是这样的，有一天测试发现从 MicroSoft Word 那边复制的 Excel 表格内容粘贴到富文本编辑器里面会存在样式丢失。

我自身用的是 Jodit-React 编辑器，我起始以为是编辑器问题，然后就去网上测试了几个其他开源编辑器比如 WangEditor、Lexical、TipTap，都不支持，如果全部不支持，我就可以得出结论，说技术上做不到，然后抛锅。不过最后测试发现商业编辑器 CKEditor 和 tinymce 是可以做到直接粘贴 Word 表格内容并能保留其样式。

后面通过收集资料和调试，发现实现起来并不难，无法多一步对从 MS Word 复制过来的 html 文本进行格式转换再插入编辑器，实现起来也不难，通过创建监听粘贴事件，对其复制过来的 html 字符串进行格式转换即可：

监听 paste 事件，其事件对象 ClipboardEvent 里面包含了剪贴板内的数据。

• clipboardData.types 包含了剪贴板里面项目的数据类型，可能是文本或是文件。
• clipboardData.items 不同类型的数据。
• clipboardData.getData() 获取指定类型的数据

juice 是一个将网页内部样式转为元素内联样式的工具库；

具体实现代码：

// Jodit 配置
events: {
    paste: (event) => {
        const { clipboardData } = event;
        // 判断是否含有 html 类型的内容
        if (clipboardData.types.includes("text/html")) {
            const html = event.clipboardData.getData('text/html');
            const format_result = juice(html)
            const dom = new DOMParser().parseFromString(format_result, 'text/html');
            richEditor.selection.insertHTML(dom.body.children[0].outerHTML);
            event.preventDefault();
        };
    }
}