diff --git a/static/js/event/impl/ApplyStyleEventImpl.js b/static/js/event/impl/ApplyStyleEventImpl.js
index 2138585..7011ce3 100644
--- a/static/js/event/impl/ApplyStyleEventImpl.js
+++ b/static/js/event/impl/ApplyStyleEventImpl.js
@@ -7,70 +7,85 @@ define(function (require, exports, module) {
function handle(event) {
let utils = require("../../common/utils");
let curS = utils.GetSelection();
+ let curRange = curS.getRangeAt(0); //只考虑一个选区场景
+ let curNode = utils.GetEventTarget(event);
+ //只处理选择的是一个范围。
+ if (curS.type !== "Range") {
+ return;
+ }
+ //选区信息
+ console.dir(curS)
+ console.dir(curRange)
- let curP = utils.GetEventTarget(event);
- let styleK = curP.getAttribute("data-k");
- let styleV = curP.getAttribute("data-v");
+ //获取样式
+ let styleK = curNode.getAttribute("data-k");
+ let styleV = curNode.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"))
+ styleK = curNode.closest("span").getAttribute("data-k");
+ styleV = curNode.closest("span").getAttribute("data-v");
+ // console.log("closest: ", curNode, curNode.closest("span"))
+ }
+ console.log("styleK: ", styleK, " styleV: ", styleV);
+
+ //获取开始结束的区域
+ let curStartContainerEle = curRange.startContainer;
+ let curEndContainerEle = curRange.endContainer;
+ let taskMap = new Map;
+ let start = curRange.startOffset;
+ let end = curRange.endOffset;
+ if (start > end) {
+ let tmpS = start;
+ start = end;
+ end = tmpS;
}
- 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) {
- let tmpS = start;
- start = end;
- end = tmpS;
+ //处理选区数量
+ let pStart = getSpanContentOfP(curStartContainerEle);
+ let pEnd = getSpanContentOfP(curEndContainerEle);
+ console.dir(curStartContainerEle)
+ console.dir(curEndContainerEle)
+ console.dir(pStart)
+ console.dir(pEnd)
+ if (pStart.getAttribute("id") === pEnd.getAttribute("id")) {
+ taskMap.set(pStart.getAttribute("id"), pStart)
+ } else {
+ //修正顺序
+ let tmp = pStart;
+ if (parseInt(pStart.getAttribute("data-order")) > parseInt(pEnd.getAttribute("data-order"))) {
+ pStart = pEnd;
+ pEnd = tmp;
}
+ //fill p
+ let nextTask = pStart;
+ taskMap.set(nextTask.getAttribute("id"), nextTask)
+ while (true) {
+ nextTask = nextTask.nextSibling;
+ taskMap.set(nextTask.getAttribute("id"), nextTask)
+ if (nextTask.getAttribute("id") === pEnd.getAttribute("id")) {
+ break
+ }
+ console.dir(nextTask)
+ }
+ }
+ //选择单行还是多行
+ let multiply = taskMap.size > 1;
- 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) {
+ //遍历设置样式
+ console.dir(taskMap)
+ for (let [key, curP] of taskMap) {
+ let curSpanContent = curP.querySelector("span[data-flag='span_content']");
+ console.log("curP : ", curP, "\n", "\nkey:", key, "\ncurSpanContent: ", curSpanContent);
+ if (curSpanContent.childNodes === undefined || curSpanContent.childNodes === null || curSpanContent.childNodes.length <= 0) {
continue
}
-
- for (let [key, curSpanContent] of taskMap) {
- console.log("curSpanContent : ", curSpanContent, "\n", curCommonEle, "\nsize:", taskMap.size);
- console.dir(taskMap)
- console.dir(curS)
- console.dir(curRange)
-
- 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))
+ let firstItem = curSpanContent.childNodes[0];
+ console.log("curSpanContent : ", curSpanContent, curSpanContent.childNodes.length, 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++) {
+ if (!multiply) { //单选
if (j >= start && j < end) {
let tmpSpan = document.createElement("span");
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
@@ -81,46 +96,75 @@ define(function (require, exports, module) {
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
copySpan.append(tmpSpan);
}
+ } else { //多选
+ if (curP.getAttribute("id") === pStart.getAttribute("id")) { //首行
+ if (j >= start) {
+ 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);
+ }
+ } else if (curP.getAttribute("id") === pEnd.getAttribute("id")) { //尾行
+ if (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);
+ }
+ } else {
+ let tmpSpan = document.createElement("span");
+ tmpSpan.innerText = curSpanContent.innerText.charAt(j);
+ applySpanStyleKV(tmpSpan, styleK, styleV);
+ copySpan.append(tmpSpan);
+ }
}
+ }
- curSpanContent.innerHTML = copySpan.innerHTML;
+ 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);
+ //光标保持. 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)) {
+ total++;
+ if (spanContainsStyleKV(tmpSpan, styleK, styleV)) {
+ console.dir(tmpSpan);
+ } else {
+ effectNum++;
+ applySpanStyleKV(tmpSpan, styleK, styleV);
+ }
}
- } else {
- let total = 0, effectNum = 0;
+ }
+
+ //如果没有设置任何一个 则取消
+ if (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);
- }
+ removeSpanStyleKV(tmpSpan, styleK, styleV);
}
}
}
@@ -160,12 +204,12 @@ define(function (require, exports, module) {
}
- function getSpanContent(item) {
+ function getSpanContentOfP(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
+ return tmp.parentNode;
}
//导出
diff --git a/static/yanxuelu.html b/static/yanxuelu.html
index f5b5014..e598d68 100644
--- a/static/yanxuelu.html
+++ b/static/yanxuelu.html
@@ -7,7 +7,7 @@
📒
+ content="width=device-width, height=device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
@@ -31,180 +31,192 @@
-
-
-
-
测试
-
-
-
- ｜
-
- ｜
-
-
+
+
+
+
测试
+
+
+
+ ｜
+
+ ｜
+
-
-
-
-
-
-
+
-
-
-
- 测试编辑
-
-
-
-
-
+
+
+
+ 测试编辑
+
+
+
+
+
-
+
+
+