From 978bafac7fea06baf4cf39e9e3b57352435b2df0 Mon Sep 17 00:00:00 2001 From: shaoyongjun Date: Sun, 10 Nov 2024 01:51:52 +0800 Subject: [PATCH] to:sync --- static/css/myEdit.css | 112 +++++++---- static/js/common/a4Utils.js | 15 +- static/js/event/MyEventListener.js | 28 ++- .../event/impl/AdjustMyFontSizeEventImpl.js | 25 ++- static/js/event/impl/BeforeStyleEventImpl.js | 152 ++++++++++++++ static/js/event/impl/MutationObserverImpl.js | 188 ++++++++---------- static/js/event/impl/RSizeEventImpl.js | 17 +- static/tmp | 1 + static/yanxuelu.html | 151 +++++++++----- 9 files changed, 475 insertions(+), 214 deletions(-) create mode 100644 static/js/event/impl/BeforeStyleEventImpl.js diff --git a/static/css/myEdit.css b/static/css/myEdit.css index 566f61f..ad4c32f 100644 --- a/static/css/myEdit.css +++ b/static/css/myEdit.css @@ -34,7 +34,9 @@ body { color: #262626; font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif; font-variant: tabular-nums; - line-height: 1.5715; + + /* 行高设置*/ + /*line-height: 1.5715;*/ background-color: #fff; font-feature-settings: "tnum", "tnum"; @@ -86,20 +88,20 @@ header { /*flex-wrap: nowrap;*/ } -#head_top { - width: 100%; - height: 32rem; +/*#head_top {*/ +/* width: 100%;*/ +/* height: 32rem;*/ - border: 1px #f5f5f5 solid; - /*box-shadow: 0 40rem 80rem rgba(31, 35, 41, 0.1);*/ - background-color: rgb(255, 255, 255); - /*background-color: blue;*/ +/* border: 1px #f5f5f5 solid;*/ +/* !*box-shadow: 0 40rem 80rem rgba(31, 35, 41, 0.1);*!*/ +/* background-color: rgb(255, 255, 255);*/ +/* !*background-color: blue;*!*/ - font-size: 16rem; - display: flex; - justify-content: space-around; - align-items: center; -} +/* font-size: 16rem;*/ +/* display: flex;*/ +/* justify-content: space-around;*/ +/* align-items: center;*/ +/*}*/ .fixStylePosition { display: block; @@ -128,7 +130,26 @@ header { } .fixStyleInnerSpan { - margin: 0 8rem; + margin: 0 3rem; +} + +#_position_more { + position: fixed; + z-index: 99; +} + +#_show_more { + margin: 1rem 0; + font-size: 12rem; + position: relative; + top: 1em; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + /*border: 1px red solid;*/ + min-width: 5em; } main { @@ -137,7 +158,7 @@ main { flex-direction: column; align-items: center; - margin-top: 58rem; + margin-top: 20rem; /*min-height: 80%;*/ /*border: 1px greenyellow solid;*/ @@ -162,7 +183,7 @@ main { } #yxl_note p { - border: 1px rgb(248, 245, 245) solid; + /*border: 1px rgb(248, 245, 245) solid;*/ margin: 0 0; padding: 0 0; /*padding: 0 0;*/ @@ -172,6 +193,8 @@ main { letter-spacing: normal; height: fit-content; + line-height: inherit; + /*布局*/ display: flex; justify-content: flex-start; @@ -181,25 +204,25 @@ main { /*flex: 1 1 100%;*/ } -#yxl_note p span[data-flag="span_pre"] { - /*border: 1px red solid;*/ - /*min-width: 2em;*/ - width: fit-content; - height: fit-content; - margin: 0 0; - text-indent: 0; - padding: 0 0; +/*#yxl_note p span[data-flag="span_pre"] {*/ +/* !*border: 1px red solid;*!*/ +/* !*min-width: 2em;*!*/ +/* width: fit-content;*/ +/* height: fit-content;*/ +/* margin: 0 0;*/ +/* text-indent: 0;*/ +/* padding: 0 0;*/ - display: inline; +/* display: inline;*/ - justify-content: flex-end; - -moz-user-select: none; - user-select: none; - -webkit-user-select: none; +/* justify-content: flex-end;*/ +/* -moz-user-select: none;*/ +/* user-select: none;*/ +/* -webkit-user-select: none;*/ - box-sizing: border-box; - white-space: nowrap; -} +/* box-sizing: border-box;*/ +/* white-space: nowrap;*/ +/*}*/ #yxl_note p span[data-flag="span_content"] { /*border: 1px deepskyblue solid;*/ @@ -211,15 +234,25 @@ main { width: 100%; height: 100%; + /*缩进2个字符的距离*/ + text-indent: 2em; + &:empty::before { content: attr(placeholder); - font-size: 14px; + /*font-size: 14rem;*/ color: #CCC; - line-height: 21px; - padding-top: 20px; + /*line-height: 21rem;*/ + /*padding-top: 20rem;*/ } } +#yxl_note p span[data-before-style="my-li-content"]::before { + content: attr(my-li-content); + /*border: 1px rgb(0, 140, 255) solid;*/ + -webkit-transform: scale(1.375); + transform: scale(1.375); + +} #testInput { width: 60%; @@ -230,9 +263,12 @@ main { } ::selection { - color: antiquewhite; - background-color: cadetblue; - text-shadow: #00a9ff; + color: inherit; + /*color: antiquewhite;*/ + /*background-color: cadetblue;*/ + background-color: rgba(27, 162, 227, .2); + /*background-color: #d6e0fe;*/ + /*text-shadow: #00a9ff;*/ } .my-divider-item { diff --git a/static/js/common/a4Utils.js b/static/js/common/a4Utils.js index c8075be..2688540 100644 --- a/static/js/common/a4Utils.js +++ b/static/js/common/a4Utils.js @@ -2,8 +2,8 @@ define(function (require, exports, module) { class A4Utils { constructor() { - let dpi = this.GetDPI(); - console.log("dpi: ", dpi) + // let dpi = this.GetDPI(); + // console.log("dpi: ", dpi) //A0纸尺寸841mm×1189mm // // A1纸尺寸594mm×841mm @@ -25,10 +25,11 @@ define(function (require, exports, module) { // A9纸尺寸37mm×52mm let width_mm = 210; // A4纸宽度，单位：毫米 let height_mm = 297; // A4纸高度，单位：毫米 - let width_px = this.MmToPixel(width_mm, dpi); - let height_px = this.MmToPixel(height_mm, dpi); - this.width = width_px; - this.height = height_px; + // let width_px = this.MmToPixel(width_mm, dpi); + // let height_px = this.MmToPixel(height_mm, dpi); + // this.width = width_px; + this.width = 750; //按照iphone6 + // this.height = height_px; } /** @@ -46,7 +47,7 @@ define(function (require, exports, module) { // tempDiv.style.left = "0px" document.body.appendChild(tempDiv); let dpi = tempDiv.offsetWidth; - // alert(123) + alert(123) document.body.removeChild(tempDiv); return dpi; } diff --git a/static/js/event/MyEventListener.js b/static/js/event/MyEventListener.js index 9c897ec..4948245 100644 --- a/static/js/event/MyEventListener.js +++ b/static/js/event/MyEventListener.js @@ -55,9 +55,9 @@ define(function (require, exports, module) { this.CompositionendListener); // 注册光标移动事件 - document.getElementById("yxl_note").addEventListener('selectionchange', function (e) { - console.log("注册光标移动事件", window.Selection) - }, false); + // document.getElementById("yxl_note").addEventListener('selectionchange', function (e) { + // console.log("注册光标移动事件", window.Selection) + // }, false); //这里监听鼠标按下事件 @@ -77,7 +77,17 @@ define(function (require, exports, module) { //+/- document.getElementById("my_fontSize+").addEventListener("click", this.AdjustMyFontSize, true) document.getElementById("my_fontSize-").addEventListener("click", this.AdjustMyFontSize, true) - document.getElementById("my_fontSize0").addEventListener("click", this.AdjustMyFontSize, true) + // document.getElementById("my_fontSize0").addEventListener("click", this.AdjustMyFontSize, true) + + //::before + //样式事件监听 + let myBeforeStyleList = document.getElementsByClassName("my_before_style"); + // console.log("styleList : ", styleList); + if (myBeforeStyleList && myBeforeStyleList.length > 0) { + for (let i = 0; i < myBeforeStyleList.length; i++) { + myBeforeStyleList[i].addEventListener('click', this.ApplyMyBeforeStyleListener, false); + } + } } AdjustMyFontSize(e) { @@ -101,6 +111,16 @@ define(function (require, exports, module) { handle.handle(e); } + /** + * :: before 样式 + * @param e + * @constructor + */ + ApplyMyBeforeStyleListener(e) { + const handle = require('./impl/BeforeStyleEventImpl'); + handle.handle(e); + } + /** * * @param {*} e diff --git a/static/js/event/impl/AdjustMyFontSizeEventImpl.js b/static/js/event/impl/AdjustMyFontSizeEventImpl.js index f37a5d4..079fa2e 100644 --- a/static/js/event/impl/AdjustMyFontSizeEventImpl.js +++ b/static/js/event/impl/AdjustMyFontSizeEventImpl.js @@ -15,10 +15,27 @@ define(function (require, exports, module) { localStorage.clear(); location.reload(); return - } else if (curId === "my_fontSize+") { - ctx.editFrontSize++; + } + + console.log("curId : ", curId, " target: ", curEl) + if (curId === null) { //防止点击到 path + let tmpSvg = curEl.parentElement.closest("span"); + if (tmpSvg !== undefined && tmpSvg !== null) { + curId = tmpSvg.getAttribute("id"); + } + } + if (curId === "my_fontSize+") { + if (ctx.editFrontSize >= 72) { + ctx.editFrontSize = 72; + } else { + ctx.editFrontSize++; + } } else { - ctx.editFrontSize--; + if (ctx.editFrontSize <= 12) { + ctx.editFrontSize = 12 + } else { + ctx.editFrontSize--; + } } //触发resize @@ -27,6 +44,8 @@ define(function (require, exports, module) { //保存在本地 localStorage.setItem('editFrontSize', ctx.editFrontSize); + //show + document.getElementById("cur_my_font_size").textContent = ctx.editFrontSize + "px" } //导出 diff --git a/static/js/event/impl/BeforeStyleEventImpl.js b/static/js/event/impl/BeforeStyleEventImpl.js new file mode 100644 index 0000000..54e7015 --- /dev/null +++ b/static/js/event/impl/BeforeStyleEventImpl.js @@ -0,0 +1,152 @@ +"use strict"; +/** + * 拷贝事件 + */ +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); + console.dir(curS) + //只处理选择的是一个范围。 + // if (curS.type !== "Range") { + // return; + // } + //选区信息 + console.dir(curS) + console.dir(curRange) + + //获取样式 + 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("before 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; + } + + //处理选区数量 + 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 total = taskMap.size; + let hadNum = 0; + console.dir(taskMap) + let doneNum = 0; + + let curTxtIndent = CalCurTextIndent(pStart); + for (let [key, curP] of taskMap) { + let curSpanContent = curP.querySelector("span[data-flag='span_content']"); + console.log("curP : ", curP, "\n", "\nkey:", key, "\ncurSpanContent: ", curSpanContent, + "\npreEle: ", curP.previousElementSibling); + + //设置属性 展示 ::before + curSpanContent.setAttribute("data-before-style", styleK); + //无序 + if (styleV === "ol") { + let tmpV = curSpanContent.getAttribute(styleK); + if (tmpV !== undefined && tmpV !== null) { + hadNum++; + } else { + curSpanContent.style.setProperty("text-indent", curTxtIndent + "em"); + curSpanContent.setAttribute(styleK, "• "); + } + + continue; + } + + //有序 + if (styleV === "ul") { + let tmpV = curSpanContent.getAttribute(styleK); + if (tmpV !== undefined && tmpV !== null) { + hadNum++; + } else { + curSpanContent.style.setProperty("text-indent", curTxtIndent + "em"); + //::before + doneNum++; + curSpanContent.setAttribute(styleK, doneNum + "• "); + } + continue; + } + } + + // 如果全部已经设置好了 则取消 + if (total === hadNum) { + for (let [key, curP] of taskMap) { + let curSpanContent = curP.querySelector("span[data-flag='span_content']"); + curSpanContent.removeAttribute(styleK); + curSpanContent.removeAttribute("data-before-style"); + curSpanContent.style.setProperty("text-indent", "2em"); + } + } + + } + + function CalCurTextIndent(curP) { + let preP = curP.previousElementSibling; + let curTxtIndent = 4; + if (preP !== null) { + let preSpanContent = preP.querySelector("span[data-flag='span_content']"); + if (preSpanContent !== null) { + let txtIndent = preSpanContent.style.getPropertyValue("text-indent"); + console.log("txtIndent : ", txtIndent, preSpanContent) + if (txtIndent !== null && txtIndent !== "") { + curTxtIndent = parseInt(txtIndent.replace("em", "")) + 2; + } + } + } + return curTxtIndent; + } + + 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.parentNode; + } + + + //导出 + exports.handle = handle; +}); \ No newline at end of file diff --git a/static/js/event/impl/MutationObserverImpl.js b/static/js/event/impl/MutationObserverImpl.js index 78e31cc..f771049 100644 --- a/static/js/event/impl/MutationObserverImpl.js +++ b/static/js/event/impl/MutationObserverImpl.js @@ -69,42 +69,42 @@ define(function (require, exports, module) { // let newParagraph = document.getElementById(targetP.id); //前置 span - let preSpan = newParagraph.querySelector("span[data-flag='span_pre']"); - if (preSpan === undefined || preSpan === null) { - preSpan = document.createElement("span"); - preSpan.setAttribute("contenteditable", "false") - preSpan.setAttribute("data-flag", "span_pre") - - //额外处理无序和有序列表 - let preP = newParagraph.previousElementSibling; - if (preP !== undefined && preP !== null) { - let preSpanTxtOfPreP = preP.querySelector("span[data-flag='span_pre']").textContent; - if (preSpanTxtOfPreP === " • " || preSpanTxtOfPreP === " ◦ " || preSpanTxtOfPreP === " ▪ ") { - preSpan.setAttribute("contenteditable", "true"); - preSpan.innerHTML = "" + preSpanTxtOfPreP + ""; - } - } - - //添加到元素首位 - newParagraph.insertBefore(preSpan, newParagraph.firstChild); - - - } else { - console.log("newParagraph preSpan exist ", newParagraph, " ", preSpan) - } + // let preSpan = newParagraph.querySelector("span[data-flag='span_pre']"); + // if (preSpan === undefined || preSpan === null) { + // preSpan = document.createElement("span"); + // preSpan.setAttribute("contenteditable", "false") + // preSpan.setAttribute("data-flag", "span_pre") + // + // //额外处理无序和有序列表 + // let preP = newParagraph.previousElementSibling; + // if (preP !== undefined && preP !== null) { + // let preSpanTxtOfPreP = preP.querySelector("span[data-flag='span_pre']").textContent; + // if (preSpanTxtOfPreP === " • " || preSpanTxtOfPreP === " ◦ " || preSpanTxtOfPreP === " ▪ ") { + // preSpan.setAttribute("contenteditable", "true"); + // preSpan.innerHTML = "" + preSpanTxtOfPreP + ""; + // } + // } + // + // //添加到元素首位 + // newParagraph.insertBefore(preSpan, newParagraph.firstChild); + // + // + // } else { + // console.log("newParagraph preSpan exist ", newParagraph, " ", preSpan) + // } //内置span let spanContent = newParagraph.querySelector("span[data-flag='span_content']"); if (spanContent === undefined || spanContent === null) { spanContent = document.createElement("span"); - spanContent.append(document.createElement("br")); + // spanContent.append(document.createElement("br")); spanContent.setAttribute("data-flag", "span_content") spanContent.setAttribute("placeholder", "请输入") newParagraph.appendChild(spanContent); } else { console.log("newParagraph spanContent exist", spanContent); - spanContent.innerHTML = "
"; + spanContent.innerHTML = null; } utils.GetSelection().removeAllRanges(); @@ -127,47 +127,35 @@ define(function (require, exports, module) { utils.InsertAfter(flagP, tmpP); flagP = tmpP; } - - // console.log( - // "addNewSpan target: ", target, - // "\nmutation:", mutation, - // "\naddedNodes:", mutation.addedNodes, - // "\nnodeType: ", target.nodeType, - // "\nnodeName: ", target.nodeName, - // "\ndata: ", target.value, - // "\n previousContentSpan: ", previousContentSpan, - // "\ncurRowNo: ", ctx.getCurRowNo() - // ) - return; } //删除 for 无序列表 删除样式恢复正常行 - if (mutation.removedNodes.length === 0 - && mutation.addedNodes.length === 1 - && target.nodeName === "P" && target.getAttribute("data-order") != null - // && target.childNodes - && mutation.addedNodes[0].nodeName === "BR" - ) { - console.log( - "删除 br target: ", target, - "\nmutation:", mutation, - "\ntarget.childNodes:", target.childNodes, - "\naddedNodes:", mutation.addedNodes, - "\nremovedNodes:", mutation.removedNodes, - "\nnodeType: ", mutation.addedNodes[0].nodeType, - "\nnodeName: ", mutation.addedNodes[0].nodeName, - "\ndata: ", mutation.addedNodes[0].value - ) - console.log("捕捉 ‘删除样式恢复正常行’ 成功") - - let spanContent = document.createElement("span"); - spanContent.setAttribute("data-flag", "span_content") - spanContent.innerHTML = "
"; - target.innerHTML = null; - target.append(spanContent); - return; - } + // if (mutation.removedNodes.length === 0 + // && mutation.addedNodes.length === 1 + // && target.nodeName === "P" && target.getAttribute("data-order") != null + // // && target.childNodes + // && mutation.addedNodes[0].nodeName === "BR" + // ) { + // console.log( + // "删除 br target: ", target, + // "\nmutation:", mutation, + // "\ntarget.childNodes:", target.childNodes, + // "\naddedNodes:", mutation.addedNodes, + // "\nremovedNodes:", mutation.removedNodes, + // "\nnodeType: ", mutation.addedNodes[0].nodeType, + // "\nnodeName: ", mutation.addedNodes[0].nodeName, + // "\ndata: ", mutation.addedNodes[0].value + // ) + // console.log("捕捉 ‘删除样式恢复正常行’ 成功") + // + // let spanContent = document.createElement("span"); + // spanContent.setAttribute("data-flag", "span_content") + // spanContent.innerHTML = "
"; + // target.innerHTML = null; + // target.append(spanContent); + // return; + // } other(mutation); } @@ -178,8 +166,8 @@ define(function (require, exports, module) { let utils = require("../../common/utils"); let ctx = require("../../common/ctx"); //测试内容填写 - let testDiv = document.getElementById("testDevice"); - testDiv.innerText = mutation.oldValue + // let testDiv = document.getElementById("testDevice"); + // testDiv.innerText = mutation.oldValue let grandfatherElement = target.parentNode?.parentElement; //处理添加了样式的 行 @@ -243,42 +231,42 @@ define(function (require, exports, module) { // console.log("curSpanContent: ", curSpanContent) //无序列表 - if (curSpanContent.innerHTML.startsWith("- ") || curSpanContent.innerHTML.startsWith("- ")) { - let curPreSpan = curP.querySelector("span[data-flag='span_pre']"); - let curPreSpanTxt = utils.GetText(curPreSpan); - if (curPreSpanTxt === " • " || curPreSpanTxt === " ◦ " || curPreSpanTxt === " ▪ ") { - return; - } else { - let previousSiblingP = curP.previousElementSibling; - let preSpanTxtOfPreP = null - if (previousSiblingP != null) { - let tmpPre = previousSiblingP.querySelector("span[data-flag='span_pre']"); - preSpanTxtOfPreP = utils.GetText(tmpPre); - } - - //上一级是否也是无序列表。 如果是则 后移 - if (preSpanTxtOfPreP != null && (preSpanTxtOfPreP === " • " || preSpanTxtOfPreP === " ◦ " || preSpanTxtOfPreP === " ▪ ")) { - if (preSpanTxtOfPreP === " • ") { - curPreSpan.setAttribute("contenteditable", "true"); - curPreSpan.innerHTML = "" + " ◦ " + "" - } else if (preSpanTxtOfPreP === " ◦ ") { - curPreSpan.setAttribute("contenteditable", "true"); - curPreSpan.innerHTML = "" + " ▪ " + "" - } else { - console.log("不支持继续下转") - } - } else { - curPreSpan.innerHTML = "" + " • " + "" - } - - curSpanContent.textContent = curSpanContent.textContent.substring(2, curSpanContent.textContent.length); - - //光标定位 - utils.GetSelection().removeAllRanges(); - utils.GetSelection().setPosition(curSpanContent, 0); - curSpanContent.focus(); - } - } + // if (curSpanContent.innerHTML.startsWith("- ") || curSpanContent.innerHTML.startsWith("- ")) { + // let curPreSpan = curP.querySelector("span[data-flag='span_pre']"); + // let curPreSpanTxt = utils.GetText(curPreSpan); + // if (curPreSpanTxt === " • " || curPreSpanTxt === " ◦ " || curPreSpanTxt === " ▪ ") { + // return; + // } else { + // let previousSiblingP = curP.previousElementSibling; + // let preSpanTxtOfPreP = null + // if (previousSiblingP != null) { + // let tmpPre = previousSiblingP.querySelector("span[data-flag='span_pre']"); + // preSpanTxtOfPreP = utils.GetText(tmpPre); + // } + // + // //上一级是否也是无序列表。 如果是则 后移 + // if (preSpanTxtOfPreP != null && (preSpanTxtOfPreP === " • " || preSpanTxtOfPreP === " ◦ " || preSpanTxtOfPreP === " ▪ ")) { + // if (preSpanTxtOfPreP === " • ") { + // curPreSpan.setAttribute("contenteditable", "true"); + // curPreSpan.innerHTML = "" + " ◦ " + "" + // } else if (preSpanTxtOfPreP === " ◦ ") { + // curPreSpan.setAttribute("contenteditable", "true"); + // curPreSpan.innerHTML = "" + " ▪ " + "" + // } else { + // console.log("不支持继续下转") + // } + // } else { + // curPreSpan.innerHTML = "" + " • " + "" + // } + // + // curSpanContent.textContent = curSpanContent.textContent.substring(2, curSpanContent.textContent.length); + // + // //光标定位 + // utils.GetSelection().removeAllRanges(); + // utils.GetSelection().setPosition(curSpanContent, 0); + // curSpanContent.focus(); + // } + // } } else { other(mutation); } diff --git a/static/js/event/impl/RSizeEventImpl.js b/static/js/event/impl/RSizeEventImpl.js index 5a97096..d63b80b 100644 --- a/static/js/event/impl/RSizeEventImpl.js +++ b/static/js/event/impl/RSizeEventImpl.js @@ -51,12 +51,12 @@ define(function (require, exports, module) { curDoc.style.fontSize = nowFrontSize; console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize); - let testDiv = document.getElementById("testDevice"); - testDiv.innerText += "\ncurClientW: " + curClientW; - testDiv.innerText += "\ndesignWith: " + designWidth; - testDiv.innerText += "\n1rem =: " + nowFrontSize; - testDiv.innerText += "\nwindow.screen.width =: " + window.screen.width; - testDiv.innerText += "\nwindow.screen.height =: " + window.screen.height; + // let testDiv = document.getElementById("testDevice"); + // testDiv.innerText += "\ncurClientW: " + curClientW; + // testDiv.innerText += "\ndesignWith: " + designWidth; + // testDiv.innerText += "\n1rem =: " + nowFrontSize; + // testDiv.innerText += "\nwindow.screen.width =: " + window.screen.width; + // testDiv.innerText += "\nwindow.screen.height =: " + window.screen.height; // testDiv.innerText = testDiv.innerText + // // "\n navigator_userAgent :" + navigator.userAgent.toLocaleLowerCase() + // "\n isMobile :" + /mobi|android|iphone|ipad|ipod/i.test(navigator.userAgent.toLocaleLowerCase()) + @@ -112,9 +112,8 @@ define(function (require, exports, module) { myEditFrontSize.style.fontSize = ctx.editFrontSize + 'px'; } - // console.log("myEditFrontSize: ", myEditFrontSize.style.fontSize); - let testDiv = document.getElementById("testDevice"); - testDiv.innerText += "\ndpr: " + dpr + "\nmyEditFrontSize: " + myEditFrontSize.style.fontSize; + //show + document.getElementById("cur_my_font_size").textContent = ctx.editFrontSize + "px" } diff --git a/static/tmp b/static/tmp index 2f86e4f..a395d47 100644 --- a/static/tmp +++ b/static/tmp @@ -20,6 +20,7 @@ mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es52.mongodb.ivolces.c # 从节点 mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es00.mongodb.ivolces.com:3717/?authSource=admin + mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es10.mongodb.ivolces.com:3717/?authSource=admin mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es20.mongodb.ivolces.com:3717/?authSource=admin mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es30.mongodb.ivolces.com:3717/?authSource=admin diff --git a/static/yanxuelu.html b/static/yanxuelu.html index 6bb9ae3..7e60afe 100644 --- a/static/yanxuelu.html +++ b/static/yanxuelu.html @@ -1,5 +1,5 @@ - + @@ -33,58 +33,83 @@
-
-
测试
-
-
- - ｜ - - ｜ - -
-
+ + + + + + + + + + +
-
-
- - - -
-
+
+ + + + + + + + + + +
+ 14px
+ + + + +
-
- - + + + -
-
- - + + + + + + + + + +
+
+
+ + + -
+
@@ -173,26 +198,46 @@
- - - - - - - - - - - - - - - + +
+
+ + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+
+ +
-
+

测试编辑 @@ -216,7 +261,7 @@ console.dir(select) console.dir(rangeAt) - let spanContent = rangeAt.commonAncestorContainer.parentElement.querySelector("span[data-flag='span_content']"); + 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))