to:sync
This commit is contained in:
shaoyongjun
parent
95e072ab18
commit
e67eabd237
@ -7,19 +7,27 @@ define(function (require, exports, module) {
|
|||||||
function handle(event) {
|
function handle(event) {
|
||||||
let utils = require("../../common/utils");
|
let utils = require("../../common/utils");
|
||||||
let curS = utils.GetSelection();
|
let curS = utils.GetSelection();
|
||||||
|
let curRange = curS.getRangeAt(0); //只考虑一个选区场景
|
||||||
let curP = utils.GetEventTarget(event);
|
let curNode = utils.GetEventTarget(event);
|
||||||
let styleK = curP.getAttribute("data-k");
|
//只处理选择的是一个范围。
|
||||||
let styleV = curP.getAttribute("data-v");
|
if (curS.type !== "Range") {
|
||||||
if (styleK === undefined || styleK === null) {
|
return;
|
||||||
styleK = curP.closest("span").getAttribute("data-k");
|
|
||||||
styleV = curP.closest("span").getAttribute("data-v");
|
|
||||||
// console.log("closest: ", curP, curP.closest("span"))
|
|
||||||
}
|
}
|
||||||
|
//选区信息
|
||||||
|
console.dir(curS)
|
||||||
|
console.dir(curRange)
|
||||||
|
|
||||||
for (let i = 0; i < curS.rangeCount; i++) {
|
//获取样式
|
||||||
let curRange = curS.getRangeAt(i);
|
let styleK = curNode.getAttribute("data-k");
|
||||||
let curCommonEle = curRange.commonAncestorContainer;
|
let styleV = curNode.getAttribute("data-v");
|
||||||
|
if (styleK === undefined || styleK === null) {
|
||||||
|
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 curStartContainerEle = curRange.startContainer;
|
||||||
let curEndContainerEle = curRange.endContainer;
|
let curEndContainerEle = curRange.endContainer;
|
||||||
let taskMap = new Map;
|
let taskMap = new Map;
|
||||||
@ -31,46 +39,53 @@ define(function (require, exports, module) {
|
|||||||
end = tmpS;
|
end = tmpS;
|
||||||
}
|
}
|
||||||
|
|
||||||
let tmpStart = getSpanContent(curStartContainerEle);
|
//处理选区数量
|
||||||
let tmpEnd = getSpanContent(curEndContainerEle);
|
let pStart = getSpanContentOfP(curStartContainerEle);
|
||||||
if (tmpStart.getAttribute("id") === tmpEnd.getAttribute("id")) {
|
let pEnd = getSpanContentOfP(curEndContainerEle);
|
||||||
taskMap.set(tmpStart.getAttribute("id"), tmpStart)
|
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 {
|
} else {
|
||||||
let tmp = tmpStart;
|
//修正顺序
|
||||||
if (parseInt(tmpStart.getAttribute("data-order")) > parseInt(tmpEnd.getAttribute("data-order"))) {
|
let tmp = pStart;
|
||||||
tmpStart = tmpEnd;
|
if (parseInt(pStart.getAttribute("data-order")) > parseInt(pEnd.getAttribute("data-order"))) {
|
||||||
tmpEnd = tmp;
|
pStart = pEnd;
|
||||||
|
pEnd = tmp;
|
||||||
}
|
}
|
||||||
taskMap.set(tmpStart.getAttribute("id"), tmpStart)
|
//fill p
|
||||||
|
let nextTask = pStart;
|
||||||
|
taskMap.set(nextTask.getAttribute("id"), nextTask)
|
||||||
while (true) {
|
while (true) {
|
||||||
let nextTask = tmpStart.nextSibling;
|
nextTask = nextTask.nextSibling;
|
||||||
taskMap.set(nextTask.getAttribute("id"), nextTask);
|
taskMap.set(nextTask.getAttribute("id"), nextTask)
|
||||||
if (nextTask.getAttribute("id") === tmpEnd.getAttribute("id")) {
|
if (nextTask.getAttribute("id") === pEnd.getAttribute("id")) {
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
console.dir(nextTask)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (taskMap.size === 1 && start === end) {
|
//选择单行还是多行
|
||||||
continue
|
let multiply = taskMap.size > 1;
|
||||||
}
|
|
||||||
|
|
||||||
for (let [key, curSpanContent] of taskMap) {
|
//遍历设置样式
|
||||||
console.log("curSpanContent : ", curSpanContent, "\n", curCommonEle, "\nsize:", taskMap.size);
|
|
||||||
console.dir(taskMap)
|
console.dir(taskMap)
|
||||||
console.dir(curS)
|
for (let [key, curP] of taskMap) {
|
||||||
console.dir(curRange)
|
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) {
|
if (curSpanContent.childNodes === undefined || curSpanContent.childNodes === null || curSpanContent.childNodes.length <= 0) {
|
||||||
continue
|
continue
|
||||||
}
|
}
|
||||||
let firstItem = curSpanContent.childNodes[0];
|
let firstItem = curSpanContent.childNodes[0];
|
||||||
console.log("curSpanContent : ", curSpanContent, curSpanContent.childNodes, firstItem.nodeName, firstItem.nodeType);
|
console.log("curSpanContent : ", curSpanContent, curSpanContent.childNodes.length, firstItem.nodeName, firstItem.nodeType);
|
||||||
let isEmptyStyle = curSpanContent.childNodes.length === 1 && firstItem.nodeName === "#text" && firstItem.nodeType === 3;
|
let isEmptyStyle = curSpanContent.childNodes.length === 1 && firstItem.nodeName === "#text" && firstItem.nodeType === 3;
|
||||||
if (isEmptyStyle) {
|
if (isEmptyStyle) {
|
||||||
let copySpan = curSpanContent.cloneNode();
|
let copySpan = curSpanContent.cloneNode();
|
||||||
copySpan.innerHTML = "";
|
copySpan.innerHTML = "";
|
||||||
for (let j = 0; j < curSpanContent.innerText.length; j++) {
|
for (let j = 0; j < curSpanContent.innerText.length; j++) {
|
||||||
// console.log(curStartP.innerText.charAt(j))
|
if (!multiply) { //单选
|
||||||
if (j >= start && j < end) {
|
if (j >= start && j < end) {
|
||||||
let tmpSpan = document.createElement("span");
|
let tmpSpan = document.createElement("span");
|
||||||
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
|
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
|
||||||
@ -81,6 +96,36 @@ define(function (require, exports, module) {
|
|||||||
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
|
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
|
||||||
copySpan.append(tmpSpan);
|
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;
|
||||||
@ -126,7 +171,6 @@ define(function (require, exports, module) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function removeSpanStyleKV(span, styleK, styleV) {
|
function removeSpanStyleKV(span, styleK, styleV) {
|
||||||
let kList = styleK.toString().split(",");
|
let kList = styleK.toString().split(",");
|
||||||
@ -160,12 +204,12 @@ define(function (require, exports, module) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function getSpanContent(item) {
|
function getSpanContentOfP(item) {
|
||||||
let tmp = item;
|
let tmp = item;
|
||||||
if (item.nodeName !== "SPAN" || item.getAttribute("data-flag") !== "span_content") {
|
if (item.nodeName !== "SPAN" || item.getAttribute("data-flag") !== "span_content") {
|
||||||
tmp = item.parentElement.closest("span[data-flag='span_content']");
|
tmp = item.parentElement.closest("span[data-flag='span_content']");
|
||||||
}
|
}
|
||||||
return tmp
|
return tmp.parentNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
//导出
|
//导出
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<!-- 顶部 -->
|
<!-- 顶部 -->
|
||||||
<div id="head_top" style="font-size: 16px">
|
<div id="head_top" style="font-size: 16px">
|
||||||
<div style="width:20%">测试</div>
|
<div style="width:20%">测试</div>
|
||||||
@ -184,12 +184,15 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="my-divider-item"></div>
|
||||||
|
<div>
|
||||||
|
<button onclick="info(this)" style="font-size: 18px">info</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<main id="myEdit_main">
|
<main id="myEdit_main">
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<h3 contenteditable="true">
|
<h3 contenteditable="true">
|
||||||
测试编辑
|
测试编辑
|
||||||
@ -197,14 +200,23 @@
|
|||||||
<!-- 内容 -->
|
<!-- 内容 -->
|
||||||
<div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
|
<div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
<div id="testDiv" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
|
<div id="testDiv" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
|
||||||
<div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
|
<div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
<script>
|
||||||
|
function info() {
|
||||||
|
let select = window.getSelection() || document.selection;
|
||||||
|
let rangeAt = select.getRangeAt(0);
|
||||||
|
console.dir(select)
|
||||||
|
console.dir(rangeAt)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user