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-10-31 12:48:27 +08:00
parent 9f8817cf98
commit dbd5c1caff
4 changed files with 72 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
static/js/lib/biz/MyBiz.js
View File

@ -23,7 +23,7 @@ export class MyBiz {
newParagraph.setAttribute("id", uuid)
newParagraph.setAttribute("data-order", curOrder)
newParagraph.onkeydown = window.myEdit.eventListener.KeydownListener
newParagraph.innerHTML = "<br>"
// newParagraph.innerHTML = "<br>"
//添加一行
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("&nbsp;#&nbsp;"),
"\neq01", curP.innerHTML.startsWith(" # "),
"\neq1", curP.innerText.startsWith("#&nbsp;"),
"\neq2", curP.innerText.startsWith("#"),
"\neq3", curP.innerHTML.startsWith("#&nbsp;"),
"\neq4", curP.innerHTML.startsWith("# "))
/**
* h1 ~ h6
*/
if (curP.innerText.startsWith("#") && curP.innerHTML.endsWith("&nbsp;")) {
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("#&nbsp;") || curP.innerHTML.startsWith("# ")) {
mapNode.getStyle().setNodeType("h1")
this.becomeAnotherElement(curP, "h1", onkeydownHandle)
} else if (curP.innerHTML.startsWith("##&nbsp;")) {
mapNode.getStyle().setNodeType("h2")
this.becomeAnotherElement(curP, "h2", onkeydownHandle)
} else if (curP.innerHTML.startsWith("###&nbsp;")) {
mapNode.getStyle().setNodeType("h3")
this.becomeAnotherElement(curP, "h3", onkeydownHandle)
} else if (curP.innerHTML.startsWith("####&nbsp;")) {
mapNode.getStyle().setNodeType("h4")
this.becomeAnotherElement(curP, "h4", onkeydownHandle)
} else if (curP.innerHTML.startsWith("#####&nbsp;")) {
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("&nbsp;")) {
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 = "∙ &nbsp;"
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(".&nbsp;")) {
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 = "<br>"
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 执行

13
static/js/lib/event/MyEventListener.js
View File

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

2
static/js/lib/todolist Normal file
View File

@ -0,0 +1,2 @@
选择文字 第一次添加样式的时候 丢失选区问题

12
static/yanxuelu.html
View File

@ -10,7 +10,7 @@
<link rel="stylesheet" type="text/css" href="./css/myEdit.css">
</head>
<body style="display: flex; flex-direction:column; ">
<body style="display: flex; flex-direction:column; background-color: #ffebc3">
<header>
<div class="fixStylePosition" id="_style_utils">
@ -59,15 +59,15 @@
<div class="my-divider-item"></div>
<div style="display: flex;">
<span class="fixStyleInnerSpan" data-value="b">
<svg data-value="b" width="1.8rem" height="1.8rem" viewBox="0 0 24 24"
<svg width="1.8rem" height="1.8rem" viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="BoldOutlined">
<path data-value="b" 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"
<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-value="del">
<svg data-value="del" width="1.8rem" height="1.8rem"
<svg width="1.8rem" height="1.8rem"
viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="HorizontalLineOutlined">
<path
@ -76,7 +76,7 @@
</svg>
</span>
<span class="fixStyleInnerSpan" data-value="i">
<svg data-value="i" width="1.8rem" height="1.8rem" viewBox="0 0 24 24"
<svg width="1.8rem" height="1.8rem" viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="ItalicOutlined">
<path
@ -85,7 +85,7 @@
</svg>
</span>
<span class="fixStyleInnerSpan" data-value="u">
<svg data-value="u" width="1.8rem" height="1.8rem" viewBox="0 0 24 24"
<svg width="1.8rem" height="1.8rem" viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="UnderlineOutlined">
<path