"use strict"; /** * 使用样式事件 */ define(function (require, exports, module) { function handle(event) { let utils = require("../../common/utils"); let curS = utils.GetSelection(); let curP = utils.GetEventTarget(event); let styleK = curP.getAttribute("data-k"); let styleV = curP.getAttribute("data-v"); if (styleK === undefined || styleK === null) { styleK = curP.closest("span").getAttribute("data-k"); styleV = curP.closest("span").getAttribute("data-v"); // console.log("closest: ", curP, curP.closest("span")) } for (let i = 0; i < curS.rangeCount; i++) { let curRange = curS.getRangeAt(i); let curCommonEle = curRange.commonAncestorContainer; let start = curRange.startOffset; let end = curRange.endOffset; if (start > end) { let tmpS = start; start = end; end = tmpS; } if (start === end) { continue } // //一个元素节点,例如

。 // let curComIsSpan = curCommonEle.nodeType === 1 && curCommonEle.nodeName === "SPAN"; // let curComParentIsP = curCommonEle.parentNode.nodeType === 1 && curCommonEle.parentNode.nodeName === "P"; // let curComParentIsDiv = curCommonEle.parentNode.nodeType === 1 && curCommonEle.parentNode.nodeName === "DIV"; // let curComParentIsSpan = curCommonEle.parentNode.nodeType === 1 && (curCommonEle.parentNode.nodeName === 'SPAN"' || curCommonEle.parentNode.nodeName === 'SPAN'); // console.log(" 当前选区信息 : ", curRange, // "\ncurCommonEle: ", curCommonEle, // "\ncurCommonEleParent: ", curCommonEle.parentNode, curCommonEle.parentNode.nodeType, curCommonEle.parentNode.nodeName, // "\ncurCommonEleParentParent: ", curCommonEle.parentNode.parentNode, curCommonEle.parentNode.parentNode.nodeType, curCommonEle.parentNode.parentNode.nodeName, // // "\ncurComParentIsSpan: ", curComParentIsSpan, // "\ncurComParentIsP : ", curComParentIsP, // "\ncurComParentIsDiv", curComParentIsDiv, // "\ncurComIsSpan", curComIsSpan, // // "\nstyleK: ", styleK, // "\nstyleV: ", styleV, // "\ntart: ", start, // "\nend: ", end); let curSpanContent = curCommonEle; if (curSpanContent.nodeName !== "SPAN" || curSpanContent.getAttribute("data-flag") !== "span_content") { curSpanContent = curSpanContent.parentElement.closest("span[data-flag='span_content']"); } console.log("curSpanContent : ", curSpanContent, curCommonEle); if (curSpanContent.childNodes.length <= 0) { continue } let firstItem = curSpanContent.childNodes[0]; console.log("curSpanContent : ", curSpanContent, curSpanContent.childNodes, firstItem.nodeName, firstItem.nodeType); let isEmptyStyle = curSpanContent.childNodes.length === 1 && firstItem.nodeName === "#text" && firstItem.nodeType === 3; if (isEmptyStyle) { let copySpan = curSpanContent.cloneNode(); copySpan.innerHTML = ""; for (let j = 0; j < curSpanContent.innerText.length; j++) { // console.log(curStartP.innerText.charAt(j)) if (j >= start && j < end) { let tmpSpan = document.createElement("span"); tmpSpan.innerText = curSpanContent.innerText.charAt(j); applySpanStyleKV(tmpSpan, styleK, styleV); copySpan.append(tmpSpan); } else { let tmpSpan = document.createElement("span"); tmpSpan.innerText = curSpanContent.innerText.charAt(j); copySpan.append(tmpSpan); } } curSpanContent.innerHTML = copySpan.innerHTML; //光标保持 let s = window.getSelection(); if (s.rangeCount > 0) s.removeAllRanges(); let newR = document.createRange(); //重新获取元素 let tmpP = curSpanContent; let childrenSize = tmpP.childNodes.length; console.log("debug007: ", tmpP, start, end, childrenSize) newR.setStart(tmpP, start); newR.setEnd(tmpP, end); //区域 添加 到选区 s.addRange(newR); } else { let total = 0, effectNum = 0; for (let j = 0; j < curSpanContent.childNodes.length; j++) { let tmpSpan = curSpanContent.childNodes[j]; if (curS.containsNode(tmpSpan, true)) { total++; if (spanContainsStyleKV(tmpSpan, styleK, styleV)) { console.dir(tmpSpan); } else { effectNum++; applySpanStyleKV(tmpSpan, styleK, styleV); } } } //如果没有设置任何一个 则取消 if (effectNum === 0) { for (let j = 0; j < curSpanContent.childNodes.length; j++) { let tmpSpan = curSpanContent.childNodes[j]; if (curS.containsNode(tmpSpan, true)) { removeSpanStyleKV(tmpSpan, styleK, styleV); } } } } } } function removeSpanStyleKV(span, styleK, styleV) { let kList = styleK.toString().split(","); let vList = styleV.toString().split(","); for (let i = 0; i < kList.length; i++) { if (span.style.getPropertyValue(kList[0]) === vList[0]) { span.style.removeProperty(kList[0]); } } } function spanContainsStyleKV(span, styleK, styleV) { let kList = styleK.toString().split(","); let vList = styleV.toString().split(","); let total = kList.length, match = 0; for (let i = 0; i < kList.length; i++) { if (span.style.getPropertyValue(kList[0]) === vList[0]) { match++; } } return total === match; } function applySpanStyleKV(span, styleK, styleV) { let kList = styleK.toString().split(","); let vList = styleV.toString().split(","); for (let i = 0; i < kList.length; i++) { span.style.setProperty(kList[i], vList[i]); } } //导出 exports.handle = handle; });