diff --git a/static/js/event/impl/ApplyStyleEventImpl.js b/static/js/event/impl/ApplyStyleEventImpl.js index dc80a1d..2138585 100644 --- a/static/js/event/impl/ApplyStyleEventImpl.js +++ b/static/js/event/impl/ApplyStyleEventImpl.js @@ -20,6 +20,9 @@ define(function (require, exports, module) { for (let i = 0; i < curS.rangeCount; i++) { let curRange = curS.getRangeAt(i); let curCommonEle = curRange.commonAncestorContainer; + let curStartContainerEle = curRange.startContainer; + let curEndContainerEle = curRange.endContainer; + let taskMap = new Map; let start = curRange.startOffset; let end = curRange.endOffset; if (start > end) { @@ -27,93 +30,97 @@ define(function (require, exports, module) { 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); + let tmpStart = getSpanContent(curStartContainerEle); + let tmpEnd = getSpanContent(curEndContainerEle); + if (tmpStart.getAttribute("id") === tmpEnd.getAttribute("id")) { + taskMap.set(tmpStart.getAttribute("id"), tmpStart) + } else { + let tmp = tmpStart; + if (parseInt(tmpStart.getAttribute("data-order")) > parseInt(tmpEnd.getAttribute("data-order"))) { + tmpStart = tmpEnd; + tmpEnd = tmp; + } + taskMap.set(tmpStart.getAttribute("id"), tmpStart) + while (true) { + let nextTask = tmpStart.nextSibling; + taskMap.set(nextTask.getAttribute("id"), nextTask); + if (nextTask.getAttribute("id") === tmpEnd.getAttribute("id")) { + break } } + } + if (taskMap.size === 1 && start === end) { + continue + } - curSpanContent.innerHTML = copySpan.innerHTML; + for (let [key, curSpanContent] of taskMap) { + console.log("curSpanContent : ", curSpanContent, "\n", curCommonEle, "\nsize:", taskMap.size); + console.dir(taskMap) + console.dir(curS) + console.dir(curRange) - //光标保持 - 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++; + if (curSpanContent.childNodes === undefined || curSpanContent.childNodes === null || 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); } } - } - //如果没有设置任何一个 则取消 - if (effectNum === 0) { + curSpanContent.innerHTML = copySpan.innerHTML; + + //光标保持. for 单行 + if (taskMap.size === 1) { + 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)) { - removeSpanStyleKV(tmpSpan, styleK, styleV); + 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); + } } } } @@ -152,6 +159,15 @@ define(function (require, exports, module) { } } + + function getSpanContent(item) { + let tmp = item; + if (item.nodeName !== "SPAN" || item.getAttribute("data-flag") !== "span_content") { + tmp = item.parentElement.closest("span[data-flag='span_content']"); + } + return tmp + } + //导出 exports.handle = handle; }); \ No newline at end of file