to:sync

static/js/common/ctx.js

@@ -67,7 +67,7 @@ define(function (require, exports, module) {
         }
 
         getCurRowNo(){
-            return this.rowNol
+            return this.rowNo
         }
 
         getScreenWidth() {

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

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();

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 = "<br />"; //保留的部分
+                        //新增一行
+                        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="<br/>"
+                }
+
+                //新增一行
+                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();
+            }
+        }
+
 
     }
 

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);
         }
 
         //在鼠标按下的时候删除，体验更好

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')
+            const enterHandle = require('./EnterEventImpl')
-            // enterHandle.handle(e);
+            enterHandle.handle(e);
-            // return;
+            return;
         }
     }
 

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

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("contenteditable", "false")
-    preSpan.setAttribute("data-flag","span_pre")
+    preSpan.setAttribute("data-flag", "span_pre")
-    newParagraph.append(preSpan);
     //内置span
     let span = document.createElement("span");
     span.append(document.createElement("br"));
-    span.setAttribute("data-flag","span_content")
+    span.setAttribute("data-flag", "span_content")
-    newParagraph.append(span);
+    newParagraph.append(preSpan, span);
     //添加一行
     ctx.MyRoot().append(newParagraph);
     //收起选区到一个点，光标落在一个可编辑元素上

static/yanxuelu.html

@@ -31,7 +31,7 @@
 
 <body>
 
-    <header>
+<header>
     <!--  顶部  -->
     <div id="head_top" style="font-size: 100rem">
         <div style="width:20%">测试</div>
@@ -190,9 +190,9 @@
             </div>
         </div>
     </div>
-    </header>
+</header>
 
-    <main id="myEdit_main">
+<main id="myEdit_main">
     <!-- 标题   -->
     <h3 contenteditable="true">
         测试编辑
@@ -200,13 +200,13 @@
     <!-- 内容   -->
     <div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
     </div>
-    </main>
+</main>
 
-    <footer>
+<footer>
 
-    </footer>
+</footer>
-    <div id="testDiv" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
+<div id="testDiv" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
-    <div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
+<div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
 
 </body>
 <script>
@@ -216,6 +216,13 @@
         console.dir(select)
         console.dir(rangeAt)
 
+        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))
+        }
+
+
     }
 
 </script>