to:sync
This commit is contained in:
shaoyongjun
parent
f43a7236d3
commit
01de31ecc2
@ -67,7 +67,7 @@ define(function (require, exports, module) {
|
||||
}
|
||||
|
||||
getCurRowNo(){
|
||||
return this.rowNol
|
||||
return this.rowNo
|
||||
}
|
||||
|
||||
getScreenWidth() {
|
||||
|
||||
@ -54,10 +54,10 @@ define(function (require, exports, module) {
|
||||
|
||||
//样式事件监听
|
||||
let styleList = document.getElementsByClassName("fixStyleInnerSpan");
|
||||
console.log("styleList : ", styleList);
|
||||
// console.log("styleList : ", styleList);
|
||||
if (styleList && styleList.length > 0) {
|
||||
for (let i = 0; i < styleList.length; i++) {
|
||||
console.log(styleList[i]);
|
||||
// console.log(styleList[i]);
|
||||
styleList[i].addEventListener('click', this.ApplyStyleListener, false);
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,11 +76,14 @@ define(function (require, exports, module) {
|
||||
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) {
|
||||
if (curSpanContent.childNodes === undefined
|
||||
|| curSpanContent.childNodes === null
|
||||
|| curSpanContent.childNodes.length <= 0
|
||||
|| curSpanContent.innerText.toString().trim().length === 0) {
|
||||
continue
|
||||
}
|
||||
let firstItem = curSpanContent.childNodes[0];
|
||||
let isEmptyStyle =/* curSpanContent.childNodes.length === 1 &&*/ firstItem.nodeName === "#text" ;/*&& firstItem.nodeType === 3*/
|
||||
let isEmptyStyle =/* curSpanContent.childNodes.length === 1 &&*/ firstItem.nodeName === "#text";/*&& firstItem.nodeType === 3*/
|
||||
console.log("curSpanContent : ", curSpanContent, curSpanContent.childNodes.length, firstItem.nodeName, firstItem.nodeType, isEmptyStyle);
|
||||
if (isEmptyStyle) {
|
||||
let copySpan = curSpanContent.cloneNode();
|
||||
|
||||
@ -9,7 +9,144 @@ define(function (require, exports, module) {
|
||||
let event = utils.ParseEvent(e);
|
||||
let curEl = utils.GetEventTarget(event);
|
||||
|
||||
// console.log("Enter event", event, "\ncurEl: ", curEl)
|
||||
utils.ProhibitDefaultEvent(event);
|
||||
let select = utils.GetSelection();
|
||||
let selectRange = select.getRangeAt(0);
|
||||
let start = select.anchorOffset;
|
||||
let anchorNode = select.anchorNode;
|
||||
let end = select.focusOffset;
|
||||
let focusNode = select.focusNode;
|
||||
let curP = select.focusNode.parentElement.closest("p");
|
||||
let spanContent = curP.querySelector("span[data-flag='span_content']")
|
||||
let spanContentItems = spanContent.querySelectorAll("span");
|
||||
console.log("Enter event", event, "\ncurEl: ", curEl,
|
||||
"\nstart-end: ", start, end,
|
||||
)
|
||||
console.log(select)
|
||||
console.log(spanContent)
|
||||
console.dir(spanContentItems)
|
||||
if (spanContentItems === null || spanContentItems.length === 0) { //没有子元素 -> 还没有样式
|
||||
let txtLen = spanContent.innerText.trim().length;
|
||||
if (txtLen === 0) {//内容确实为空
|
||||
console.log("直接新增一行即可")
|
||||
ctx.MyRoot().append(document.createElement("p"));
|
||||
} else { // 内容不为空
|
||||
if (select.isCollapsed) { //没有选中选区
|
||||
if (start === txtLen) { //光标在行尾
|
||||
console.log("内容不为空 -> 光标在行尾");
|
||||
//新增一行
|
||||
let newParagraph = document.createElement("p");
|
||||
//内置span
|
||||
let span = document.createElement("span");
|
||||
span.append(document.createElement("br"));
|
||||
span.setAttribute("data-flag", "span_content")
|
||||
newParagraph.append(span);
|
||||
utils.InsertAfter(curP, newParagraph);
|
||||
utils.GetSelection().removeAllRanges();
|
||||
utils.GetSelection().setPosition(newParagraph, 0);
|
||||
newParagraph.focus();
|
||||
} else if (start === 0) { //光标在行首
|
||||
console.log("内容不为空 -> 光标在行首");
|
||||
let spanContentTxt = spanContent.innerText
|
||||
spanContent.innerHTML = "<br />"; //保留的部分
|
||||
//新增一行
|
||||
let newParagraph = document.createElement("p");
|
||||
//内置span
|
||||
let span = document.createElement("span");
|
||||
span.append(spanContentTxt.substring(start, spanContentTxt.length).trim());
|
||||
span.setAttribute("data-flag", "span_content")
|
||||
newParagraph.append(span);
|
||||
utils.InsertAfter(curP, newParagraph);
|
||||
utils.GetSelection().removeAllRanges();
|
||||
utils.GetSelection().setPosition(newParagraph, 0);
|
||||
newParagraph.focus();
|
||||
} else {//光标在中间
|
||||
console.log("内容不为空 -> 光标在列间");
|
||||
let spanContentTxt = spanContent.innerText
|
||||
spanContent.innerText = spanContentTxt.substring(0, start); //保留的部分
|
||||
//新增一行
|
||||
let newParagraph = document.createElement("p");
|
||||
//内置span
|
||||
let span = document.createElement("span");
|
||||
span.append(spanContentTxt.substring(start, spanContentTxt.length).trim());
|
||||
span.setAttribute("data-flag", "span_content")
|
||||
newParagraph.append(span);
|
||||
utils.InsertAfter(curP, newParagraph);
|
||||
utils.GetSelection().removeAllRanges();
|
||||
utils.GetSelection().setPosition(newParagraph, 0);
|
||||
newParagraph.focus();
|
||||
}
|
||||
} else { //有选区
|
||||
let selectRangeTxt = select.getRangeAt(0).extractContents();
|
||||
console.log("选中的内容整体平移到新建的下一行。 选中的内容是: ", selectRangeTxt);
|
||||
console.dir(selectRangeTxt);
|
||||
//新增一行
|
||||
let newParagraph = document.createElement("p");
|
||||
//内置span
|
||||
let span = document.createElement("span");
|
||||
span.append(selectRangeTxt);
|
||||
span.setAttribute("data-flag", "span_content")
|
||||
newParagraph.append(span);
|
||||
utils.InsertAfter(curP, newParagraph);
|
||||
utils.GetSelection().removeAllRanges();
|
||||
utils.GetSelection().setPosition(newParagraph, 0);
|
||||
newParagraph.focus();
|
||||
}
|
||||
}
|
||||
} else { //有子元素
|
||||
console.log("有子元素，说明添加过样式");
|
||||
console.log(spanContent)
|
||||
console.group(spanContentItems)
|
||||
if (select.isCollapsed) {//没有选区
|
||||
console.log("没有选区")
|
||||
} else { //有选区
|
||||
console.log("有选区 选中的到下一行，未选中的在原来的行")
|
||||
console.log(select)
|
||||
console.log(selectRange)
|
||||
let nextSpanList = []
|
||||
|
||||
let select2 = window.getSelection() || document.selection
|
||||
let rangeAt = select2.getRangeAt(0)
|
||||
console.dir(select2)
|
||||
console.dir(rangeAt)
|
||||
console.dir(spanContent)
|
||||
for (const child of spanContent.children) {
|
||||
console.log(child, select2.containsNode(child, false), select2.containsNode(child, true))
|
||||
if (select2.containsNode(child, true)) {
|
||||
nextSpanList.push(child.cloneNode(true))
|
||||
child.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// for (const curSpan of spanContent.children) {
|
||||
// for (let i = 0; i < spanContent.childNodes.length; i++) {
|
||||
// let curSpan = spanContent.childNodes[i];
|
||||
// console.log("check: ", curSpan, select.containsNode(curSpan, true))
|
||||
// if (select.containsNode(curSpan, true)) {
|
||||
// nextSpanList.push(curSpan.cloneNode(true))
|
||||
// curSpan.remove();
|
||||
// }
|
||||
// }
|
||||
if(nextSpanList.length===spanContentItems.length){
|
||||
spanContent.innerHTML="<br/>"
|
||||
}
|
||||
|
||||
//新增一行
|
||||
let newParagraph = document.createElement("p");
|
||||
//内置span
|
||||
let span = document.createElement("span");
|
||||
for (let i = 0; i < nextSpanList.length; i++) {
|
||||
span.append(nextSpanList[i]);
|
||||
}
|
||||
span.setAttribute("data-flag", "span_content")
|
||||
newParagraph.append(span);
|
||||
utils.InsertAfter(curP, newParagraph);
|
||||
utils.GetSelection().removeAllRanges();
|
||||
utils.GetSelection().setPosition(newParagraph, 0);
|
||||
newParagraph.focus();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@ define(function (require, exports, module) {
|
||||
|
||||
//回车事件,禁止处理。防止生成 div
|
||||
if (keyCode === 13) {
|
||||
// utils.ProhibitDefaultEvent(event);
|
||||
utils.ProhibitDefaultEvent(event);
|
||||
}
|
||||
|
||||
//在鼠标按下的时候删除，体验更好
|
||||
|
||||
@ -38,9 +38,9 @@ define(function (require, exports, module) {
|
||||
|
||||
//回车事件
|
||||
if (keyCode === 13 /* && currentNode === key.lastElementChild */) {
|
||||
// const enterHandle = require('./EnterEventImpl')
|
||||
// enterHandle.handle(e);
|
||||
// return;
|
||||
const enterHandle = require('./EnterEventImpl')
|
||||
enterHandle.handle(e);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -47,24 +47,24 @@ define(function (require, exports, module) {
|
||||
}
|
||||
|
||||
function addNewP(mutation) {
|
||||
//div 下新增p元素
|
||||
let target = mutation.target;
|
||||
// target.clone()
|
||||
if (target.nodeName === "DIV" && mutation.previousSibling !== null) {
|
||||
let utils = require("../../common/utils");
|
||||
let ctx = require("../../common/ctx");
|
||||
if (ctx.getCurRowNo() <= 0) {
|
||||
return
|
||||
}
|
||||
let newParagraph = mutation.previousSibling.nextSibling;
|
||||
console.log(
|
||||
"addNewP target: ", target,
|
||||
"\nnodeType: ", target.nodeType,
|
||||
"\nnodeName: ", target.nodeName,
|
||||
"\ndata: ", target.value,
|
||||
"\n next: ", newParagraph
|
||||
"\n next: ", newParagraph,
|
||||
"\ncurRowNo: ", ctx.getCurRowNo()
|
||||
)
|
||||
|
||||
|
||||
let utils = require("../../common/utils");
|
||||
let ctx = require("../../common/ctx");
|
||||
if (ctx.getCurRowNo() === 0) {
|
||||
return
|
||||
}
|
||||
if (newParagraph !== undefined && newParagraph !== null) {
|
||||
newParagraph.id = utils.Uuid(ctx.usn, ctx.docType);
|
||||
newParagraph.setAttribute("data-order", ctx.incrementNumThenReturn());
|
||||
@ -76,9 +76,11 @@ define(function (require, exports, module) {
|
||||
preSpan = document.createElement("span");
|
||||
preSpan.setAttribute("contenteditable", "false")
|
||||
preSpan.setAttribute("data-flag", "span_pre")
|
||||
newParagraph.appendChild(preSpan);
|
||||
// newParagraph.appendChild(preSpan);
|
||||
//添加到元素首位
|
||||
newParagraph.insertBefore(preSpan, newParagraph.firstChild);
|
||||
} else {
|
||||
console.log("newParagraph preSpan exist ", newParagraph," ",preSpan)
|
||||
console.log("newParagraph preSpan exist ", newParagraph, " ", preSpan)
|
||||
}
|
||||
|
||||
//内置span
|
||||
|
||||
@ -8,16 +8,17 @@ define(function (require) {
|
||||
|
||||
// 初始化第一个输入框
|
||||
let newParagraph = document.createElement("p");
|
||||
newParagraph.setAttribute("id", utils.Uuid(ctx.usn, ctx.docType));
|
||||
newParagraph.setAttribute("data-order", ctx.incrementNumThenReturn());
|
||||
//前置 span
|
||||
let preSpan = document.createElement("span");
|
||||
preSpan.setAttribute("contenteditable","false")
|
||||
preSpan.setAttribute("data-flag","span_pre")
|
||||
newParagraph.append(preSpan);
|
||||
preSpan.setAttribute("contenteditable", "false")
|
||||
preSpan.setAttribute("data-flag", "span_pre")
|
||||
//内置span
|
||||
let span = document.createElement("span");
|
||||
span.append(document.createElement("br"));
|
||||
span.setAttribute("data-flag","span_content")
|
||||
newParagraph.append(span);
|
||||
span.setAttribute("data-flag", "span_content")
|
||||
newParagraph.append(preSpan, span);
|
||||
//添加一行
|
||||
ctx.MyRoot().append(newParagraph);
|
||||
//收起选区到一个点，光标落在一个可编辑元素上
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>📒</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, height=device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
content="width=device-width, height=device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
<!-- content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">-->
|
||||
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
|
||||
<link rel="stylesheet" type="text/css" href="./css/myEdit.css">
|
||||
@ -31,182 +31,182 @@
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<!-- 顶部 -->
|
||||
<div id="head_top" style="font-size: 100rem">
|
||||
<div style="width:20%">测试</div>
|
||||
<div style="width: 60%"></div>
|
||||
<div style="width:20%">
|
||||
<span><button id="my_fontSize0">cls</button></span>
|
||||
<span>｜</span>
|
||||
<span><button id="my_fontSize+">+</button></span>
|
||||
<span>｜</span>
|
||||
<span><button id="my_fontSize-">-</button></span>
|
||||
</div>
|
||||
<header>
|
||||
<!-- 顶部 -->
|
||||
<div id="head_top" style="font-size: 100rem">
|
||||
<div style="width:20%">测试</div>
|
||||
<div style="width: 60%"></div>
|
||||
<div style="width:20%">
|
||||
<span><button id="my_fontSize0">cls</button></span>
|
||||
<span>｜</span>
|
||||
<span><button id="my_fontSize+">+</button></span>
|
||||
<span>｜</span>
|
||||
<span><button id="my_fontSize-">-</button></span>
|
||||
</div>
|
||||
<div class="fixStylePosition" id="_style_utils">
|
||||
<div class="fixStyleOut">
|
||||
<div style="display: flex;margin: 0 0; ">
|
||||
<div style="display: flex; margin: 0 0;">
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="TextOutlined">
|
||||
<path
|
||||
</div>
|
||||
<div class="fixStylePosition" id="_style_utils">
|
||||
<div class="fixStyleOut">
|
||||
<div style="display: flex;margin: 0 0; ">
|
||||
<div style="display: flex; margin: 0 0;">
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="TextOutlined">
|
||||
<path
|
||||
d="M2 3a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V4h-7v16h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3V4H4v3a1 1 0 1 1-2 0V3Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
||||
<path
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
||||
<path
|
||||
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-divider-item"></div>
|
||||
</div>
|
||||
<div class="my-divider-item"></div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="TypographyOutlined">
|
||||
<path
|
||||
<div style="display: flex;">
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="TypographyOutlined">
|
||||
<path
|
||||
d="M2 4a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2H3Zm-1 5a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2H3Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
||||
<path
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
||||
<path
|
||||
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-divider-item"></div>
|
||||
<div style="display: flex;">
|
||||
<div class="my-divider-item"></div>
|
||||
<div style="display: flex;">
|
||||
<span class="fixStyleInnerSpan" data-k="font-weight" data-v="bold">
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="BoldOutlined">
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="BoldOutlined">
|
||||
<path
|
||||
d="M5 2.709C5 2.317 5.317 2 5.709 2h6.734a5.317 5.317 0 0 1 3.686 9.148 5.671 5.671 0 0 1-2.623 10.7H5.71a.709.709 0 0 1-.71-.707V2.71Zm2 7.798h5.443a3.19 3.19 0 0 0 3.19-3.19c0-1.762-1.428-3.317-3.19-3.317H7v6.507Zm0 2.126v7.09h6.507a3.544 3.544 0 0 0 0-7.09H7Z"
|
||||
fill="currentColor"></path>
|
||||
d="M5 2.709C5 2.317 5.317 2 5.709 2h6.734a5.317 5.317 0 0 1 3.686 9.148 5.671 5.671 0 0 1-2.623 10.7H5.71a.709.709 0 0 1-.71-.707V2.71Zm2 7.798h5.443a3.19 3.19 0 0 0 3.19-3.19c0-1.762-1.428-3.317-3.19-3.317H7v6.507Zm0 2.126v7.09h6.507a3.544 3.544 0 0 0 0-7.09H7Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="fixStyleInnerSpan" data-k="text-decoration" data-v="line-through">
|
||||
<span class="fixStyleInnerSpan" data-k="text-decoration" data-v="line-through">
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="HorizontalLineOutlined">
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="HorizontalLineOutlined">
|
||||
<path
|
||||
d="M5.49 7.226A5.107 5.107 0 0 1 6.9 3.831C8.017 2.636 9.718 2 11.819 2c2.142 0 3.779.57 4.867 1.689.4.392.869.958 1.26 1.595.443.723-.191 1.53-1.04 1.53-.606 0-1.039-.447-1.326-.981a2.864 2.864 0 0 0-.362-.517c-.735-.93-1.909-1.419-3.386-1.419-2.404 0-4.154 1.395-4.2 3.393-.02.846.337 1.58.995 2.043h-2.75c-.271-.621-.403-1.332-.385-2.107Zm8.906 6.024H4.038c-.518 0-.938-.38-.938-.897 0-.518.42-.978.938-.978h16.125c.518 0 .937.437.937.954 0 .518-.42.921-.937.921h-2.455c.542.806.96 1.954.934 3.055C18.563 19.82 15.87 22 11.572 22c-2.875 0-5.028-.964-6.13-2.745a6.884 6.884 0 0 1-.545-1.191c-.261-.72.318-1.432 1.084-1.432.574 0 1.034.416 1.24.952.17.445.4.794.733 1.142.805.858 2.104 1.305 3.766 1.305 2.845 0 4.696-1.39 4.747-3.61.024-1.072-.256-1.61-.897-2.42-.473-.598-1.174-.751-1.174-.751Z"
|
||||
fill="currentColor"></path>
|
||||
d="M5.49 7.226A5.107 5.107 0 0 1 6.9 3.831C8.017 2.636 9.718 2 11.819 2c2.142 0 3.779.57 4.867 1.689.4.392.869.958 1.26 1.595.443.723-.191 1.53-1.04 1.53-.606 0-1.039-.447-1.326-.981a2.864 2.864 0 0 0-.362-.517c-.735-.93-1.909-1.419-3.386-1.419-2.404 0-4.154 1.395-4.2 3.393-.02.846.337 1.58.995 2.043h-2.75c-.271-.621-.403-1.332-.385-2.107Zm8.906 6.024H4.038c-.518 0-.938-.38-.938-.897 0-.518.42-.978.938-.978h16.125c.518 0 .937.437.937.954 0 .518-.42.921-.937.921h-2.455c.542.806.96 1.954.934 3.055C18.563 19.82 15.87 22 11.572 22c-2.875 0-5.028-.964-6.13-2.745a6.884 6.884 0 0 1-.545-1.191c-.261-.72.318-1.432 1.084-1.432.574 0 1.034.416 1.24.952.17.445.4.794.733 1.142.805.858 2.104 1.305 3.766 1.305 2.845 0 4.696-1.39 4.747-3.61.024-1.072-.256-1.61-.897-2.42-.473-.598-1.174-.751-1.174-.751Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="fixStyleInnerSpan" data-k="font-style" data-v="italic">
|
||||
<span class="fixStyleInnerSpan" data-k="font-style" data-v="italic">
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="ItalicOutlined">
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="ItalicOutlined">
|
||||
<path
|
||||
d="M14.825 5.077 11.19 18.923h4.052a1.038 1.038 0 1 1 0 2.077H4.954a1.038 1.038 0 1 1 0-2.077h4.053l3.636-13.846H8.591A1.038 1.038 0 1 1 8.59 3h10.287a1.038 1.038 0 0 1 0 2.077h-4.053Z"
|
||||
fill="currentColor"></path>
|
||||
d="M14.825 5.077 11.19 18.923h4.052a1.038 1.038 0 1 1 0 2.077H4.954a1.038 1.038 0 1 1 0-2.077h4.053l3.636-13.846H8.591A1.038 1.038 0 1 1 8.59 3h10.287a1.038 1.038 0 0 1 0 2.077h-4.053Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="fixStyleInnerSpan" data-k="text-decoration,text-underline-offset"
|
||||
data-v="underline,30rem">
|
||||
<span class="fixStyleInnerSpan" data-k="text-decoration,text-underline-offset"
|
||||
data-v="underline,30rem">
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="UnderlineOutlined">
|
||||
xmlns="http://www.w3.org/2000/svg" data-icon="UnderlineOutlined">
|
||||
<path
|
||||
d="M7.361 3.052a.99.99 0 0 0-.989-.994.998.998 0 0 0-.999.994v5.765c0 4.205 2.601 7.29 6.627 7.29s6.627-3.085 6.627-7.29V3.052a.996.996 0 0 0-.996-.994.992.992 0 0 0-.992.994v5.765c0 3.003-1.763 5.302-4.639 5.302-2.876 0-4.639-2.299-4.639-5.302V3.052ZM3.054 19.42a.988.988 0 0 0-.994.988 1 1 0 0 0 .994 1h17.892a1 1 0 0 0 .994-1.002.987.987 0 0 0-.994-.986H3.054Z"
|
||||
fill="currentColor"></path>
|
||||
d="M7.361 3.052a.99.99 0 0 0-.989-.994.998.998 0 0 0-.999.994v5.765c0 4.205 2.601 7.29 6.627 7.29s6.627-3.085 6.627-7.29V3.052a.996.996 0 0 0-.996-.994.992.992 0 0 0-.992.994v5.765c0 3.003-1.763 5.302-4.639 5.302-2.876 0-4.639-2.299-4.639-5.302V3.052ZM3.054 19.42a.988.988 0 0 0-.994.988 1 1 0 0 0 .994 1h17.892a1 1 0 0 0 .994-1.002.987.987 0 0 0-.994-.986H3.054Z"
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-divider-item"></div>
|
||||
<div>
|
||||
<div class="my-divider-item"></div>
|
||||
<div>
|
||||
<span class="fixStyleInnerSpan" data-k="color" data-v="blue">
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 240 240" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon/字体颜色" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(0.000000, 0.500000)">
|
||||
<g transform="translate(39.000000, 17.353553)">
|
||||
<path
|
||||
d="M11,201.146447 L167,201.146447 C173.075132,201.146447 178,206.071314 178,212.146447 C178,218.221579 173.075132,223.146447 167,223.146447 L11,223.146447 C4.92486775,223.146447 7.43989126e-16,218.221579 0,212.146447 C-7.43989126e-16,206.071314 4.92486775,201.146447 11,201.146447 Z"
|
||||
id="矩形" fill="#DF2A3F" fill-rule="evenodd"></path>
|
||||
d="M11,201.146447 L167,201.146447 C173.075132,201.146447 178,206.071314 178,212.146447 C178,218.221579 173.075132,223.146447 167,223.146447 L11,223.146447 C4.92486775,223.146447 7.43989126e-16,218.221579 0,212.146447 C-7.43989126e-16,206.071314 4.92486775,201.146447 11,201.146447 Z"
|
||||
id="矩形" fill="#DF2A3F" fill-rule="evenodd"></path>
|
||||
<path
|
||||
d="M72.3425855,16.8295583 C75.799482,7.50883712 86.1577877,2.75526801 95.4785089,6.21216449 C100.284516,7.99463061 104.096358,11.7387855 105.968745,16.4968188 L106.112518,16.8745422 L159.385152,161.694068 C161.291848,166.877345 158.635655,172.624903 153.452378,174.531599 C148.358469,176.405421 142.719567,173.872338 140.716873,168.864661 L140.614848,168.598825 L89.211,28.86 L37.3759214,168.623816 C35.4885354,173.712715 29.8981043,176.351047 24.7909589,174.617647 L24.5226307,174.522368 C19.4337312,172.634982 16.7953993,167.044551 18.5287999,161.937406 L18.6240786,161.669077 L72.3425855,16.8295583 Z"
|
||||
id="路径-21" fill="currentColor" fill-rule="nonzero"></path>
|
||||
d="M72.3425855,16.8295583 C75.799482,7.50883712 86.1577877,2.75526801 95.4785089,6.21216449 C100.284516,7.99463061 104.096358,11.7387855 105.968745,16.4968188 L106.112518,16.8745422 L159.385152,161.694068 C161.291848,166.877345 158.635655,172.624903 153.452378,174.531599 C148.358469,176.405421 142.719567,173.872338 140.716873,168.864661 L140.614848,168.598825 L89.211,28.86 L37.3759214,168.623816 C35.4885354,173.712715 29.8981043,176.351047 24.7909589,174.617647 L24.5226307,174.522368 C19.4337312,172.634982 16.7953993,167.044551 18.5287999,161.937406 L18.6240786,161.669077 L72.3425855,16.8295583 Z"
|
||||
id="路径-21" fill="currentColor" fill-rule="nonzero"></path>
|
||||
<path
|
||||
d="M121,103.146447 C126.522847,103.146447 131,107.623599 131,113.146447 C131,118.575687 126.673329,122.994378 121.279905,123.142605 L121,123.146447 L55,123.146447 C49.4771525,123.146447 45,118.669294 45,113.146447 C45,107.717207 49.3266708,103.298515 54.7200952,103.150288 L55,103.146447 L121,103.146447 Z"
|
||||
id="路径-22" fill="currentColor" fill-rule="nonzero"></path>
|
||||
d="M121,103.146447 C126.522847,103.146447 131,107.623599 131,113.146447 C131,118.575687 126.673329,122.994378 121.279905,123.142605 L121,123.146447 L55,123.146447 C49.4771525,123.146447 45,118.669294 45,113.146447 C45,107.717207 49.3266708,103.298515 54.7200952,103.150288 L55,103.146447 L121,103.146447 Z"
|
||||
id="路径-22" fill="currentColor" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
|
||||
<span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 256 256" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="icon/填充色" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="icon/背景颜色">
|
||||
<g id="编组" fill="currentColor">
|
||||
<g transform="translate(119.502295, 137.878331) rotate(-135.000000) translate(-119.502295, -137.878331) translate(48.002295, 31.757731)"
|
||||
id="矩形">
|
||||
id="矩形">
|
||||
<path
|
||||
d="M100.946943,60.8084699 L43.7469427,60.8084699 C37.2852111,60.8084699 32.0469427,66.0467383 32.0469427,72.5084699 L32.0469427,118.70847 C32.0469427,125.170201 37.2852111,130.40847 43.7469427,130.40847 L100.946943,130.40847 C107.408674,130.40847 112.646943,125.170201 112.646943,118.70847 L112.646943,72.5084699 C112.646943,66.0467383 107.408674,60.8084699 100.946943,60.8084699 Z M93.646,79.808 L93.646,111.408 L51.046,111.408 L51.046,79.808 L93.646,79.808 Z"
|
||||
fill-rule="nonzero"></path>
|
||||
d="M100.946943,60.8084699 L43.7469427,60.8084699 C37.2852111,60.8084699 32.0469427,66.0467383 32.0469427,72.5084699 L32.0469427,118.70847 C32.0469427,125.170201 37.2852111,130.40847 43.7469427,130.40847 L100.946943,130.40847 C107.408674,130.40847 112.646943,125.170201 112.646943,118.70847 L112.646943,72.5084699 C112.646943,66.0467383 107.408674,60.8084699 100.946943,60.8084699 Z M93.646,79.808 L93.646,111.408 L51.046,111.408 L51.046,79.808 L93.646,79.808 Z"
|
||||
fill-rule="nonzero"></path>
|
||||
<path
|
||||
d="M87.9366521,16.90916 L87.9194966,68.2000001 C87.9183543,69.4147389 86.9334998,70.399264 85.7187607,70.4 L56.9423078,70.4 C55.7272813,70.4 54.7423078,69.4150264 54.7423078,68.2 L54.7423078,39.4621057 C54.7423078,37.2523513 55.5736632,35.1234748 57.0711706,33.4985176 L76.4832996,12.4342613 C78.9534987,9.75382857 83.1289108,9.5834005 85.8093436,12.0535996 C87.1658473,13.303709 87.9372691,15.0644715 87.9366521,16.90916 Z"
|
||||
fill-rule="evenodd"></path>
|
||||
d="M87.9366521,16.90916 L87.9194966,68.2000001 C87.9183543,69.4147389 86.9334998,70.399264 85.7187607,70.4 L56.9423078,70.4 C55.7272813,70.4 54.7423078,69.4150264 54.7423078,68.2 L54.7423078,39.4621057 C54.7423078,37.2523513 55.5736632,35.1234748 57.0711706,33.4985176 L76.4832996,12.4342613 C78.9534987,9.75382857 83.1289108,9.5834005 85.8093436,12.0535996 C87.1658473,13.303709 87.9372691,15.0644715 87.9366521,16.90916 Z"
|
||||
fill-rule="evenodd"></path>
|
||||
<path
|
||||
d="M131.3,111.241199 L11.7,111.241199 C5.23826843,111.241199 0,116.479467 0,122.941199 L0,200.541199 C0,207.002931 5.23826843,212.241199 11.7,212.241199 L131.3,212.241199 C137.761732,212.241199 143,207.002931 143,200.541199 L143,122.941199 C143,116.479467 137.761732,111.241199 131.3,111.241199 Z M124,130.241 L124,193.241 L19,193.241 L19,130.241 L124,130.241 Z"
|
||||
fill-rule="nonzero"></path>
|
||||
d="M131.3,111.241199 L11.7,111.241199 C5.23826843,111.241199 0,116.479467 0,122.941199 L0,200.541199 C0,207.002931 5.23826843,212.241199 11.7,212.241199 L131.3,212.241199 C137.761732,212.241199 143,207.002931 143,200.541199 L143,122.941199 C143,116.479467 137.761732,111.241199 131.3,111.241199 Z M124,130.241 L124,193.241 L19,193.241 L19,130.241 L124,130.241 Z"
|
||||
fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
d="M51,218 L205,218 C211.075132,218 216,222.924868 216,229 C216,235.075132 211.075132,240 205,240 L51,240 C44.9248678,240 40,235.075132 40,229 C40,222.924868 44.9248678,218 51,218 Z"
|
||||
id="矩形" fill="#FBDE28"></path>
|
||||
d="M51,218 L205,218 C211.075132,218 216,222.924868 216,229 C216,235.075132 211.075132,240 205,240 L51,240 C44.9248678,240 40,235.075132 40,229 C40,222.924868 44.9248678,218 51,218 Z"
|
||||
id="矩形" fill="#FBDE28"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="my-divider-item"></div>
|
||||
<div>
|
||||
</div>
|
||||
<div class="my-divider-item"></div>
|
||||
<div>
|
||||
<span>
|
||||
<svg width="100rem" height="100rem" viewBox="0 0 18 18" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4.2 10.4A1.19 1.19 0 013 9.2 1.19 1.19 0 014.2 8c.23 0 .43.06.6.17.2.1.33.24.44.43.11.18.17.38.17.6 0 .23-.06.43-.17.6-.1.2-.25.34-.43.45-.18.1-.38.16-.6.16zm4.72 0a1.19 1.19 0 01-1.2-1.2A1.19 1.19 0 018.92 8c.22 0 .42.06.6.17.19.1.33.24.44.43.1.18.16.38.16.6a1.22 1.22 0 01-.6 1.04c-.18.11-.38.17-.6.17zm4.72 0a1.19 1.19 0 01-1.2-1.2 1.19 1.19 0 011.2-1.2c.22 0 .42.06.6.17.18.1.33.24.44.43.11.18.16.38.16.6 0 .23-.05.43-.16.6a1.18 1.18 0 01-1.04.6z"
|
||||
fill="#535353"></path>
|
||||
d="M4.2 10.4A1.19 1.19 0 013 9.2 1.19 1.19 0 014.2 8c.23 0 .43.06.6.17.2.1.33.24.44.43.11.18.17.38.17.6 0 .23-.06.43-.17.6-.1.2-.25.34-.43.45-.18.1-.38.16-.6.16zm4.72 0a1.19 1.19 0 01-1.2-1.2A1.19 1.19 0 018.92 8c.22 0 .42.06.6.17.19.1.33.24.44.43.1.18.16.38.16.6a1.22 1.22 0 01-.6 1.04c-.18.11-.38.17-.6.17zm4.72 0a1.19 1.19 0 01-1.2-1.2 1.19 1.19 0 011.2-1.2c.22 0 .42.06.6.17.18.1.33.24.44.43.11.18.16.38.16.6 0 .23-.05.43-.16.6a1.18 1.18 0 01-1.04.6z"
|
||||
fill="#535353"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="my-divider-item"></div>
|
||||
<div>
|
||||
<button onclick="info(this)" style="font-size: 80rem">info</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-divider-item"></div>
|
||||
<div>
|
||||
<button onclick="info(this)" style="font-size: 80rem">info</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="myEdit_main">
|
||||
<!-- 标题 -->
|
||||
<h3 contenteditable="true">
|
||||
测试编辑
|
||||
</h3>
|
||||
<!-- 内容 -->
|
||||
<div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
|
||||
</div>
|
||||
</main>
|
||||
<main id="myEdit_main">
|
||||
<!-- 标题 -->
|
||||
<h3 contenteditable="true">
|
||||
测试编辑
|
||||
</h3>
|
||||
<!-- 内容 -->
|
||||
<div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
|
||||
</div>
|
||||
</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>
|
||||
@ -216,6 +216,13 @@
|
||||
console.dir(select)
|
||||
console.dir(rangeAt)
|
||||
|
||||
let spanContent = rangeAt.commonAncestorContainer.parentElement.querySelector("span[data-flag='span_content']");
|
||||
console.dir(spanContent)
|
||||
for (const child of spanContent.children) {
|
||||
console.log(child, select.containsNode(child, false), select.containsNode(child, true))
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user