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