diff --git a/static/js/common/ctx.js b/static/js/common/ctx.js
index c0d213f..d2b07b6 100644
--- a/static/js/common/ctx.js
+++ b/static/js/common/ctx.js
@@ -67,7 +67,7 @@ define(function (require, exports, module) {
}
getCurRowNo(){
- return this.rowNol
+ return this.rowNo
}
getScreenWidth() {
diff --git a/static/js/event/MyEventListener.js b/static/js/event/MyEventListener.js
index 204ef25..a06e2ba 100644
--- a/static/js/event/MyEventListener.js
+++ b/static/js/event/MyEventListener.js
@@ -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);
}
}
diff --git a/static/js/event/impl/ApplyStyleEventImpl.js b/static/js/event/impl/ApplyStyleEventImpl.js
index 9bc4c22..5c89d91 100644
--- a/static/js/event/impl/ApplyStyleEventImpl.js
+++ b/static/js/event/impl/ApplyStyleEventImpl.js
@@ -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();
diff --git a/static/js/event/impl/EnterEventImpl.js b/static/js/event/impl/EnterEventImpl.js
index 4a053eb..206491a 100644
--- a/static/js/event/impl/EnterEventImpl.js
+++ b/static/js/event/impl/EnterEventImpl.js
@@ -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 = "
"; //保留的部分
+ //新增一行
+ 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="
"
+ }
+
+ //新增一行
+ 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();
+ }
+ }
+
}
diff --git a/static/js/event/impl/KeyDownEventImpl.js b/static/js/event/impl/KeyDownEventImpl.js
index 76795da..98e401f 100644
--- a/static/js/event/impl/KeyDownEventImpl.js
+++ b/static/js/event/impl/KeyDownEventImpl.js
@@ -26,7 +26,7 @@ define(function (require, exports, module) {
//回车事件,禁止处理。防止生成 div
if (keyCode === 13) {
- // utils.ProhibitDefaultEvent(event);
+ utils.ProhibitDefaultEvent(event);
}
//在鼠标按下的时候删除，体验更好
diff --git a/static/js/event/impl/KeyUpEventImpl.js b/static/js/event/impl/KeyUpEventImpl.js
index 470deee..9f1d9a8 100644
--- a/static/js/event/impl/KeyUpEventImpl.js
+++ b/static/js/event/impl/KeyUpEventImpl.js
@@ -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;
}
}
diff --git a/static/js/event/impl/MutationObserverImpl.js b/static/js/event/impl/MutationObserverImpl.js
index 224a55d..13e11f6 100644
--- a/static/js/event/impl/MutationObserverImpl.js
+++ b/static/js/event/impl/MutationObserverImpl.js
@@ -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
diff --git a/static/js/index.js b/static/js/index.js
index 075c258..779a74c 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -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);
//收起选区到一个点，光标落在一个可编辑元素上
diff --git a/static/yanxuelu.html b/static/yanxuelu.html
index a4124a0..295c7db 100644
--- a/static/yanxuelu.html
+++ b/static/yanxuelu.html
@@ -7,7 +7,7 @@
📒
+ content="width=device-width, height=device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
@@ -31,182 +31,182 @@
-
-
-
-
测试
-
-
-
- ｜
-
- ｜
-
-
+
+
+
+
测试
+
+
+
+ ｜
+
+ ｜
+
-
-
-
-
-
-
+
-
-
-
- 测试编辑
-
-
-
-
-
+
+
+
+ 测试编辑
+
+
+
+
+
-
+
+