server/mylomen-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

to:sync

Browse Source
This commit is contained in:
shaoyongjun 2024-11-10 01:51:52 +08:00
parent 97611ea548
commit 978bafac7f
9 changed files with 475 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
static/css/myEdit.css
View File

@ -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 {

15
static/js/common/a4Utils.js
View File

@ -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;
}

28
static/js/event/MyEventListener.js
View File

@ -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

25
static/js/event/impl/AdjustMyFontSizeEventImpl.js
View File

@ -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"
}
//导出

152
static/js/event/impl/BeforeStyleEventImpl.js Normal file
View File

@ -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;
});

188
static/js/event/impl/MutationObserverImpl.js
View File

@ -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 = "<span contenteditable='false'>" + preSpanTxtOfPreP + "</span>";
}
}
//添加到元素首位
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 = "<span contenteditable='false'>" + preSpanTxtOfPreP + "</span>";
// }
// }
//
// //添加到元素首位
// 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 = "<br/>";
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 = "<br>";
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 = "<br>";
// 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("-&nbsp;")) {
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 = "<span contenteditable='false'>" + " ◦ " + "</span>"
} else if (preSpanTxtOfPreP === " ◦ ") {
curPreSpan.setAttribute("contenteditable", "true");
curPreSpan.innerHTML = "<span contenteditable='false'>" + " ▪ " + "</span>"
} else {
console.log("不支持继续下转")
}
} else {
curPreSpan.innerHTML = "<span>" + " • " + "</span>"
}
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("-&nbsp;")) {
// 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 = "<span contenteditable='false'>" + " ◦ " + "</span>"
// } else if (preSpanTxtOfPreP === " ◦ ") {
// curPreSpan.setAttribute("contenteditable", "true");
// curPreSpan.innerHTML = "<span contenteditable='false'>" + " ▪ " + "</span>"
// } else {
// console.log("不支持继续下转")
// }
// } else {
// curPreSpan.innerHTML = "<span>" + " • " + "</span>"
// }
//
// curSpanContent.textContent = curSpanContent.textContent.substring(2, curSpanContent.textContent.length);
//
// //光标定位
// utils.GetSelection().removeAllRanges();
// utils.GetSelection().setPosition(curSpanContent, 0);
// curSpanContent.focus();
// }
// }
} else {
other(mutation);
}

17
static/js/event/impl/RSizeEventImpl.js
View File

@ -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"
}

1
static/tmp
View File

@ -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

151
static/yanxuelu.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" style="font-size: 1.5px">
<head>
<!-- https://quilljs.com/docs/customization/registries -->
@ -33,58 +33,83 @@
<header>
<!-- 顶部 -->
<div id="head_top" style="font-size: 12rem">
<div >测试</div>
<div ></div>
<div >
<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>
<!-- <div id="head_top" style="font-size: 12rem">-->
<!-- <div>测试</div>-->
<!-- <div></div>-->
<!-- <div>-->
<!-- <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>-->
<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="10rem" height="10rem" 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>
<div style="display: flex; margin: 0 0; align-items: center">
<!-- <div>-->
<!-- <svg width="10rem" height="10rem" 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>-->
<span id="my_fontSize-" style=" transform: rotate(90deg); align-content: center;
border-radius: 3rem;
background-color:lightgrey;">
<svg width="10rem" height="10rem" 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>
</span>
<div style="margin: 0 2rem">
<span id="cur_my_font_size" style="font-size: 14px">14px</span>
</div>
<span id="my_fontSize+" style=" transform: rotate(-90deg); align-content: center;
margin-left: 2rem;
border-radius: 3rem;
background-color: lightgrey;">
<svg width="10rem" height="10rem" 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>
</span>
</div>
</div>
<div class="my-divider-item"></div>
<div style="display: flex;">
<div>
<svg width="10rem" height="10rem" 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>
<span class="my_before_style" data-k="my-li-content" data-v="ol">
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
data-icon="DisorderListOutlined">
<path d="M3.5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM9 3a1 1 0 0 0 0 2h13a1 1 0 1 0 0-2H9Zm0 8a1 1 0 1 0 0 2h13a1 1 0 1 0 0-2H9Zm-1 9a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm-3-8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-1.5 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
fill="currentColor"></path>
</svg>
</div>
<div>
<svg width="10rem" height="10rem" 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>
</span>
<!-- <div>-->
<!-- <svg width="10rem" height="10rem" 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>-->
</div>
<div style="width: 10rem"></div>
<div>
<span class="my_before_style" data-k="my-li-content" data-v="ul">
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"
data-icon="OrderListOutlined">
<path d="M4.577 1.809a.543.543 0 0 0-.819-.469l-.502.296-.004.003-.309.187c-.342.207-.858.519-1.142.701a.573.573 0 0 0-.261.485c0 .482.544.774.948.522.227-.141.465-.287.642-.395v3.478a.723.723 0 1 0 1.447 0V1.81Zm-.899 7.128c-1.233 0-2.056.817-2.056 1.84a.25.25 0 0 0 .25.251h.891a.259.259 0 0 0 .26-.259c0-.32.227-.589.608-.589a.62.62 0 0 1 .428.15.52.52 0 0 1 .16.396c0 .315-.188.579-.538.949l-1.815 1.968a.672.672 0 0 0 .494 1.127h3.003a.63.63 0 0 0 0-1.26H3.744l.933-1.047c.61-.652.99-1.127.99-1.834a1.57 1.57 0 0 0-.563-1.226c-.356-.3-.852-.466-1.426-.466Zm.015 7.429c-1.006 0-1.692.478-1.946 1.178a.541.541 0 0 0 .107.553c.122.137.307.22.503.22a.773.773 0 0 0 .478-.18c.125-.098.23-.222.312-.33.096-.124.257-.224.511-.224.21 0 .37.063.472.152a.46.46 0 0 1 .16.359v.002a.503.503 0 0 1-.165.391.71.71 0 0 1-.483.16h-.14a.606.606 0 1 0 0 1.213h.168c.275 0 .468.074.59.178a.538.538 0 0 1 .186.42.554.554 0 0 1-.185.435c-.122.107-.314.184-.583.184-.32 0-.528-.114-.644-.264a1.776 1.776 0 0 0-.308-.323.766.766 0 0 0-.47-.174.678.678 0 0 0-.504.22.549.549 0 0 0-.114.55c.244.717.926 1.22 2.012 1.22.602 0 1.161-.168 1.575-.478.416-.311.683-.768.676-1.323-.01-.69-.376-1.122-.793-1.332.34-.231.63-.644.621-1.224-.019-.962-.92-1.583-2.036-1.583ZM8 4a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 8a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 8a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z"
fill="currentColor"></path>
</svg>
</div>
</span>
</div>
<div class="my-divider-item"></div>
@ -173,26 +198,46 @@
</svg>
</span>
</div>
<!-- <div class="my-divider-item"></div>-->
<!-- <div>-->
<!-- <span>-->
<!-- <svg width="10rem" height="10rem" viewBox="0 0 18 18" fill="none"-->
<!-- 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>-->
<!-- </svg>-->
<!-- </span>-->
<!-- </div>-->
<!-- <div class="my-divider-item"></div>-->
<!-- <div>-->
<!-- <button onclick="info(this)" style="font-size: 16px">info</button>-->
<!-- </div>-->
<div class="my-divider-item"></div>
<div style="display: flex; flex-direction:column; align-items: flex-end">
<span>
<svg width="10rem" height="10rem" viewBox="0 0 18 18" fill="none"
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>
</svg>
</span>
<div id="_position_more">
<div id="_show_more">
<!-- <div id="my_fontSize0">-->
<!-- cls-->
<!-- </div>-->
<!-- <div>-->
<!-- <span id="my_fontSize-" style="border: 1px red solid; min-width: 2em">-</span>-->
<!-- <span style="border: 1px red solid;">14px</span>-->
<!-- <span id="my_fontSize+" style="border: 1px red solid; min-width: 6rem">+</span>-->
<!-- </div>-->
<!-- <div style="display: flex;align-content:space-between;">-->
<!-- <span>-->
<!-- <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-icon="PrinterOutlined"><path d="M18.788 10.74a.97.97 0 1 1-1.94 0 .97.97 0 0 1 1.94 0Z" fill="currentColor"></path><path d="M6.5 1.333h11c1.15 0 1.97.967 1.967 1.967v3.367h.29a2.91 2.91 0 0 1 2.91 2.909v5.814c0 1.11-.976 1.943-1.937 1.943h-1.942v3.394c0 1.07-.956 1.94-1.94 1.94H7.153c-1.063 0-1.94-.942-1.94-1.94v-3.394h-1.94c-.932 0-1.942-.833-1.938-1.94V9.577a2.91 2.91 0 0 1 2.909-2.91h.29V3.3c0-1.05.867-1.97 1.967-1.967Zm11.027 5.334V3.273H6.473v3.394h11.054ZM5.212 15.394v-.485c0-1.088.945-1.94 1.94-1.94h9.697c1.077 0 1.94.973 1.94 1.94v.485h1.938V9.576a.97.97 0 0 0-.97-.97H4.244a.97.97 0 0 0-.97.97v5.818h1.94Zm1.94-.485v5.818h9.697V14.91H7.152Z" fill="currentColor"></path></svg>-->
<!-- </span>-->
<!-- <span>打印</span>-->
<!-- </div>-->
</div>
</div>
</div>
</div>
</div>
</header>
<main id="myEdit_main">
<main id="myEdit_main" style="font-size: 14px">
<!-- 标题 -->
<h3 contenteditable="true">
测试编辑
@ -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))