让UEditor支持表格本身的对齐方式（不是td内容）

最新推荐文章于 2023-06-25 20:27:15 发布

思想永无止境

最新推荐文章于 2023-06-25 20:27:15 发布

阅读量354

点赞数

分类专栏： Web前端文章标签：前端 css ueditor html

欢迎转载，转载请注明原地址，谢谢！

本文链接：https://blog.csdn.net/u012643122/article/details/127441441

版权

Web前端专栏收录该内容

86 篇文章 1 订阅

订阅专栏

1.第一步，修改queryCommandState函数，让选择表格时，对齐插件处于可用状态。
2.第二步，修改doJustify函数，判断是表格元素时，设置对应的样式。

UE.plugins['justify']=function(){
        var me=this,
            block = domUtils.isBlockElm,
            defaultValue = {
                left:1,
                right:1,
                center:1,
                justify:1
            },
            doJustify = function (range, style) {
                var bookmark = range.createBookmark(),
                    filterFn = function (node) {
                        return node.nodeType == 1 ? node.tagName.toLowerCase() != 'br' && !domUtils.isBookmarkNode(node) : !domUtils.isWhitespace(node);
                    };
    
                range.enlarge(true);
                var bookmark2 = range.createBookmark(),
                    current = domUtils.getNextDomNode(bookmark2.start, false, filterFn),
                    tmpRange = range.cloneRange(),
                    tmpNode;
                while (current && !(domUtils.getPosition(current, bookmark2.end) & domUtils.POSITION_FOLLOWING)) {
                    if(current.nodeName.toLowerCase()=="table"){
                        if(style.toLowerCase()=="left"){
                            current.setAttribute("style","margin:0px auto 0px 0px;");
                        }else if(style.toLowerCase()=="center"){
                            current.setAttribute("style","margin:0px auto 0px auto;");
                        }else if(style.toLowerCase()=="right"){
                            current.setAttribute("style","margin:0px 0px 0px auto;");
                        }else{
                            current.setAttribute("style","margin:auto;");
                        }
                    }
                    if (current.nodeType == 3 || !block(current)) {
                        tmpRange.setStartBefore(current);
                        while (current && current !== bookmark2.end && !block(current)) {
                            tmpNode = current;
                            current = domUtils.getNextDomNode(current, false, null, function (node) {
                                return !block(node);
                            });
                        }
                        tmpRange.setEndAfter(tmpNode);
                        var common = tmpRange.getCommonAncestor();
                        if (!domUtils.isBody(common) && block(common)) {
                            domUtils.setStyles(common, utils.isString(style) ? {'text-align':style} : style);
                            current = common;
                        } else {
                            var p = range.document.createElement('p');
                            domUtils.setStyles(p, utils.isString(style) ? {'text-align':style} : style);
                            var frag = tmpRange.extractContents();
                            p.appendChild(frag);
                            tmpRange.insertNode(p);
                            current = p;
                        }
                        current = domUtils.getNextDomNode(current, false, filterFn);
                    } else {
                        current = domUtils.getNextDomNode(current, true, filterFn);
                    }
                }
                return range.moveToBookmark(bookmark2).moveToBookmark(bookmark);
            };
    
        UE.commands['justify'] = {
            execCommand:function (cmdName, align) {
                var range = this.selection.getRange(),
                    txt;
    
                //闭合时单独处理
                if (range.collapsed) {
                    txt = this.document.createTextNode('p');
                    range.insertNode(txt);
                }
                doJustify(range, align);
                if (txt) {
                    range.setStartBefore(txt).collapse(true);
                    domUtils.remove(txt);
                }
    
                range.select();
    
    
                return true;
            },
            queryCommandValue:function () {
                var startNode = this.selection.getStart(),
                    value = domUtils.getComputedStyle(startNode, 'text-align');
                return defaultValue[value] ? value : 'left';
            },
            queryCommandState:function () {
                // var start = this.selection.getStart(),
                //     cell = start && domUtils.findParentByTagName(start, ["td", "th","caption"], true);
                // return cell? -1:0;
                return 0;//不管选择什么元素都能设置对齐方式
            }
    
        };
    };