js 异常之ueditor复制word文档表格时,格式错乱

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');
                //如果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 + "%");
                    }
                }
            }
        });
    });

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

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

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章