diff --git a/static/a4.html b/static/a4.html index 2fd4fb3..33f5532 100644 --- a/static/a4.html +++ b/static/a4.html @@ -21,4 +21,36 @@

这是一个 A4 大小的网页

这是一段示例文本。

+ diff --git a/static/css/myEdit.css b/static/css/myEdit.css index 38b8dfa..183f069 100644 --- a/static/css/myEdit.css +++ b/static/css/myEdit.css @@ -88,10 +88,10 @@ header { } .my-divider-item { - background-color: lightgray; + background-color: #e9e9eb; width: 1px; - height: 240rem; - margin: 20rem 160rem; + height: 180rem; + margin: 0 60rem; } .childStyleStrong { @@ -121,7 +121,7 @@ header { position: fixed; z-index: 99; width: auto; - height: 340rem; + height: 200rem; padding: 30rem 30rem; /*padding: 0.6rem 1rem 0.6rem 1rem;*/ @@ -139,8 +139,8 @@ header { /*border: 1px blue solid;*/ margin: 0 0; width: auto; - height: 200rem; - padding: 50rem 50rem; + height: 130rem; + padding: 20rem 20rem; display: flex; justify-content: center; @@ -149,5 +149,5 @@ header { } .fixStyleInnerSpan { - margin: 0 100rem; + margin: 0 80rem; } diff --git a/static/js/lib/biz/MyBiz.js b/static/js/lib/biz/MyBiz.js index 6db02fa..c446c2b 100644 --- a/static/js/lib/biz/MyBiz.js +++ b/static/js/lib/biz/MyBiz.js @@ -400,6 +400,11 @@ export class MyBiz { let start = curSec.startOffset; let end = curSec.endOffset; + if (start > end) { + let tmpS = start; + start = end; + end = tmpS; + } console.log(" 当前选区信息 : ", curSec, "\ncurPe: ", curPe, "\ncurPeP: ", curPe.parentNode, curPe.parentNode.nodeType, curPe.parentNode.nodeName, @@ -443,13 +448,22 @@ export class MyBiz { curHtml += '' + curStartP.innerText.charAt(j) + ''; } } - curStartP.innerHTML = curHtml; + curStartP.innerHTML = curHtml; curPEle = curStartP; //光标保持 - // curS.collapseToEnd(); - // window.myEdit.utils.GetSelection().setPosition(newParagraph, 0); + let s = window.getSelection(); + if (s.rangeCount > 0) s.removeAllRanges(); + let newR = document.createRange(); + //重新获取元素 + let tmpP = document.getElementById(curStartP.getAttribute("id")); + let childrenSize = tmpP.childNodes.length; + console.log("debug007: ", tmpP, start, end, childrenSize) + newR.setStart(tmpP, start); + newR.setEnd(tmpP, end); + //区域 添加 到选区 + s.addRange(newR); } else { let tmpPNode = curSec.commonAncestorContainer; if (!curPeIsP && curPeParentIsSpan) { diff --git a/static/js/lib/common/MyUtils.js b/static/js/lib/common/MyUtils.js index e4b6a7c..7a5132f 100644 --- a/static/js/lib/common/MyUtils.js +++ b/static/js/lib/common/MyUtils.js @@ -273,6 +273,12 @@ export class MyUtils { "\nwindow.webkit: ", window.webkit, "\nwindow.gecko: ", window.gecko, "\nwindow.opera: ", window.opera) + let testDiv = document.getElementById("testDevice") + testDiv.innerText = testDiv.innerText + + "\n ie: " + window.ie + + "\n window.webkit: " + window.webkit + + "\n window.gecko: " + window.gecko + + "\n window.opera: " + window.opera } /** @@ -290,10 +296,12 @@ export class MyUtils { //set 1rem = viewWidth/10 (支持响应式) let nowFrontSize = ((curClientW / designWidth) / 10) + 'px'; curDoc.style.fontSize = nowFrontSize; - console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize) - document.getElementById("testDevice").innerText = "curClientW :" + curClientW + " designWidth: " + designWidth + "-> " + nowFrontSize + console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize); + let testDiv = document.getElementById("testDevice") + testDiv.innerText = testDiv.innerText + "\n curClientW :" + curClientW + " \n designWidth: " + designWidth + "\n -> " + nowFrontSize } + RefreshBodyFrontSize() { let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值 let defaultFrontSize = window.myEdit.ctx.bodyFrontSize; @@ -447,4 +455,35 @@ export class MyUtils { // console.log("sync docP : ", docP, " children: ", docP.children, " childrenMap: ", mapItem.getStyle().getChildrenStyleMap()) } + + /** + * A4纸 + */ + GetDPI() { + let tempDiv = document.createElement("div"); + tempDiv.style.width = "1in"; + tempDiv.style.visibility = "hidden"; + document.body.appendChild(tempDiv); + let dpi = tempDiv.offsetWidth; + document.body.removeChild(tempDiv); + return dpi; + } + + MmToPixel(mm, dpi) { + // 1 inch = 25.4 mm + let inches = mm / 25.4; + let pixels = inches * dpi; + return Math.round(pixels); + } + + A4SizeInPixels() { + let dpi = window.myEdit.utils.GetDPI(); + let width_mm = 210; // A4纸宽度，单位：毫米 + let height_mm = 297; // A4纸高度，单位：毫米 + let width_px = window.myEdit.utils.MmToPixel(width_mm, dpi); + let height_px = window.myEdit.utils.MmToPixel(height_mm, dpi); + return {width: width_px, height: height_px}; + } + + } \ No newline at end of file diff --git a/static/js/lib/event/MyEventListener.js b/static/js/lib/event/MyEventListener.js index 50899d0..0177a32 100644 --- a/static/js/lib/event/MyEventListener.js +++ b/static/js/lib/event/MyEventListener.js @@ -140,17 +140,17 @@ export class MyEventListener { // posY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; // } - var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; - var scrollY = document.documentElement.scrollTop || document.body.scrollTop; - var x = event.pageX || event.clientX + scrollX; - var y = event.pageY || event.clientY + scrollY; + let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; + let scrollY = document.documentElement.scrollTop || document.body.scrollTop; + let x = event.pageX || event.clientX + scrollX; + let y = event.pageY || event.clientY + scrollY; console.log("posX: ", x, " posY: ", y, event.pageX, event.pageY, scrollX, scrollY, event.clientX, event.clientY); // styleUtils.style.display = "block"; - styleUtils.style.left = (event.clientX - 60) + "px"; - styleUtils.style.top = (event.clientY - 60) + "px"; + styleUtils.style.left = (event.clientX - 80) + "px"; + styleUtils.style.top = (event.clientY - 80) + "px"; // window.myEdit.utils.ProhibitDefaultEvent(event); } diff --git a/static/js/lib/main.js b/static/js/lib/main.js index 1e54dc3..2c16f7d 100644 --- a/static/js/lib/main.js +++ b/static/js/lib/main.js @@ -83,6 +83,10 @@ import {MyEventListener} from "./event/MyEventListener.js"; biz: new MyBiz() } + // 直接调用工具函数获取 A4 纸的像素尺寸 + let a4_size = window.myEdit.utils.A4SizeInPixels(); + window.myEdit.ctx.designWith = a4_size.width; + /** * 业务处理 */ @@ -115,10 +119,10 @@ import {MyEventListener} from "./event/MyEventListener.js"; window.onload = function () { //样式事件监听 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', window.myEdit.eventListener.SurroundContentsByStyleListener, true); } } diff --git a/static/yanxuelu.html b/static/yanxuelu.html index b15c58f..dd0b763 100644 --- a/static/yanxuelu.html +++ b/static/yanxuelu.html @@ -18,7 +18,7 @@
-
+

测试编辑

@@ -30,7 +30,7 @@
-
-
-
-
- - - -
-
-
+