to:sync

static/css/myEdit.css

@@ -15,6 +15,186 @@ body, html {
 
     /*选中可编辑框是 外层隐藏黑线*/
     outline: none;
+
+    margin: 0;
+    padding: 0
+}
+
+ol,
+ul {
+    list-style: none
+}
+
+a {
+    color: #000;
+    text-decoration: none
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: 100%;
+    font-weight: 400
+}
+
+.fontsize24,
+h1 {
+    font-size: 24px;
+    font-weight: 400;
+}
+
+.fontsize20,
+h2 {
+    font-size: 20px;
+    font-weight: 400;
+}
+
+.fontsize18,
+h3 {
+    font-size: 18px;
+    font-weight: 400;
+}
+
+.fontsize16,
+h4 {
+    font-size: 16px;
+    font-weight: 400;
+}
+
+.fontsize14,
+h5 {
+    font-size: 14px;
+    font-weight: 400;
+}
+
+.fontsize12,
+h6 {
+    font-size: 12px;
+    font-weight: 400;
+}
+
+.fllil li {
+    float: left
+}
+
+.fllir li {
+    float: right
+}
+
+.fl {
+    float: left
+}
+
+.fr {
+    float: right
+}
+
+.radius {
+    border-radius: 100%
+}
+
+.positionCenterLeft {
+    left: 0;
+    right: 0;
+    margin: auto
+}
+
+.positionCenterTop {
+    top: 0;
+    bottom: 0;
+    margin: auto
+}
+
+.positionCenter {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto
+}
+
+.distable {
+    display: table
+}
+
+.distablecell {
+    display: table-cell;
+    vertical-align: middle
+}
+
+.textels {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis
+}
+
+.marginCenter {
+    margin: 0 auto
+}
+
+.t_l {
+    text-align: left
+}
+
+.t_c {
+    text-align: center
+}
+
+.t_r {
+    text-align: right
+}
+
+.unLine {
+    text-decoration: underline
+}
+
+.fiexd {
+    position: fixed
+}
+
+.absolute {
+    position: absolute
+}
+
+.relative {
+    position: relative
+}
+
+.wrapper {
+    clear: both;
+    overflow: hidden
+}
+
+.o-hidden {
+    overflow: hidden
+}
+
+.hidden {
+    display: none
+}
+
+.block {
+    display: block
+}
+
+.lblock {
+    display: inline-block
+}
+
+.clear {
+    clear: both
+}
+
+.pointer {
+    cursor: pointer
+}
+
+img {
+    border: 0;
+    vertical-align: middle
 }
 
 html {
@@ -34,9 +214,12 @@ 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";
+    font-weight: normal;
 
     display: flex;
     flex-direction: column;
@@ -74,7 +257,7 @@ header {
     left: 0;
     /*right: 0;*/
     width: 100%;
-    min-height: 58rem;
+    /*min-height: 58rem;*/
 
     /*background-color: #ffebc3;*/
     /*background-color: deepskyblue;*/
@@ -86,20 +269,6 @@ header {
     /*flex-wrap: nowrap;*/
 }
 
-#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;*/
-
-    font-size: 16rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
 
 .fixStylePosition {
     display: block;
@@ -121,14 +290,20 @@ header {
     /*height: 130rem;*/
     padding: 5rem 5rem;
 
+    font-size: 16rem;
+
     display: flex;
     justify-content: center;
     align-items: center;
     /*align-content: center;*/
+    /*flex-direction: column;*/
+    /*align-items: center;*/
+    /*justify-content: center;*/
+    /*align-content: center;*/
 }
 
 .fixStyleInnerSpan {
-    margin: 0 8rem;
+    margin: 0 1rem;
 }
 
 main {
@@ -137,7 +312,7 @@ main {
     flex-direction: column;
     align-items: center;
 
-    margin-top: 58rem;
+    margin-top: 30rem;
     /*min-height: 80%;*/
 
     /*border: 1px greenyellow solid;*/
@@ -157,7 +332,7 @@ main {
     /*响应式*/
     /*display: flex;*/
     /*flex-direction:column;*/
-    /*flex-wrap: nowrap;*/
+    /*flex-wrap: wrap;*/
 
 }
 
@@ -165,19 +340,64 @@ main {
     /*border: 1px rgb(248, 245, 245) solid;*/
     margin: 0 0;
     padding: 0 0;
+    /*padding: 0 0;*/
     /* border: none;  */
 
+    /* 字符之间的间距 */
+    letter-spacing: normal;
+    height: fit-content;
+
+    line-height: inherit;
+
+    /*布局*/
+    display: flex;
+    justify-content: flex-start;
+    align-items: baseline;
+    /*padding-left: 2em;*/
     /*响应式*/
-    flex: 1 1 100%;
+    /*flex: 1 1 100%;*/
 }
 
-#yxl_note p span{
-    /*border: 1px rgb(248, 245, 245) solid;*/
+#yxl_note p span[data-flag="span_content"] {
+    /*border: 1px deepskyblue solid;*/
     margin: 0 0;
     padding: 0 0;
     /* border: none;  */
+
+    display: inline;
     width: 100%;
     height: 100%;
+
+    /*缩进2个字符的距离*/
+    text-indent: 2em;
+
+    &:empty::before {
+        content: attr(placeholder);
+        /*font-size: 14rem;*/
+        color: #CCC;
+        /*line-height: 21rem;*/
+        /*padding-top: 20rem;*/
+    }
+}
+
+#my-title {
+    &:empty::before {
+        content: '请输入标题';
+        color: #CCC;
+    }
+}
+
+#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);
+
+    margin: 0 0;
+    padding: 0 0;
+
+    /*display: compact;*/
+    /*width: 2em;*/
 }
 
 #testInput {
@@ -189,19 +409,22 @@ 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 {
     background-color: #e9e9eb;
     width: 1px;
     height: 18rem;
-    margin: 0 6rem;
+    margin: 0 3rem;
 }
 
-footer{
+footer {
     width: 100%;
 }
 

static/css/my_drop.css

@@ -0,0 +1,134 @@
+/*隐藏滑动黑条*/
+::-webkit-scrollbar {
+    display: none;
+}
+
+.my_style_nav {
+    font-size: 14rem;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+    padding: 0 0;
+    min-width: 10rem;
+
+    /*border: 1px blue solid;*/
+}
+
+
+.my_style_nav ul {
+    position: fixed;
+    z-index: 99;
+    /*left: 0;*/
+    top: 26rem;
+
+    /*height: 0;*/
+    /*width: 60rem;*/
+    transform: translate(1em, 0rem);
+
+
+    display: none;
+    flex-direction: column;
+    align-items: flex-end;
+    /*justify-content: center;*/
+    /*align-content: center;*/
+
+    /*opacity: 0;*/
+    /*min-height: 70rem;*/
+    max-height: 120rem;
+    /*overflow: hidden;*/
+    overflow: auto;
+
+    padding: 5rem 0;
+    border-radius: 5rem;
+    box-shadow: 0 40rem 80rem rgba(31, 35, 41, 0.1);
+    background-color: rgb(255, 255, 255);
+    border: 1px #f5f5f5 solid;
+}
+
+
+.my_style_nav ul li {
+    float: none;
+    /*过渡代码*/
+    transition: all .3s;
+    background-color: rgb(255, 255, 255);
+    /*opacity: 0;*/
+
+    font-size: 16px;
+    line-height: 1.2;
+    padding: 2rem 5rem;
+    min-width: 55rem;
+    /*border-radius: 5rem;*/
+    /*min-width: 45rem;*/
+
+    /*border: 1px blue solid;*/
+
+    display: flex;
+    /*flex-direction: column;*/
+    /*align-items: center;*/
+    justify-content: flex-end;
+    /*align-content: center;*/
+
+}
+
+.my_style_nav ul li span {
+    min-width: 20rem;
+}
+
+/*.my_style_nav ul li.done::before{*/
+/*    */
+/*}*/
+
+.my_style_nav ul li[data-my-select="true"]::before {
+    content: attr(data-my-select-v);
+    width: 1.2em;
+    transform: rotate(-3deg);
+
+
+    /*content: "";*/
+    /*border-color: black;*/
+    /*border-style: solid;*/
+    /*border-width: 0 0.1em 0.1em 0;*/
+    /*height: 1em;*/
+    /*width: 0.5em;*/
+    /*transform: rotate(50deg);*/
+    /*top: 1em;*/
+    margin-right: 1em;
+}
+
+/*!*奇数项初始往右边偏移100%*!*/
+/*.my_style_nav ul li:nth-of-type(1n) {*/
+/*    transform: translate3d(100%, 0, 0);*/
+/*}*/
+/*!*偶数项初始往左边偏移100%*!*/
+/*.my_style_nav ul li:nth-of-type(2n) {*/
+/*    transform: translate3d(-100%, 0, 0);*/
+/*}*/
+
+/*.my_style_nav:focus ul {*/
+/*    overflow: visible;*/
+/*}*/
+
+
+.my_style_nav span {
+    min-width: 14rem;
+    min-height: 20rem;
+    padding: 0 1rem;
+    /*border: 1px red solid;*/
+}
+
+/*透明度和互动同时进行*/
+.my_style_nav span:hover {
+    /*background: whitesmoke;*/
+    border-radius: 5rem;
+}
+
+/*兄弟 ul*/
+.my_style_nav span:hover + ul {
+    display: flex;
+}
+
+.my_style_nav ul:hover {
+    display: flex;
+}

static/css/reset.css

@@ -0,0 +1,201 @@
+* {
+    margin: 0;
+    padding: 0
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: 100%;
+    font-weight: 400
+}
+
+ol,
+ul {
+    list-style: none
+}
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+th,
+var {
+    font-style: normal;
+    font-weight: 400
+}
+
+fieldset,
+img {
+    border: 0
+}
+
+textarea {
+    resize: none
+}
+
+a {
+    color: #000;
+    text-decoration: none
+}
+
+.fontsize24,
+h1 {
+    font-size: 24px
+}
+
+.fontsize20,
+h2 {
+    font-size: 20px
+}
+
+.fontsize18,
+h3 {
+    font-size: 18px
+}
+
+.fontsize16,
+h4 {
+    font-size: 16px
+}
+
+.fontsize14,
+h5 {
+    font-size: 14px
+}
+
+.fontsize12,
+h6 {
+    font-size: 12px
+}
+
+.bold {
+    font-weight: 700
+}
+
+.fllil li {
+    float: left
+}
+
+.fllir li {
+    float: right
+}
+
+.fl {
+    float: left
+}
+
+.fr {
+    float: right
+}
+
+.radius {
+    border-radius: 100%
+}
+
+.positionCenterLeft {
+    left: 0;
+    right: 0;
+    margin: auto
+}
+
+.positionCenterTop {
+    top: 0;
+    bottom: 0;
+    margin: auto
+}
+
+.positionCenter {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto
+}
+
+.distable {
+    display: table
+}
+
+.distablecell {
+    display: table-cell;
+    vertical-align: middle
+}
+
+.textels {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis
+}
+
+.marginCenter {
+    margin: 0 auto
+}
+
+.t_l {
+    text-align: left
+}
+
+.t_c {
+    text-align: center
+}
+
+.t_r {
+    text-align: right
+}
+
+.unLine {
+    text-decoration: underline
+}
+
+.fiexd {
+    position: fixed
+}
+
+.absolute {
+    position: absolute
+}
+
+.relative {
+    position: relative
+}
+
+.wrapper {
+    clear: both;
+    overflow: hidden
+}
+
+.o-hidden {
+    overflow: hidden
+}
+
+.hidden {
+    display: none
+}
+
+.block {
+    display: block
+}
+
+.lblock {
+    display: inline-block
+}
+
+.clear {
+    clear: both
+}
+
+.pointer {
+    cursor: pointer
+}
+
+img {
+    border: 0;
+    vertical-align: middle
+}

static/js/common/a4Utils.js

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

static/js/common/ctx.js

@@ -9,13 +9,60 @@ define(function (require, exports, module) {
             console.log(("ctx init"));
 
             //可以修改的
-            let editFrontSize = localStorage.getItem('editFrontSize');
+            let editFrontSize = localStorage.getItem('refreshEditFrontSize');
             if (editFrontSize !== undefined && editFrontSize !== null) {
                 this.editFrontSize = editFrontSize;
             } else {
                 this.editFrontSize = 14;
             }
 
+            //refreshPFontSize
+            let refreshPFontSize = localStorage.getItem('refreshPFontSize');
+            if (refreshPFontSize !== undefined && refreshPFontSize !== null) {
+                this.refreshPFontSize = refreshPFontSize;
+            } else {
+                this.refreshPFontSize = {
+                    "font-weight": "normal",
+                    "font-size": "defaultFontSize",
+                };
+            }
+
+            //refreshEditColor
+            let refreshEditColor = localStorage.getItem('refreshEditColor');
+            if (refreshEditColor !== undefined && refreshEditColor !== null) {
+                this.refreshEditColor = refreshEditColor;
+            } else {
+                this.refreshEditColor = "black";
+            }
+            let refreshEditColorLiList = document.querySelectorAll(".my_style_nav ul[data-my-style-type='refreshEditColor'] li");
+            for (let i = 0; i < refreshEditColorLiList.length; i++) {
+                let tmpLi=refreshEditColorLiList[i];
+                if (tmpLi.getAttribute("data-my-style-v") === this.refreshEditColor) {
+                    tmpLi.setAttribute("data-my-select", "true");
+                    tmpLi.setAttribute("data-my-select-v", tmpLi.parentElement.getAttribute("data-my-select-v"));
+                } else {
+                    tmpLi.removeAttribute("data-my-select");
+                }
+            }
+
+            //refreshEditBgColor
+            let refreshEditBgColor = localStorage.getItem('refreshEditBgColor');
+            if (refreshEditBgColor !== undefined && refreshEditBgColor !== null) {
+                this.refreshEditBgColor = refreshEditBgColor;
+            } else {
+                this.refreshEditBgColor = "transparent";
+            }
+            let refreshEditBgColorLiList = document.querySelectorAll(".my_style_nav ul[data-my-style-type='refreshEditBgColor'] li");
+            for (let i = 0; i < refreshEditBgColorLiList.length; i++) {
+                let tmpLi=refreshEditBgColorLiList[i];
+                if (tmpLi.getAttribute("data-my-style-v") === this.refreshEditBgColor) {
+                    tmpLi.setAttribute("data-my-select", "true");
+                    tmpLi.setAttribute("data-my-select-v", tmpLi.parentElement.getAttribute("data-my-select-v"));
+                } else {
+                    tmpLi.removeAttribute("data-my-select");
+                }
+            }
+
             this.usn = "syjSyj";
             this.docType = 0;
 

static/js/common/utils.js

@@ -163,9 +163,38 @@ define(function (require, exports, module) {
          * @constructor
          */
         GetText(element) {
+            if (element === null || element === undefined) {
+                return null
+            }
             //textContent 性能 准确性更好
             return element.textContent || element.innerText;
+        },
+
+        GetDpr() {
+            //获取屏幕像素密度
+            let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值
+            if (!dpr) {
+                //devicePixelRatio这个属性是可以获取到设备的dpr
+                let devicePixelRatio = window?.devicePixelRatio;
+                //判断dpr是否为整数
+                let isRegularDpr = devicePixelRatio.toString().match(/^[1-9]\d*$/g)
+                if (isRegularDpr) {
+                    // 对于是整数的dpr，对dpr进行操作
+                    if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
+                        dpr = 3;
+                    } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
+                        dpr = 2;
+                    } else {
+                        dpr = 1;
+                    }
+                } else {
+                    // 其他设备下，仍旧使用1倍的方案
+                    dpr = 1;
+                }
+            }
+            return dpr;
         }
 
+
     }
 });

static/js/event/MyEventListener.js

@@ -54,6 +54,12 @@ define(function (require, exports, module) {
             document.getElementById("yxl_note").addEventListener('compositionend',
                 this.CompositionendListener);
 
+            // 注册光标移动事件
+            // document.getElementById("yxl_note").addEventListener('selectionchange', function (e) {
+            //     console.log("注册光标移动事件", window.Selection)
+            // }, false);
+
+
             //这里监听鼠标按下事件
             document.getElementById("_style_utils").addEventListener("mousedown", this.Mousedown, false);
 
@@ -68,17 +74,29 @@ 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)
+
+            //::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);
+                }
+            }
+
+            //监听下拉事件
+            let dropStyleList = document.querySelectorAll(".my_style_nav ul");
+            for (let i = 0; i < dropStyleList.length; i++) {
+                dropStyleList[i].addEventListener("click", this.DropDownStyleSelectListener, false);
+            }
         }
 
-        AdjustMyFontSize(e) {
-            const handle = require('./impl/AdjustMyFontSizeEventImpl');
-            handle.handle(e);
+        DropDownStyleSelectListener(e) {
+            require('./impl/DropDownStyleSelectEventImpl').handle(e);
         }
 
+
         Mousedown(e) {
             const handle = require('./impl/MouseDownEventImpl');
             handle.handle(e);
@@ -95,6 +113,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
@@ -150,7 +178,7 @@ define(function (require, exports, module) {
          * @constructor
          */
         RSizeListener(e) {
-            console.log("RSizeListener : ", e);
+            // console.log("RSizeListener : ", e);
             let handle = require("./impl/RSizeEventImpl");
             handle.handle(e);
         }

static/js/event/impl/AdjustMyFontSizeEventImpl.js

@@ -1,34 +0,0 @@
-"use strict";
-/**
- * 使用样式事件
- */
-define(function (require, exports, module) {
-
-    function handle(e) {
-        const ctx = require("../../common/ctx");
-        const utils = require("../../common/utils");
-
-        let event = utils.ParseEvent(e);
-        let curEl = utils.GetEventTarget(event);
-        let curId = curEl.getAttribute("id");
-        if (curId === "my_fontSize0") {
-            localStorage.clear();
-            location.reload();
-            return
-        } else if (curId === "my_fontSize+") {
-            ctx.editFrontSize++;
-        } else {
-            ctx.editFrontSize--;
-        }
-
-        //触发resize
-        let resizeImp = require("./RSizeEventImpl");
-        resizeImp.refreshEditFrontSize();
-
-        //保存在本地
-        localStorage.setItem('editFrontSize', ctx.editFrontSize);
-    }
-
-    //导出
-    exports.handle = handle;
-});

static/js/event/impl/BeforeStyleEventImpl.js

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

static/js/event/impl/DelEventImpl.js

@@ -6,6 +6,23 @@
 define(function (require, exports, module) {
 
     function handle(event) {
+        const ctx = require("../../common/ctx");
+        const utils = require("../../common/utils");
+        let target = utils.GetEventTarget(event);
+        // console.log("删除元素是 ", target);
+
+        //禁止删除最后一行
+        let allPList = target.querySelectorAll("p");
+        if (allPList.length === 1) {
+            let lastOneSpan = allPList[0].querySelector("span[data-flag='span_content']")
+            let lastOneSpanTxt = utils.GetText(lastOneSpan);
+            if (lastOneSpanTxt === "\n") {
+                utils.ProhibitDefaultEvent(event);
+            }
+        }
+    }
+
+    function handle2(event) {
         const ctx = require("../../common/ctx");
         const utils = require("../../common/utils");
         const MyRecovery = require("../../common/MyRecovery");
@@ -50,7 +67,7 @@ define(function (require, exports, module) {
         let curS = utils.GetSelection();
         // console.log("当前内容: ", curP.innerHTML, " 当前选区 ：", curS)
         //处理前面没有内容，后面还有内容需要拼接到上层的场景
-        if ((curS.isCollapsed && curS.anchorOffset === 0) || curP.innerHTML === '<br>') {
+        if ((curS.isCollapsed && curS.anchorOffset === 0) || curP.innerHTML === '&nbsp;') {
             let curNodeRetainHtml = curP.innerHTML
             //阻止事件传递
             utils.ProhibitDefaultEvent(event);
@@ -66,7 +83,7 @@ define(function (require, exports, module) {
             }
             emptyRowNoList.push(cNo);
             //拼接
-            if (curNodeRetainHtml !== '<br>') {
+            if (curNodeRetainHtml !== '&nbsp;') {
                 previousSibling.innerHTML = previousSibling.innerHTML + curNodeRetainHtml
             }
 

static/js/event/impl/DropDownStyleSelectEventImpl.js

@@ -0,0 +1,156 @@
+"use strict";
+/**
+ * 拷贝事件
+ */
+define(function (require, exports, module) {
+
+    function handle(e) {
+        const utils = require("../../common/utils");
+        let event = utils.ParseEvent(e);
+        let target = utils.GetEventTarget(event);
+        console.log("target: ", target, target.tagName)
+        if (target.tagName === "SPAN") {
+            target = target.parentElement;
+            console.log("cur_target: ", target, target.tagName)
+        }
+        if (target.tagName === "LI") {
+            let curLi = target;
+            //处理 下拉选择/取消选择
+            let myParent = curLi.parentElement;
+            let dataMySelectV = myParent.getAttribute("data-my-select-v");
+            let liList = myParent.querySelectorAll("li");
+            for (let i = 0; i < liList.length; i++) {
+                let tmpLi = liList[i];
+                if (tmpLi.textContent === curLi.textContent) {
+                    tmpLi.setAttribute("data-my-select", "true");
+                    tmpLi.setAttribute("data-my-select-v", dataMySelectV);
+                    tmpLi.style.setProperty("background-color", "#f0f0f0");
+                    continue;
+                }
+
+                tmpLi.setAttribute("data-my-select", "false");
+                tmpLi.removeAttribute("data-my-select-v");
+                tmpLi.style.removeProperty("background-color");
+            }
+
+
+            //refreshPFontSize ; refreshEditFrontSize ; refreshEditColor ; refreshEditBgColor; other
+            let dataMyStyleType = myParent.getAttribute("data-my-style-type");
+            switch (dataMyStyleType) {
+                case "refreshPFontSize":
+                    refreshPFontSize(target);
+                    break;
+                case "refreshEditFrontSize":
+                    refreshEditFrontSize(target);
+                    break;
+                case "refreshEditColor":
+                    refreshEditColor(target);
+                    break
+                case "refreshEditBgColor":
+                    refreshEditBgColor(target);
+                    break
+                default :
+                    console.log("暂时不支持")
+                    break
+            }
+        }
+    }
+
+    function refreshEditColor(curLi) {
+        const ctx = require("../../common/ctx");
+        const utils = require("../../common/utils");
+        let select = utils.GetSelection();
+        let curP = select.anchorNode.parentElement.closest("p");
+        let dataMySelectK = curLi.getAttribute("data-my-style-k");
+        let dataMySelectV = curLi.getAttribute("data-my-style-v");
+
+        let tSpan = curLi.parentElement.parentElement.previousElementSibling;
+        console.log("refreshEditColor ", dataMySelectK, dataMySelectV, tSpan, tSpan.getAttribute("data-v"))
+
+        tSpan.setAttribute("data-v", dataMySelectV);
+
+        //保存在本地 refreshEditColor
+        localStorage.setItem('refreshEditColor', dataMySelectV);
+    }
+
+    function refreshEditBgColor(curLi) {
+        const ctx = require("../../common/ctx");
+        const utils = require("../../common/utils");
+        let select = utils.GetSelection();
+        let curP = select.anchorNode.parentElement.closest("p");
+        let dataMySelectK = curLi.getAttribute("data-my-style-k");
+        let dataMySelectV = curLi.getAttribute("data-my-style-v");
+
+        let tSpan = curLi.parentElement.parentElement.previousElementSibling;
+        console.log("refreshEditBgColor ", dataMySelectK, dataMySelectV, tSpan, tSpan.getAttribute("data-v"))
+        tSpan.setAttribute("data-v", dataMySelectV);
+        //保存在本地 refreshEditBgColor
+        localStorage.setItem('refreshEditBgColor', dataMySelectV);
+    }
+
+    function refreshPFontSize(curLi) {
+        const ctx = require("../../common/ctx");
+        const utils = require("../../common/utils");
+        let select = utils.GetSelection();
+        let curP = select.anchorNode.parentElement.closest("p");
+        let dataMySelectK = curLi.getAttribute("data-my-style-k");
+        let dataMySelectV = curLi.getAttribute("data-my-style-v");
+
+        let kList = dataMySelectK.toString().split(",");
+        let vList = dataMySelectV.toString().split(",");
+        let total = kList.length;
+        let num = 0;
+        for (let i = 0; i < kList.length; i++) {
+            if (curP.style.getPropertyValue(kList[i]) === vList[i]) {
+                num++;
+            }
+
+            if (vList[i] === "defaultFontSize") {
+                let myEditFrontSize = document.getElementById("myEdit_main");
+                curP.style.setProperty(kList[i], myEditFrontSize.style.fontSize);
+            } else {
+                curP.style.setProperty(kList[i], vList[i]);
+            }
+
+        }
+
+        //移除
+        if (total === num) {
+            for (let j = 0; j < kList.length; j++) {
+                curP.style.removeProperty(kList[j]);
+            }
+        }
+    }
+
+    function refreshEditFrontSize(curLi) {
+        const ctx = require("../../common/ctx");
+        const utils = require("../../common/utils");
+        let curStyleV = curLi.getAttribute("data-my-style-v");
+        //设置当前的尺寸
+        ctx.editFrontSize = curStyleV;
+        let curClientW = ctx.getScreenWidth();
+        if (!curClientW) {
+            return
+        }
+        //字体尺寸 https://www.shejidaren.com/zihao-daxiao-sheji-bilv.html
+        //12～72 px 建议最大字体是48px
+        let dpr = utils.GetDpr();
+        let myEditFrontSize = document.getElementById("myEdit_main");
+        if (ctx.isTablet) {
+            myEditFrontSize.style.fontSize = ctx.editFrontSize * dpr + 'px';
+        } else {
+            myEditFrontSize.style.fontSize = ctx.editFrontSize + 'px';
+        }
+
+        console.log("refreshEditFrontSize ", curLi, curStyleV,
+            "\nctx.editFrontSize: ", ctx.editFrontSize)
+
+        //保存在本地 refreshEditFrontSize
+        localStorage.setItem('refreshEditFrontSize', ctx.editFrontSize);
+        //show
+        document.getElementById("cur_my_font_size").textContent = ctx.editFrontSize + "px"
+    }
+
+    //导出
+    exports.handle = handle;
+});

static/js/event/impl/EnterEventImpl.js

@@ -8,6 +8,13 @@ define(function (require, exports, module) {
         const utils = require('../../common/utils');
         let event = utils.ParseEvent(e);
         let curEl = utils.GetEventTarget(event);
+    }
+
+
+    function handleOld(e) {
+        const utils = require('../../common/utils');
+        let event = utils.ParseEvent(e);
+        let curEl = utils.GetEventTarget(event);
 
         utils.ProhibitDefaultEvent(event);
         let select = utils.GetSelection();

static/js/event/impl/KeyDownEventImpl.js

@@ -35,9 +35,9 @@ define(function (require, exports, module) {
 
         //在鼠标按下的时候删除，体验更好
         if (keyCode === 46 || keyCode === 8) {
-            // const delHandle = require('./DelEventImpl')
-            // delHandle.handle(e);
-            // return;
+            const delHandle = require('./DelEventImpl')
+            delHandle.handle(e);
+            return;
         }
     }
 

static/js/event/impl/MutationObserverImpl.js

@@ -26,96 +26,115 @@ define(function (require, exports, module) {
     }
 
     function other(mutation) {
-        console.log("mutation : ", mutation,
-            // 观察的变动类型（attributes、characterData或者childList）。
-            "\ntype", mutation.type,
-            //发生变动的DOM节点。
-            "\ntarget", mutation.target,
-            "\ntargetParent", mutation.target.parentElement, mutation.target.parentNode,
-            //新增的DOM节点。
-            "\naddedNodes", mutation.addedNodes,
-            //删除的DOM节点。
-            "\nremovedNodes", mutation.removedNodes,
-            //前一个同级节点，如果没有则返回null。
-            "\npreviousSibling", mutation.previousSibling,
-            //下一个同级节点，如果没有则返回null。
-            "\nnextSibling", mutation.nextSibling,
-            //发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
-            "\nattributeName", mutation.attributeName,
-            //变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。
-            "\noldValue", mutation.oldValue);
+        // console.log("other ", mutation)
+        // console.log("other -> mutation : ", mutation,
+        //     // 观察的变动类型（attributes、characterData或者childList）。
+        //     "\ntype", mutation.type,
+        //     //发生变动的DOM节点。
+        //     "\ntarget", mutation.target, mutation.target.nodeName, mutation.previousSibling,
+        //     "\ntargetParent", mutation.target.parentElement, mutation.target.parentNode,
+        //     //新增的DOM节点。
+        //     "\naddedNodes", mutation.addedNodes,
+        //     //删除的DOM节点。
+        //     "\nremovedNodes", mutation.removedNodes,
+        //     //前一个同级节点，如果没有则返回null。
+        //     "\npreviousSibling", mutation.previousSibling,
+        //     //下一个同级节点，如果没有则返回null。
+        //     "\nnextSibling", mutation.nextSibling,
+        //     //发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
+        //     "\nattributeName", mutation.attributeName,
+        //     //变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。
+        //     "\noldValue", mutation.oldValue);
     }
 
     function addNewP(mutation) {
+        let ctx = require("../../common/ctx");
+        let utils = require("../../common/utils");
         //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");
             let newParagraph = mutation.previousSibling.nextSibling;
-            console.log(
-                "addNewP target: ", target,
-                "\nnodeType: ", target.nodeType,
-                "\nnodeName: ", target.nodeName,
-                "\ndata: ", target.value,
-                "\n next: ", newParagraph,
-                "\ncurRowNo: ", ctx.getCurRowNo()
-            )
+            // console.log(
+            //     "addNewP target: ", target,
+            //     "\nnodeType: ", target.nodeType,
+            //     "\nnodeName: ", target.nodeName,
+            //     "\ndata: ", target.value,
+            //     "\n next: ", newParagraph,
+            //     "\ncurRowNo: ", ctx.getCurRowNo()
+            // )
             if (newParagraph !== undefined && newParagraph !== null) {
                 newParagraph.id = utils.Uuid(ctx.usn, ctx.docType);
-                newParagraph.setAttribute("data-order", ctx.incrementNumThenReturn());
-
-                // 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")
-                    // newParagraph.appendChild(preSpan);
-                    //添加到元素首位
-                    newParagraph.insertBefore(preSpan, newParagraph.firstChild);
-                } else {
-                    console.log("newParagraph preSpan exist ", newParagraph, " ", preSpan)
-                }
-
+                let curNo = ctx.incrementNumThenReturn();
+                newParagraph.setAttribute("data-order", curNo);
                 //内置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")
+                    if (curNo === 0) { //首行有提示
+                        spanContent.setAttribute("placeholder", "请输入内容")
+                    } else {
+                        spanContent.setAttribute("placeholder", "请输入内容")
+                        spanContent.innerHTML = " "
+                    }
+
+                    // console.dir(mutation)
+
                     newParagraph.appendChild(spanContent);
                 } else {
-                    console.log("newParagraph preSpan spanContent ", newParagraph)
+                    console.log("newParagraph spanContent exist", spanContent);
+                    spanContent.innerHTML = " "
                 }
 
+                utils.GetSelection().removeAllRanges();
                 utils.GetSelection().setPosition(spanContent, 0);
                 spanContent.focus();
             }
+
+            return
         }
 
+        //解决（flex 布局 for 无序列表 前面可以输入问题）回车不换行问题
+        // console.log(" fix ", mutation)
+        if (target.nodeName === "P"
+            && target.getAttribute("data-order") != null
+            && mutation.previousSibling !== null
+            && mutation.previousSibling.getAttribute("data-flag") === "span_content") { //
+            let utils = require("../../common/utils");
+            let flagP = target;
+            for (let i = 0; i < mutation.addedNodes.length; i++) {
+                let tmpSpan = mutation.addedNodes[i];
+                let tmpP = document.createElement("p");
+                let curNo = ctx.getCurRowNo();
+                if (curNo === 0) { //首行有提示
+                    tmpSpan.setAttribute("placeholder", "请输入内容")
+                } else {
+                    tmpSpan.textContent = "\n"
+                }
+                tmpP.appendChild(tmpSpan)
+                utils.InsertAfter(flagP, tmpP);
+                flagP = tmpP;
+            }
+            return;
+        }
+
+        other(mutation);
     }
 
     function updateText(mutation) {
         let target = mutation.target;
         if (target.nodeType === 3 && target.nodeName === "#text") {
-            let testDiv = document.getElementById("testDevice");
-            testDiv.innerText=""
-            // console.log(
-            //     "updateText target: ", target,
-            //     "\nnodeType: ", target.nodeType,
-            //     "\nnodeName: ", target.nodeName,
-            //     "\ndata: ", target.value,
-            //     "\nparentNode: ", target.parentNode,
-            //     "\nparentNode_parentNode: ", target.parentNode?.parentNode,
-            // )
+            let utils = require("../../common/utils");
+            let ctx = require("../../common/ctx");
+            //测试内容填写
+            // let testDiv = document.getElementById("testDevice");
+            // testDiv.innerText = mutation.oldValue
 
             let grandfatherElement = target.parentNode?.parentElement;
+            //处理添加了样式的 行
             if (grandfatherElement != null && grandfatherElement.getAttribute("data-flag") === "span_content") {
-                let utils = require("../../common/utils");
-                let ctx = require("../../common/ctx");
                 //正在输入中文直接忽略
                 if (ctx.Compositionstart) {
                     return;
@@ -129,12 +148,12 @@ define(function (require, exports, module) {
                     if (curTxt.trim().length <= 1) {
                         return
                     }
-                    console.dir(select)
-                    console.dir(mutation)
-                    console.dir(grandfatherElement)
-                    console.dir(tmpSpan)
-                    console.log(tmpSpan)
-                    console.log(curTxt.split(''))
+                    // console.dir(select)
+                    // console.dir(mutation)
+                    // console.dir(grandfatherElement)
+                    // console.dir(tmpSpan)
+                    // console.log(tmpSpan)
+                    // console.log(curTxt.split(''))
                     let curTxtArr = curTxt.split('');
                     //保留一个
                     tmpSpan.innerText = curTxtArr[0];
@@ -146,14 +165,34 @@ define(function (require, exports, module) {
                         lastSpan = tmpSpan;
                     }
                     //选区调整
-                    console.log("lastSpan : ", lastSpan)
+                    // console.log("lastSpan : ", lastSpan)
                     utils.GetSelection().setPosition(lastSpan, 1);
                 } else {
                     console.log("TODO 暂时不支持")
                 }
-            } else {
+            } else { // 处理没有添加样式的行
                 console.log("TODO 暂时不支持")
             }
+
+
+            //处理无序列表和有序列表 探究
+            if (target.parentNode === undefined || target.parentNode?.parentElement === undefined) {
+                return;
+            }
+            // console.log(
+            //     "updateText mutation: ", mutation,
+            //     "\ntarget: ", target,
+            //     "\nnodeType: ", target.nodeType,
+            //     "\nnodeName: ", target.nodeName,
+            //     "\ndata: ", target.value,
+            //     "\noldValue: ", target.oldValue, target.oldValue?.startsWith("- "),
+            //     "\nparentNode: ", target.parentNode, target.parentElement,
+            //     "\nparentNode_parentNode: ", target.parentNode?.parentElement,
+            // )
+            let curP = target.parentElement?.closest("p");
+            let curSpanContent = curP.querySelector("span[data-flag='span_content']")
+            // console.log("curSpanContent: ", curSpanContent)
+
         } else {
             other(mutation);
         }

static/js/event/impl/RSizeEventImpl.js

@@ -24,6 +24,7 @@ define(function (require, exports, module) {
      */
     function refreshRootFrontSize() {
         const ctx = require("../../common/ctx");
+        const utils = require("../../common/utils");
         let designWidth = ctx.designWith;
         let curDoc = document.documentElement;//当前文档的 root 元素
         let curClientW = ctx.getScreenWidth();
@@ -31,8 +32,14 @@ define(function (require, exports, module) {
             curClientW = designWidth;
         }
 
+        //纸张
+        if (curClientW >= designWidth) {
+            ctx.MyRoot().style.width = designWidth + "px";
+        } else {
+            ctx.MyRoot().style.width = "100%";
+        }
 
-        let dpr = getDpr();
+        let dpr = utils.GetDpr();
         //set 1rem = curClientW / designWidth (支持响应式)
         let nowFrontSize = '1px';
         if (ctx.isTablet || ctx.isMobile || ctx.isIOS || ctx.isAndroid) {
@@ -41,16 +48,27 @@ define(function (require, exports, module) {
             nowFrontSize = (curClientW / designWidth) + 'px';
         }
 
+        console.log(
+            "\nuserAgent: ", window.navigator.userAgent,
+            "\nisTablet: ", ctx.isTablet,
+            "\nisMobile: ", ctx.isMobile,
+            "\nisIOS: ", ctx.isIOS,
+            "\nisAndroid: ", ctx.isAndroid,
+            "\nwindow.innerWidth: ", window.innerWidth,
+            "\ngetScreenWidth: ", ctx.getScreenWidth(),
+            "curClientW : ", curClientW,
+            "\ndesignWidth: ", designWidth,
+            "\n1rem =  ", nowFrontSize,
+            "\nnowFrontSize: ", nowFrontSize);
         // curDoc.style.fontSize = dpr * nowFrontSize;
-        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;
+        curDoc.style.fontSize = 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;
         // testDiv.innerText = testDiv.innerText +
         //     // "\n navigator_userAgent :" + navigator.userAgent.toLocaleLowerCase() +
         //     "\n isMobile :" + /mobi|android|iphone|ipad|ipod/i.test(navigator.userAgent.toLocaleLowerCase()) +
@@ -63,33 +81,10 @@ define(function (require, exports, module) {
 
     }
 
-    function getDpr() {
-        //获取屏幕像素密度
-        let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值
-        if (!dpr) {
-            //devicePixelRatio这个属性是可以获取到设备的dpr
-            let devicePixelRatio = window?.devicePixelRatio;
-            //判断dpr是否为整数
-            let isRegularDpr = devicePixelRatio.toString().match(/^[1-9]\d*$/g)
-            if (isRegularDpr) {
-                // 对于是整数的dpr，对dpr进行操作
-                if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
-                    dpr = 3;
-                } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
-                    dpr = 2;
-                } else {
-                    dpr = 1;
-                }
-            } else {
-                // 其他设备下，仍旧使用1倍的方案
-                dpr = 1;
-            }
-        }
-        return dpr;
-    }
 
     function refreshEditFrontSize() {
         const ctx = require("../../common/ctx");
+        const utils = require("../../common/utils");
         let curClientW = ctx.getScreenWidth();
         if (!curClientW) {
             return
@@ -97,7 +92,7 @@ define(function (require, exports, module) {
         //字体尺寸 https://www.shejidaren.com/zihao-daxiao-sheji-bilv.html
         //12～72 px 建议最大字体是48px
 
-        let dpr = getDpr();
+        let dpr = utils.GetDpr();
 
         let myEditFrontSize = document.getElementById("myEdit_main");
         if (ctx.isTablet) {
@@ -106,9 +101,20 @@ 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
+        let curMyFontSizeEl = document.getElementById("cur_my_font_size");
+        curMyFontSizeEl.textContent = ctx.editFrontSize + "px";
+        //更新默认值
+        let liList = curMyFontSizeEl.parentElement.nextElementSibling.querySelectorAll("ul li");
+        for (let i = 0; i < liList.length; i++) {
+            let tmpLi = liList[i];
+            if (tmpLi.getAttribute("data-my-style-v") === ctx.editFrontSize) {
+                tmpLi.setAttribute("data-my-select", "true");
+                tmpLi.setAttribute("data-my-select-v", tmpLi.parentElement.getAttribute("data-my-select-v"));
+            } else {
+                tmpLi.removeAttribute("data-my-select");
+            }
+        }
     }
 
 

static/js/index.js

@@ -1,5 +1,14 @@
 "use strict";
 define(function (require) {
+    const isDebug = false;  // 控制是否屏蔽全局console.log 日志；isDebug设为false即可屏蔽
+    console.log = (function (oldLogFunc) {
+        return function () {
+            if (isDebug) {
+                oldLogFunc.apply(this, arguments);
+            }
+        }
+    })(console.log);
+
     const ctx = require('./common/ctx');
     const eventListener = require('./event/MyEventListener')
     const utils = require('./common/utils')

static/tmp

@@ -0,0 +1,52 @@
+mongosharda5d4b580165es02.mongodb.ivolces.com
+mongosharda5d4b580165es12.mongodb.ivolces.com
+mongosharda5d4b580165es22.mongodb.ivolces.com
+mongosharda5d4b580165es32.mongodb.ivolces.com
+mongosharda5d4b580165es42.mongodb.ivolces.com
+mongosharda5d4b580165es52.mongodb.ivolces.com
+
+# hidden 节点
+mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es02.mongodb.ivolces.com:3717/?authSource=admin
+
+mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es12.mongodb.ivolces.com:3717/?authSource=admin
+
+mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es22.mongodb.ivolces.com:3717/?authSource=admin
+
+mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es32.mongodb.ivolces.com:3717/?authSource=admin
+
+mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es42.mongodb.ivolces.com:3717/?authSource=admin
+
+mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es52.mongodb.ivolces.com:3717/?authSource=admin
+
+# 从节点
+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
+mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es40.mongodb.ivolces.com:3717/?authSource=admin
+mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es50.mongodb.ivolces.com:3717/?authSource=admin
+
+# 主节点
+mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es01.mongodb.ivolces.com:3717/?authSource=admin
+
+mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es11.mongodb.ivolces.com:3717/?authSource=admin
+
+mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es21.mongodb.ivolces.com:3717/?authSource=admin
+
+mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es31.mongodb.ivolces.com:3717/?authSource=admin
+
+mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es41.mongodb.ivolces.com:3717/?authSource=admin
+
+mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es51.mongodb.ivolces.com:3717/?authSource=admin
+
+# 执行命令
+use mubu_document
+
+db.runCommand( { compact: "hash_tag" } )
+db.runCommand( { compact: "at_tag" } )
+db.runCommand( { compact: "docs" } ,{ background: true } )
+
+db.runCommand( { compact: "nodes" } ,{ background: true } )
+
+

static/yanxuelu.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="font-size: 1.5px">
 
 <head>
     <!-- https://quilljs.com/docs/customization/registries -->
@@ -7,11 +7,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>📒</title>
     <meta name="viewport"
-          content="width=device-width, height=device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+        content="width=device-width, height=device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
     <!--          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">-->
     <link rel="stylesheet" type="text/css" href="./css/normalize.css">
     <link rel="stylesheet" type="text/css" href="./css/myEdit.css">
-    <script src="./js/lib/sea.js"></script>
+    <link rel="stylesheet" type="text/css" href="./css/my_drop.css">
+    <!--    <script src="./js/lib/sea.js"></script>-->
+    <script src="https://www.mylomen.com/js/lib/sea.js"></script>
     <script>
         seajs.config({
             // base:'path',
@@ -31,182 +33,270 @@
 
 <body>
 
-<header>
-    <!--  顶部  -->
-    <div id="head_top" style="font-size: 12px">
-        <div style="width:10%">测试</div>
-        <div style="width: 60%"></div>
-        <div style="width:30%">
-            <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>
+    <header>
+        <div class="fixStylePosition" id="_style_utils">
+            <div class="fixStyleOut">
+
+                <!--       字体        -->
+                <div style="display: flex;">
+                    <span>
                         <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
-                             xmlns="http://www.w3.org/2000/svg" data-icon="TextOutlined">
+                            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>
+                                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>
-                        <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
-                             xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
-                            <path
+                    </span>
+                    <div class="my_style_nav">
+                        <span>
+                            <svg width="8rem" height="8rem" 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>
+                            </svg>
+                        </span>
+                        <ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshPFontSize">
+                            <li data-my-select="true" data-my-select-v="✔" data-my-style-k="font-weight,font-size"
+                                data-my-style-v="normal,defaultFontSize"><span>正文</span>
+                            </li>
+                            <li data-my-style-k="font-weight,font-size" data-my-style-v="500,24px"><span>H1</span></li>
+                            <li data-my-style-k="font-weight,font-size" data-my-style-v="500,20px"><span>H2</span></li>
+                            <li data-my-style-k="font-weight,font-size" data-my-style-v="500,18px"><span>H3</span></li>
+                            <li data-my-style-k="font-weight,font-size" data-my-style-v="500,16px"><span>H4</span></li>
+                            <li data-my-style-k="font-weight,font-size" data-my-style-v="500,14px"><span>H5</span></li>
+                            <li data-my-style-k="font-weight,font-size" data-my-style-v="500,12px"><span>H6</span></li>
+                        </ul>
                     </div>
                 </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>
-                    </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>
-                    </svg>
-                </div>
-            </div>
 
-            <div class="my-divider-item"></div>
-            <div style="display: flex;">
+                <div class="my-divider-item"></div>
+
+                <div style="display: flex;">
+                    <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>
+                    </span>
+                </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>
+                    </span>
+                </div>
+
+                <div class="my-divider-item"></div>
+                <div style="display: flex;">
                     <span class="fixStyleInnerSpan" data-k="font-weight" data-v="bold">
                         <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
-                             xmlns="http://www.w3.org/2000/svg" data-icon="BoldOutlined">
+                            xmlns="http://www.w3.org/2000/svg" data-icon="BoldOutlined">
                             <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>
+                                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-k="text-decoration" data-v="line-through">
+                    <span class="fixStyleInnerSpan" data-k="text-decoration" data-v="line-through">
                         <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
-                             xmlns="http://www.w3.org/2000/svg" data-icon="HorizontalLineOutlined">
+                            xmlns="http://www.w3.org/2000/svg" data-icon="HorizontalLineOutlined">
                             <path
-                                    d="M5.49 7.226A5.107 5.107 0 0 1 6.9 3.831C8.017 2.636 9.718 2 11.819 2c2.142 0 3.779.57 4.867 1.689.4.392.869.958 1.26 1.595.443.723-.191 1.53-1.04 1.53-.606 0-1.039-.447-1.326-.981a2.864 2.864 0 0 0-.362-.517c-.735-.93-1.909-1.419-3.386-1.419-2.404 0-4.154 1.395-4.2 3.393-.02.846.337 1.58.995 2.043h-2.75c-.271-.621-.403-1.332-.385-2.107Zm8.906 6.024H4.038c-.518 0-.938-.38-.938-.897 0-.518.42-.978.938-.978h16.125c.518 0 .937.437.937.954 0 .518-.42.921-.937.921h-2.455c.542.806.96 1.954.934 3.055C18.563 19.82 15.87 22 11.572 22c-2.875 0-5.028-.964-6.13-2.745a6.884 6.884 0 0 1-.545-1.191c-.261-.72.318-1.432 1.084-1.432.574 0 1.034.416 1.24.952.17.445.4.794.733 1.142.805.858 2.104 1.305 3.766 1.305 2.845 0 4.696-1.39 4.747-3.61.024-1.072-.256-1.61-.897-2.42-.473-.598-1.174-.751-1.174-.751Z"
-                                    fill="currentColor"></path>
+                                d="M5.49 7.226A5.107 5.107 0 0 1 6.9 3.831C8.017 2.636 9.718 2 11.819 2c2.142 0 3.779.57 4.867 1.689.4.392.869.958 1.26 1.595.443.723-.191 1.53-1.04 1.53-.606 0-1.039-.447-1.326-.981a2.864 2.864 0 0 0-.362-.517c-.735-.93-1.909-1.419-3.386-1.419-2.404 0-4.154 1.395-4.2 3.393-.02.846.337 1.58.995 2.043h-2.75c-.271-.621-.403-1.332-.385-2.107Zm8.906 6.024H4.038c-.518 0-.938-.38-.938-.897 0-.518.42-.978.938-.978h16.125c.518 0 .937.437.937.954 0 .518-.42.921-.937.921h-2.455c.542.806.96 1.954.934 3.055C18.563 19.82 15.87 22 11.572 22c-2.875 0-5.028-.964-6.13-2.745a6.884 6.884 0 0 1-.545-1.191c-.261-.72.318-1.432 1.084-1.432.574 0 1.034.416 1.24.952.17.445.4.794.733 1.142.805.858 2.104 1.305 3.766 1.305 2.845 0 4.696-1.39 4.747-3.61.024-1.072-.256-1.61-.897-2.42-.473-.598-1.174-.751-1.174-.751Z"
+                                fill="currentColor"></path>
                         </svg>
                     </span>
-                <span class="fixStyleInnerSpan" data-k="font-style" data-v="italic">
+                    <span class="fixStyleInnerSpan" data-k="font-style" data-v="italic">
                         <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
-                             xmlns="http://www.w3.org/2000/svg" data-icon="ItalicOutlined">
+                            xmlns="http://www.w3.org/2000/svg" data-icon="ItalicOutlined">
                             <path
-                                    d="M14.825 5.077 11.19 18.923h4.052a1.038 1.038 0 1 1 0 2.077H4.954a1.038 1.038 0 1 1 0-2.077h4.053l3.636-13.846H8.591A1.038 1.038 0 1 1 8.59 3h10.287a1.038 1.038 0 0 1 0 2.077h-4.053Z"
-                                    fill="currentColor"></path>
+                                d="M14.825 5.077 11.19 18.923h4.052a1.038 1.038 0 1 1 0 2.077H4.954a1.038 1.038 0 1 1 0-2.077h4.053l3.636-13.846H8.591A1.038 1.038 0 1 1 8.59 3h10.287a1.038 1.038 0 0 1 0 2.077h-4.053Z"
+                                fill="currentColor"></path>
                         </svg>
                     </span>
-                <span class="fixStyleInnerSpan" data-k="text-decoration,text-underline-offset"
-                      data-v="underline,30rem">
+                    <span class="fixStyleInnerSpan" data-k="text-decoration,text-underline-offset"
+                        data-v="underline,30rem">
                         <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
-                             xmlns="http://www.w3.org/2000/svg" data-icon="UnderlineOutlined">
+                            xmlns="http://www.w3.org/2000/svg" data-icon="UnderlineOutlined">
                             <path
-                                    d="M7.361 3.052a.99.99 0 0 0-.989-.994.998.998 0 0 0-.999.994v5.765c0 4.205 2.601 7.29 6.627 7.29s6.627-3.085 6.627-7.29V3.052a.996.996 0 0 0-.996-.994.992.992 0 0 0-.992.994v5.765c0 3.003-1.763 5.302-4.639 5.302-2.876 0-4.639-2.299-4.639-5.302V3.052ZM3.054 19.42a.988.988 0 0 0-.994.988 1 1 0 0 0 .994 1h17.892a1 1 0 0 0 .994-1.002.987.987 0 0 0-.994-.986H3.054Z"
-                                    fill="currentColor"></path>
+                                d="M7.361 3.052a.99.99 0 0 0-.989-.994.998.998 0 0 0-.999.994v5.765c0 4.205 2.601 7.29 6.627 7.29s6.627-3.085 6.627-7.29V3.052a.996.996 0 0 0-.996-.994.992.992 0 0 0-.992.994v5.765c0 3.003-1.763 5.302-4.639 5.302-2.876 0-4.639-2.299-4.639-5.302V3.052ZM3.054 19.42a.988.988 0 0 0-.994.988 1 1 0 0 0 .994 1h17.892a1 1 0 0 0 .994-1.002.987.987 0 0 0-.994-.986H3.054Z"
+                                fill="currentColor"></path>
                         </svg>
                     </span>
-            </div>
+                </div>
 
-            <div class="my-divider-item"></div>
-            <div>
+                <div class="my-divider-item"></div>
+
+                <div style="display: flex; ">
                     <span class="fixStyleInnerSpan" data-k="color" data-v="blue">
                         <svg width="10rem" height="10rem" viewBox="0 0 240 240" version="1.1"
-                             xmlns="http://www.w3.org/2000/svg">
+                            xmlns="http://www.w3.org/2000/svg">
                             <g id="icon/字体颜色" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                 <g transform="translate(0.000000, 0.500000)">
                                     <g transform="translate(39.000000, 17.353553)">
                                         <path
-                                                d="M11,201.146447 L167,201.146447 C173.075132,201.146447 178,206.071314 178,212.146447 C178,218.221579 173.075132,223.146447 167,223.146447 L11,223.146447 C4.92486775,223.146447 7.43989126e-16,218.221579 0,212.146447 C-7.43989126e-16,206.071314 4.92486775,201.146447 11,201.146447 Z"
-                                                id="矩形" fill="#DF2A3F" fill-rule="evenodd"></path>
+                                            d="M11,201.146447 L167,201.146447 C173.075132,201.146447 178,206.071314 178,212.146447 C178,218.221579 173.075132,223.146447 167,223.146447 L11,223.146447 C4.92486775,223.146447 7.43989126e-16,218.221579 0,212.146447 C-7.43989126e-16,206.071314 4.92486775,201.146447 11,201.146447 Z"
+                                            id="矩形" fill="#DF2A3F" fill-rule="evenodd"></path>
                                         <path
-                                                d="M72.3425855,16.8295583 C75.799482,7.50883712 86.1577877,2.75526801 95.4785089,6.21216449 C100.284516,7.99463061 104.096358,11.7387855 105.968745,16.4968188 L106.112518,16.8745422 L159.385152,161.694068 C161.291848,166.877345 158.635655,172.624903 153.452378,174.531599 C148.358469,176.405421 142.719567,173.872338 140.716873,168.864661 L140.614848,168.598825 L89.211,28.86 L37.3759214,168.623816 C35.4885354,173.712715 29.8981043,176.351047 24.7909589,174.617647 L24.5226307,174.522368 C19.4337312,172.634982 16.7953993,167.044551 18.5287999,161.937406 L18.6240786,161.669077 L72.3425855,16.8295583 Z"
-                                                id="路径-21" fill="currentColor" fill-rule="nonzero"></path>
+                                            d="M72.3425855,16.8295583 C75.799482,7.50883712 86.1577877,2.75526801 95.4785089,6.21216449 C100.284516,7.99463061 104.096358,11.7387855 105.968745,16.4968188 L106.112518,16.8745422 L159.385152,161.694068 C161.291848,166.877345 158.635655,172.624903 153.452378,174.531599 C148.358469,176.405421 142.719567,173.872338 140.716873,168.864661 L140.614848,168.598825 L89.211,28.86 L37.3759214,168.623816 C35.4885354,173.712715 29.8981043,176.351047 24.7909589,174.617647 L24.5226307,174.522368 C19.4337312,172.634982 16.7953993,167.044551 18.5287999,161.937406 L18.6240786,161.669077 L72.3425855,16.8295583 Z"
+                                            id="路径-21" fill="currentColor" fill-rule="nonzero"></path>
                                         <path
-                                                d="M121,103.146447 C126.522847,103.146447 131,107.623599 131,113.146447 C131,118.575687 126.673329,122.994378 121.279905,123.142605 L121,123.146447 L55,123.146447 C49.4771525,123.146447 45,118.669294 45,113.146447 C45,107.717207 49.3266708,103.298515 54.7200952,103.150288 L55,103.146447 L121,103.146447 Z"
-                                                id="路径-22" fill="currentColor" fill-rule="nonzero"></path>
+                                            d="M121,103.146447 C126.522847,103.146447 131,107.623599 131,113.146447 C131,118.575687 126.673329,122.994378 121.279905,123.142605 L121,123.146447 L55,123.146447 C49.4771525,123.146447 45,118.669294 45,113.146447 C45,107.717207 49.3266708,103.298515 54.7200952,103.150288 L55,103.146447 L121,103.146447 Z"
+                                            id="路径-22" fill="currentColor" fill-rule="nonzero"></path>
                                     </g>
                                 </g>
                             </g>
                         </svg>
                     </span>
-                <span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
+
+                    <span class="my_style_nav">
+                        <span>
+                            <svg width="8rem" height="8rem" 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>
+                        <ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshEditColor">
+                            <li data-my-style-k="color" data-my-style-v="black"><span style="color: black">黑色</span>
+                            </li>
+                            <li data-my-style-k="color" data-my-style-v="red"><span style="color: red">红色</span></li>
+                            <li data-my-style-k="color" data-my-style-v="#edce02"><span style="color: #edce02">黄色</span>
+                            </li>
+                            <li data-my-style-k="color" data-my-style-v="blue"><span style="color: blue">蓝色</span></li>
+                            <li data-my-style-k="color" data-my-style-v="gray"><span style="color: gray">灰色</span></li>
+                        </ul>
+                    </span>
+                </div>
+
+                <div style="display: flex;">
+                    <span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
                         <svg width="10rem" height="10rem" viewBox="0 0 256 256" version="1.1"
-                             xmlns="http://www.w3.org/2000/svg">
+                            xmlns="http://www.w3.org/2000/svg">
                             <g id="icon/填充色" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                 <g id="icon/背景颜色">
                                     <g id="编组" fill="currentColor">
                                         <g transform="translate(119.502295, 137.878331) rotate(-135.000000) translate(-119.502295, -137.878331) translate(48.002295, 31.757731)"
-                                           id="矩形">
+                                            id="矩形">
                                             <path
-                                                    d="M100.946943,60.8084699 L43.7469427,60.8084699 C37.2852111,60.8084699 32.0469427,66.0467383 32.0469427,72.5084699 L32.0469427,118.70847 C32.0469427,125.170201 37.2852111,130.40847 43.7469427,130.40847 L100.946943,130.40847 C107.408674,130.40847 112.646943,125.170201 112.646943,118.70847 L112.646943,72.5084699 C112.646943,66.0467383 107.408674,60.8084699 100.946943,60.8084699 Z M93.646,79.808 L93.646,111.408 L51.046,111.408 L51.046,79.808 L93.646,79.808 Z"
-                                                    fill-rule="nonzero"></path>
+                                                d="M100.946943,60.8084699 L43.7469427,60.8084699 C37.2852111,60.8084699 32.0469427,66.0467383 32.0469427,72.5084699 L32.0469427,118.70847 C32.0469427,125.170201 37.2852111,130.40847 43.7469427,130.40847 L100.946943,130.40847 C107.408674,130.40847 112.646943,125.170201 112.646943,118.70847 L112.646943,72.5084699 C112.646943,66.0467383 107.408674,60.8084699 100.946943,60.8084699 Z M93.646,79.808 L93.646,111.408 L51.046,111.408 L51.046,79.808 L93.646,79.808 Z"
+                                                fill-rule="nonzero"></path>
                                             <path
-                                                    d="M87.9366521,16.90916 L87.9194966,68.2000001 C87.9183543,69.4147389 86.9334998,70.399264 85.7187607,70.4 L56.9423078,70.4 C55.7272813,70.4 54.7423078,69.4150264 54.7423078,68.2 L54.7423078,39.4621057 C54.7423078,37.2523513 55.5736632,35.1234748 57.0711706,33.4985176 L76.4832996,12.4342613 C78.9534987,9.75382857 83.1289108,9.5834005 85.8093436,12.0535996 C87.1658473,13.303709 87.9372691,15.0644715 87.9366521,16.90916 Z"
-                                                    fill-rule="evenodd"></path>
+                                                d="M87.9366521,16.90916 L87.9194966,68.2000001 C87.9183543,69.4147389 86.9334998,70.399264 85.7187607,70.4 L56.9423078,70.4 C55.7272813,70.4 54.7423078,69.4150264 54.7423078,68.2 L54.7423078,39.4621057 C54.7423078,37.2523513 55.5736632,35.1234748 57.0711706,33.4985176 L76.4832996,12.4342613 C78.9534987,9.75382857 83.1289108,9.5834005 85.8093436,12.0535996 C87.1658473,13.303709 87.9372691,15.0644715 87.9366521,16.90916 Z"
+                                                fill-rule="evenodd"></path>
                                             <path
-                                                    d="M131.3,111.241199 L11.7,111.241199 C5.23826843,111.241199 0,116.479467 0,122.941199 L0,200.541199 C0,207.002931 5.23826843,212.241199 11.7,212.241199 L131.3,212.241199 C137.761732,212.241199 143,207.002931 143,200.541199 L143,122.941199 C143,116.479467 137.761732,111.241199 131.3,111.241199 Z M124,130.241 L124,193.241 L19,193.241 L19,130.241 L124,130.241 Z"
-                                                    fill-rule="nonzero"></path>
+                                                d="M131.3,111.241199 L11.7,111.241199 C5.23826843,111.241199 0,116.479467 0,122.941199 L0,200.541199 C0,207.002931 5.23826843,212.241199 11.7,212.241199 L131.3,212.241199 C137.761732,212.241199 143,207.002931 143,200.541199 L143,122.941199 C143,116.479467 137.761732,111.241199 131.3,111.241199 Z M124,130.241 L124,193.241 L19,193.241 L19,130.241 L124,130.241 Z"
+                                                fill-rule="nonzero"></path>
                                         </g>
                                     </g>
                                     <path
-                                            d="M51,218 L205,218 C211.075132,218 216,222.924868 216,229 C216,235.075132 211.075132,240 205,240 L51,240 C44.9248678,240 40,235.075132 40,229 C40,222.924868 44.9248678,218 51,218 Z"
-                                            id="矩形" fill="#FBDE28"></path>
+                                        d="M51,218 L205,218 C211.075132,218 216,222.924868 216,229 C216,235.075132 211.075132,240 205,240 L51,240 C44.9248678,240 40,235.075132 40,229 C40,222.924868 44.9248678,218 51,218 Z"
+                                        id="矩形" fill="#FBDE28"></path>
                                 </g>
                             </g>
                         </svg>
                     </span>
-            </div>
-            <div class="my-divider-item"></div>
-            <div>
+
+                    <span class="my_style_nav">
+                        <span>
+                            <svg width="8rem" height="8rem" 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>
+                        <ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshEditBgColor">
+                            <li data-my-style-k="background-color" data-my-style-v="transparent">
+                                <span>空白</span>
+                            </li>
+                            <li data-my-style-k="background-color" data-my-style-v="lightcoral"><span
+                                    style="color: lightcoral">浅红</span></li>
+                            <li data-my-style-k="background-color" data-my-style-v="#fff897"><span
+                                    style="color: #fff897">浅黄</span>
+                            </li>
+                            <li data-my-style-k="background-color" data-my-style-v="lightblue"><span
+                                    style="color: lightblue">浅蓝</span></li>
+                        </ul>
+                    </span>
+                </div>
+
+                <div class="my-divider-item"></div>
+                <div style="display: flex;margin: 0 0;line-height: 1; ">
+                    <span>
+                        <span id="cur_my_font_size" style="font-size: 14px">14px</span>
+                    </span>
+
+                    <div class="my_style_nav">
+                        <span>
+                            <svg width="8rem" height="8rem" 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>
+
+                        <ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshEditFrontSize">
+                            <li data-my-style-k="font-size" data-my-style-v="12"><span>12px</span></li>
+                            <li data-my-style-k="font-size" data-my-style-v="14"><span>14px</span></li>
+                            <li data-my-style-k="font-size" data-my-style-v="16"><span>16px</span></li>
+                            <li data-my-style-k="font-size" data-my-style-v="18"><span>18px</span></li>
+                            <li data-my-style-k="font-size" data-my-style-v="20"><span>21px</span></li>
+                            <li data-my-style-k="font-size" data-my-style-v="24"><span>24px</span></li>
+                            <li data-my-style-k="font-size" data-my-style-v="36"><span>36px</span></li>
+                            <li data-my-style-k="font-size" data-my-style-v="48"><span>48px</span></li>
+                            <li data-my-style-k="font-size" data-my-style-v="60"><span>60px</span></li>
+                            <li data-my-style-k="font-size" data-my-style-v="72"><span>72px</span></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div>
                     <span>
                         <svg width="10rem" height="10rem" viewBox="0 0 18 18" fill="none"
-                             xmlns="http://www.w3.org/2000/svg">
+                            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>
+                                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>
+                        <!--                        <ul class="menu fllil" data-my-select-v="✔" data-my-style-type="other">-->
+                        <!--                            <li data-my-select="true" data-my-select-v="✔">h1</li>-->
+                        <!--                            <li>h2</li>-->
+                        <!--                            <li>h3</li>-->
+                        <!--                            <li>h4</li>-->
+                        <!--                            <li>h5</li>-->
+                        <!--                        </ul>-->
                     </span>
+                </div>
             </div>
-<!--            <div class="my-divider-item"></div>-->
-<!--            <div>-->
-<!--                <button onclick="info(this)" style="font-size: 16px">info</button>-->
-<!--            </div>-->
         </div>
-    </div>
-</header>
 
-<main id="myEdit_main">
-    <!-- 标题   -->
-    <h3 contenteditable="true">
-        测试编辑
-    </h3>
-    <!-- 内容   -->
-    <div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
-    </div>
-</main>
 
-<footer>
+    </header>
 
-</footer>
-<div id="testDiv" style="font-size: 14px; width: 300px;margin-left: 10%; display: block"></div>
-<div id="testDevice" style="font-size: 14px; width: 300px;margin-left: 10%; display: block"></div>
+    <main id="myEdit_main" style="font-size: 14px">
+        <!-- 标题   -->
+        <h3 id="my-title" contenteditable="true"></h3>
+        <!-- 内容   -->
+        <div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
+        </div>
+    </main>
+
+    <footer>
+
+    </footer>
+    <div id="testDiv" style="font-size: 14px; width: 300px;margin-left: 10%; display: block"></div>
+    <div id="testDevice" style="font-size: 14px; width: 300px;margin-left: 10%; display: block"></div>
 
 </body>
 <script>
@@ -216,7 +306,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))