JS基础 异常之ueditor复制word文档表格时，格式错乱_avue-ueditor复制表格样式失效

ueditor网址

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

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

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

解决方法：
利用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');
                //如果width存在，则判定属性是否被改变
                //注：ueidtor在复制<table>和<tr>数据是，会把百分比号去掉，例如200%变更为200
                if (TagValue != null && TagValue != undefined && TagValue != "") {
                    //获取width的单位
                    var _widthUnit = TagValue.replace(/\d+/g, '');
                    //如果单位为空，则说明已变更过，将之变更回来
                    if (_widthUnit == '' || _widthUnit == undefined) {
                        ue.body.children[i].setAttribute('width', TagValue + "%");
                    }
                }
            }
        });
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

以上代码放置在使用到了ueidtor插件的页面中即可

我这边比较贪懒
如果有更好方法的，可以一起分享

错误想法:
1.一开始想绑定粘贴事件，发现不管是editor内的标签，还是其ueditor本身，都绑定不到，于是作罢。
2.然后想要获取ueditor的document元素，并获取document属性的节点数据(因为不止是最外层的table被变更)，但是后续发现不像js的document元素 一样，可以获取子孙节点的数据，无效
所以目前只能借助ueidtor本身的功能，进行类似二次开发的操作

另外，ueidtor之所以会将width的单位去除，一开始是为了数据安全。而现在ueidtor目前已经不维护，所以可以的话。还是选用其他的插件，例如wangeditor