From dbd5c1caffad56559e4ce270dc5ae43c674c370b Mon Sep 17 00:00:00 2001 From: shaoyongjun Date: Thu, 31 Oct 2024 12:48:27 +0800 Subject: [PATCH] to:sync --- static/js/lib/biz/MyBiz.js | 104 ++++++++++++++----------- static/js/lib/event/MyEventListener.js | 13 ++-- static/js/lib/todolist | 2 + static/yanxuelu.html | 12 +-- 4 files changed, 72 insertions(+), 59 deletions(-) create mode 100644 static/js/lib/todolist diff --git a/static/js/lib/biz/MyBiz.js b/static/js/lib/biz/MyBiz.js index b2debbb..e5ec0fe 100644 --- a/static/js/lib/biz/MyBiz.js +++ b/static/js/lib/biz/MyBiz.js @@ -23,7 +23,7 @@ export class MyBiz { newParagraph.setAttribute("id", uuid) newParagraph.setAttribute("data-order", curOrder) newParagraph.onkeydown = window.myEdit.eventListener.KeydownListener - newParagraph.innerHTML = "
" + // newParagraph.innerHTML = "
" //添加一行 window.myEdit.utils.AddNewParagraph(newParagraph); } @@ -247,46 +247,58 @@ export class MyBiz { let curP = window.myEdit.utils.GetEventTarget(event); let myDocItem = new MyDocItem(curP); let inputLength = curP.innerText.length + console.log("emptyKeyWorkHandler :", curP, " _'", curP.innerHTML, "'_'", curP.innerText, "'_", + "\neq00", curP.innerHTML.startsWith(" # "), + "\neq01", curP.innerHTML.startsWith(" # "), + "\neq1", curP.innerText.startsWith("# "), + "\neq2", curP.innerText.startsWith("#"), + "\neq3", curP.innerHTML.startsWith("# "), + "\neq4", curP.innerHTML.startsWith("# ")) /** * h1 ~ h6 */ - if (curP.innerText.startsWith("#") && curP.innerHTML.endsWith(" ")) { + if (curP.innerText.startsWith("#")) { let curNo = myDocItem.parseOrder(); let mapNode = window.myEdit.ctx.MyDocMap.get(curNo); - - // console.log(curP, " - ", curP.innerHTML, curP.innerHTML.startsWith("# ")) - if (curP.innerHTML.startsWith("# ") || curP.innerHTML.startsWith("# ")) { - mapNode.getStyle().setNodeType("h1") - this.becomeAnotherElement(curP, "h1", onkeydownHandle) - } else if (curP.innerHTML.startsWith("## ")) { - mapNode.getStyle().setNodeType("h2") - this.becomeAnotherElement(curP, "h2", onkeydownHandle) - } else if (curP.innerHTML.startsWith("### ")) { - mapNode.getStyle().setNodeType("h3") - this.becomeAnotherElement(curP, "h3", onkeydownHandle) - } else if (curP.innerHTML.startsWith("#### ")) { - mapNode.getStyle().setNodeType("h4") - this.becomeAnotherElement(curP, "h4", onkeydownHandle) - } else if (curP.innerHTML.startsWith("##### ")) { - mapNode.getStyle().setNodeType("h5") - this.becomeAnotherElement(curP, "h5", onkeydownHandle) - } else { + if (curP.innerHTML.startsWith("######")) { mapNode.getStyle().setNodeType("h6") - this.becomeAnotherElement(curP, "h6", onkeydownHandle) + curP.innerHTML=curP.innerHTML.replace("######","") + this.becomeAnotherElement(curP, "h6") + } else if (curP.innerHTML.startsWith("#####")) { + mapNode.getStyle().setNodeType("h5") + curP.innerHTML=curP.innerHTML.replace("#####","") + this.becomeAnotherElement(curP, "h5") + } else if (curP.innerHTML.startsWith("####")) { + mapNode.getStyle().setNodeType("h4") + curP.innerHTML=curP.innerHTML.replace("####","") + this.becomeAnotherElement(curP, "h4") + } else if (curP.innerHTML.startsWith("###")) { + mapNode.getStyle().setNodeType("h3") + curP.innerHTML=curP.innerHTML.replace("###","") + this.becomeAnotherElement(curP, "h3") + } else if (curP.innerHTML.startsWith("##")) { + mapNode.getStyle().setNodeType("h2") + curP.innerHTML=curP.innerHTML.replace("##","") + this.becomeAnotherElement(curP, "h2") + } else { + mapNode.getStyle().setNodeType("h1") + curP.innerHTML=curP.innerHTML.replace("#","") + this.becomeAnotherElement(curP, "h1") } } /** * 无序列表效果 */ - if (inputLength === 2 && curP.innerText.startsWith("-") && curP.innerHTML.endsWith(" ")) { + if (curP.innerText.startsWith("-")) { let curNo = myDocItem.parseOrder(); let mapNode = window.myEdit.ctx.MyDocMap.get(curNo); mapNode.getStyle().setPreStyle("ul", true) //clean - curP.innerHTML = "" - mapNode.setSource("") + let historyContent = curP.innerHTML.replace("-", ""); + curP.innerHTML = historyContent + mapNode.setSource(curP.innerText) //根据上一层级元素动态选择 todo curP.setAttribute("style", "padding-left: 1rem;") @@ -297,12 +309,6 @@ export class MyBiz { newParagraph.innerHTML = "∙  " curP.append(newParagraph) - //添加一个选区 - var selObj = window.myEdit.utils.GetSelection(); - var rangeObj = document.createRange() - rangeObj.selectNode(curP) - selObj.addRange(rangeObj) - //收起选区到一个点，光标落在一个可编辑元素上 window.myEdit.utils.GetSelection().collapse(curP, true) } @@ -310,7 +316,8 @@ export class MyBiz { /** * 有序列表效果 */ - if (inputLength > 2 && inputLength <= 5 && isNum(curP.innerText.substring(0, inputLength - 2)) && curP.innerHTML.endsWith(". ")) { + let preContent = curP.innerText.split(" ")[0] + if (window.myEdit.utils.IsNum(preContent)) { let num = curP.innerText.substring(0, inputLength - 2) console.log(curP.innerText, num) @@ -319,8 +326,9 @@ export class MyBiz { mapNode.getStyle().setPreStyle("ol", num) //clean - curP.innerHTML = "" - mapNode.setSource("") + let historyContent = curP.innerHTML.replace("-", ""); + curP.innerHTML = historyContent + mapNode.setSource(curP.innerText) //todo curP.setAttribute("style", "padding-left: 1rem;") //新增元素 @@ -340,29 +348,30 @@ export class MyBiz { * 变成另一个元素 * @param {*} elementName */ - becomeAnotherElement(elementName) { + becomeAnotherElement(curP, elementName) { let newParagraph = document.createElement(elementName) newParagraph.setAttribute("contenteditable", "true") - newParagraph.setAttribute("data-id", this.self.getAttribute("data-id")) - newParagraph.setAttribute("id", this.self.getAttribute("data-id")) - newParagraph.setAttribute("data-order", this.self.getAttribute("data-order")) - newParagraph.onkeydown = onkeydownHandle + newParagraph.setAttribute("data-id", curP.getAttribute("data-id")) + newParagraph.setAttribute("id", curP.getAttribute("data-id")) + newParagraph.setAttribute("data-order", curP.getAttribute("data-order")) + newParagraph.onkeydown = window.myEdit.eventListener.KeydownListener //todo 支持 有数据的行 在行首输入 # // if() // switch (elementName){ // case "h1": // } - newParagraph.innerHTML = "
" + newParagraph.innerHTML = curP.innerHTML - window.myEdit.utils.InsertAfter(newParagraph, this.self) - this.self.remove(); - this.self = newParagraph; + window.myEdit.utils.InsertAfter(curP, newParagraph) + curP.remove(); + curP = newParagraph; //matData - let curNo = parseOrder(this.self) - let mapNode = utils.MyDocMap.get(curNo) - mapNode.setSource("") + let myP = new MyDocItem(curP); + let curNo = myP.parseOrder(); + let mapNode = window.myEdit.ctx.getMapItem(curNo) + mapNode.setSource(curP.innerText) //收起选区到一个点，光标落在一个可编辑元素上 window.myEdit.utils.GetSelection().setPosition(newParagraph, 0) @@ -377,8 +386,9 @@ export class MyBiz { let curS = window.myEdit.utils.GetSelection(); let curP = window.myEdit.utils.GetEventTarget(event); let styleName = curP.getAttribute("data-value"); - if (styleName === undefined) { - styleName = curP.parentNode.getAttribute("data-value"); + if (styleName === undefined || styleName === null) { + styleName = curP.closest("span").getAttribute("data-value"); + console.log("closest: ", curP, curP.closest("span")) } let className = this.parseStyleName2ClassName(styleName) //todo 只对 nodeType = p 执行 diff --git a/static/js/lib/event/MyEventListener.js b/static/js/lib/event/MyEventListener.js index 3aafbe5..798f791 100644 --- a/static/js/lib/event/MyEventListener.js +++ b/static/js/lib/event/MyEventListener.js @@ -6,6 +6,11 @@ export class MyEventListener { constructor(styleClass) { + //这里监听鼠标按下事件 + document.getElementById("_style_utils").addEventListener("mousedown", function (e) { + const event = window.myEdit.utils.ParseEvent(e); + window.myEdit.utils.ProhibitDefaultEvent(event); + },true) //样式事件 let styleList = document.getElementsByClassName(styleClass); @@ -93,6 +98,7 @@ export class MyEventListener { */ InputListener(e) { const event = window.myEdit.utils.ParseEvent(e); + console.log("input : ",event) window.myEdit.biz.inputHandle(event); } @@ -113,6 +119,7 @@ export class MyEventListener { */ CompositionendListener(e) { const event = window.myEdit.utils.ParseEvent(e); + console.log("Compositionend : ",event) window.myEdit.biz.compositionendHandle(event); } @@ -132,12 +139,6 @@ export class MyEventListener { */ MouseUp(e) { let styleUtils = document.getElementById("_style_utils"); - - styleUtils.addEventListener("mousedown", function (e) { - const event = window.myEdit.utils.ParseEvent(e); - window.myEdit.utils.ProhibitDefaultEvent(event); - }) - if (window.myEdit.utils.GetSelection().isCollapsed) { styleUtils.style.display = "none"; return diff --git a/static/js/lib/todolist b/static/js/lib/todolist new file mode 100644 index 0000000..b17b4e8 --- /dev/null +++ b/static/js/lib/todolist @@ -0,0 +1,2 @@ +选择文字 第一次添加样式的时候 丢失选区问题 + diff --git a/static/yanxuelu.html b/static/yanxuelu.html index 142aec6..7d58265 100644 --- a/static/yanxuelu.html +++ b/static/yanxuelu.html @@ -10,7 +10,7 @@ - +
@@ -59,15 +59,15 @@
- - - - -