U.UF.E.setRangeStyle() 设置光标选中的选区样式。

函数源码：

/**
 * 设置选区样式
 * @param attr  {object}  给指定的光标设置样式
 * @param range {object} 非必传参数 range光标对象
 * */
U.UF.E.setRangeStyle = function (attr, range) {
    range = range || U.UF.E.getRangeAt(); //获取光标处理
    var _start = range.startContainer; //选区起始元素
    var _end = range.endContainer; //选区结束元素
    var _startoffset = range.startOffset; //开始位置
    var _endoffset = range.endOffset; //结束位置
    var _startline = U.UF.E.getLineElement(_start); //获取选区起始行元素
    var _endline = U.UF.E.getLineElement(_end); //获取选区结束行元素
    var _frag = $$("frag"); //创建临时元素 用于做记录

    //不同行处理
    //判断是否选区在同一行
    if (_startline != _endline) {
        var _rangselect = range.extractContents().childNodes; //获取选区的所有元素
        //第一行样式设置
        U.UF.E.setStyle(attr, _rangselect[0]);

        ///记录新选区的起始元素
        var _start = _rangselect[0].childNodes[0];
        //设置样式后的元素循环添加到第一行中
        while (_rangselect[0].childNodes[0]) {
            _startline.appendChild(_rangselect[0].childNodes[0]);
        }

        //循环除第一行和最后一行的每一行的处理
        for (var i = 0; i < _rangselect.length - 1;) {
            //设置每一行的样式
            U.UF.E.setStyle(attr, _rangselect[i]);
            //追加到临时标签中
            _frag.appendChild(_rangselect[i]);
        }

        //最后一行样式设置
        U.UF.E.setStyle(attr, _rangselect[_rangselect.length - 1]);
        //获取选区最后一行元素
        var _end = _rangselect[_rangselect.length - 1].childNodes[_rangselect[_rangselect.length - 1].childNodes.length - 1];
        //设置样式后的元素循环添加到最后一行中
        while (_rangselect[_rangselect.length - 1].childNodes[0]) {
            $(_endline).append(_rangselect[_rangselect.length - 1].childNodes[_rangselect[_rangselect.length - 1].childNodes.length - 1], 0, _endline.firstChild);
        }

        range.insertNode(_frag); //插入需要写入的内容
        U.UF.E.setRange(_start, _end, 0, 1, range);  //设置选区 重新聚焦
    }
    //同行处理
    else {
        var _parentspan = _start.parentNode; //获取起始标签的上级元素
        //如果不为span元素 则直接设置样式
        if (_parentspan.tagName.toLowerCase() !== 'span') {
            var _rangselect = range.extractContents(); //获取选区的所有元素
            U.UF.E.setStyle(attr, _rangselect);
            range.insertNode(_rangselect);
            return;
        }
        var _startsplitel = U.UF.E.splitText(_start, _startoffset); //将起始标签拆分成新的起始文本标签  返回剩余的标签
        var _endsplitel = U.UF.E.splitText(_startsplitel, _endoffset - _startoffset); //在剩余标签中拆分成选中和结束两块文本标签


        //如果第一个文本标签存在内容则创建新的span标签
        if (_startsplitel.data) {
            //创建新的span标签 该标签为起始span标签（选区前的span标签）
            var _span = $$("span", {"style": {"cssText": _parentspan.style.cssText}, "innerHTML": _start.data});
            //替换起始文本标签为起始span标签
            _parentspan.replaceChild(_span, _start);
        }

        //记录原有的样式属性
        attr.cssText = _parentspan.style.cssText;
        //创建新的span标签  该标签为选区的span标签
        var _rangspan = $$("span", {"style": attr, "innerHTML": _startsplitel.data});
        //替换选区文本标签为选区span标签
        _parentspan.replaceChild(_rangspan, _startsplitel);

        //如果结束文本标签存在内容则创建新的span标签
        if (_endsplitel.data) {
            //创建新的span标签 该标签为结束span标签（选区后的span标签）
            var _span1 = $$("span", {"style": {"cssText": _parentspan.style.cssText}, "innerHTML": _endsplitel.data});
            //替换结束文本标签为结束span标签
            _parentspan.replaceChild(_span1, _endsplitel);
        }
        //替换原有元素
        _parentspan.outerHTML = _parentspan.innerHTML;
    }
};

/**
 * 设置样式
 * @param attr {object}  给指定的光标设置样式
 * @param el   {object}  设置样式的元素
 */
U.UF.E.setStyle = function (attr, el) {
    var _nowattr, //记录当前属性 该变量的作用主要用于记录新的样式
        _nowspan, //记录当前元素的span元素
        _span = U.UF.E.getSpanElement(el); //获取行级元素
    var _spanText = _span && _span.innerHTML; //获取行级元素的innerHTML
    //根据内容是否相等  判断是否选择整个span标签
    if (_span && _spanText == el.data) {
        _nowattr = U.UF.E.setSpecialAttr(_span, attr); //整理特殊样式
        $(_span).css(_nowattr);  //设置样式
    }
    //如果设置样式的元素不为整个span标签
    else {
        var _rangselect = el.childNodes; //获取设置样式元素下的所有子级
        //循环给每一个子级添加样式
        for (var i = 0; i < _rangselect.length; i++) {
            //根据是否存在tagName（标签名） 判断是否为元素节点
            //如果为元素节点则直接设置样式
            if (_rangselect[i].tagName) {
                _nowattr = U.UF.E.setSpecialAttr(_rangselect[i], attr); //整理特殊样式
                $(_rangselect[i]).css(_nowattr); //设置样式
            }
            //否则则创建新的span标签
            else {
                _nowspan = U.UF.E.getSpanElement(_rangselect[i]); //判断当前元素是否存在父级span元素 存在则所有有原本的样式要继承
                _nowattr = attr; //记录当前属性  另作记录不覆盖传参的值
                //如果存在父级span元素 则需要记录原本的样式
                if (_nowspan) {
                    attr.cssText = _nowspan.style.cssText;
                    _nowattr = U.UF.E.setSpecialAttr(_nowspan, attr);
                }
                //创建span标签 并设置样式及内容  替换原本的文本标签
                _rangselect[i].parentNode.replaceChild($$("span", {
                    "innerHTML": _rangselect[i].nodeValue,
                    "style": _nowattr
                }), _rangselect[i]);
            }
        }
    }
};

 

    作者： 14互联网G5-2 杨思强 


    信息录入: 14互联网G5-2 杨思强