JS基础异常之ueditor复制word文档表格时，格式错乱

最新推荐文章于 2025-09-21 13:44:26 发布

原创

最新推荐文章于 2025-09-21 13:44:26 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍了解决UEditor在复制Word表格时格式错乱的问题。UEditor会移除宽度单位%，导致格式变化。通过监听内容变更事件，遍历body子节点，将table宽度单位设为%，实现格式还原。

ueditor网址

问题:ueditor的编辑区在复制来自word的表格数据时，会出现格式错乱的问题

原因：
ueidtor在复制来至word的数据时，会对这些数据格式进行过滤。如果复制的数据中存在宽度单位为%的数据，会将%号去掉。
例如width=“200%”，变成200，此时即默认为宽度为200px；

我们在复制Wps表格(部分)时，其table标签及td标签的width单位就是%
而我们只要将最外层的table的width单位变更为%属性即可

解决方法：
利用ue的内容变更事件，将数据中的“%”还原，流程如下：
1.添加ue的内容变更事件
2.捕捉当前editor的body内容(复制数据时，是将数据复制到body内)
3.依次遍历body的子节点(可能复制多个表格),将子节点中时table数据的标签属性设置为%类型

代码如下

    //监听粘贴事件，解决"复制表格自动把标签的width元素的百分比数据变成数值"的bug
    $(function () {
        //获取ue元素
        var ue = UE.getEditor('editor');
        //为ue绑定内容变更事件
        ue.addListener('contentChange', function () {
            //遍历body子节点
            for (var i = 0; i < ue.body.children.length; i++) {
                //获取当前节点的width属性
                var TagValue = ue.body.children[i].getAttribute('width');
                //如果widt