diff --git a/static/a4.html b/static/a4.html
new file mode 100644
index 0000000..2fd4fb3
--- /dev/null
+++ b/static/a4.html
@@ -0,0 +1,24 @@
+
+
+
+ A4 页面大小设置
+
+
+
+
+
+这是一个 A4 大小的网页
+这是一段示例文本。
+
+
diff --git a/static/css/myEdit.css b/static/css/myEdit.css
index fc321e4..b34b035 100644
--- a/static/css/myEdit.css
+++ b/static/css/myEdit.css
@@ -1,7 +1,7 @@
/* 字体 */
:root {
/* font-size: calc(0.5em + 1vw); */
- font-size: 62.5%;
+ /*font-size: 62.5%;*/
}
/* style sheet for "A4" printing */
@@ -44,11 +44,15 @@ header {
#noteshare {
width: 90%;
/* width: 21cm; */
- min-height: 10rem;
+ min-height: 160rem;
/* font-size: 1.5rem; */
/*border: 1px red solid;*/
margin: auto auto;
+
+ /*响应式*/
+ display: flex;
+ flex-wrap: wrap;
}
#noteshare p {
@@ -56,12 +60,15 @@ header {
margin: 0 0;
padding: 0 0;
/* border: none; */
+
+ /*响应式*/
+ flex: 1 1 100%;
}
#testInput {
width: 60%;
- min-height: 10rem;
+ min-height: 1000rem;
border: 1px rgb(0, 140, 255) solid;
margin: 20px auto;
justify-content: center;
@@ -76,8 +83,8 @@ header {
.my-divider-item {
background-color: lightgray;
width: 1px;
- height: 2rem;
- margin: 0.2rem 1.6rem;
+ height: 240rem;
+ margin: 20rem 160rem;
}
.childStyleStrong {
@@ -90,7 +97,7 @@ header {
.childStyleU {
text-decoration: underline;
-/ / 中划线 / / text-decoration: line-through;
+/*/ / 中划线 / / text-decoration: line-through;*/
}
.childStyleDel {
@@ -106,29 +113,27 @@ header {
display: none;
position: fixed;
z-index: 87;
- top: 5rem;
- left: 10rem;
width: auto;
- height: 2.4rem;
+ height: 240rem;
- padding: 0.8rem 0.8rem;
+ padding: 80rem 80rem;
/*padding: 0.6rem 1rem 0.6rem 1rem;*/
justify-content: center;
align-items: center;
align-content: center;
- border-radius: 0.8rem;
+ border-radius: 80rem;
border: 1px #dee0e3 solid;
background-color: rgb(255, 255, 255);
/*box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem lightgrey;*/
- box-shadow: 0 0.4rem 0.8rem rgba(31, 35, 41, 0.1);
+ box-shadow: 0 40rem 80rem rgba(31, 35, 41, 0.1);
}
.fixStyleOut {
/*border: 1px blue solid;*/
margin: 0 0;
width: auto;
- height: 2rem;
- padding: 0.5rem 0.5rem;
+ height: 200rem;
+ padding: 50rem 50rem;
display: flex;
justify-content: center;
@@ -137,5 +142,5 @@ header {
}
.fixStyleInnerSpan {
- margin: 0 1rem;
+ margin: 0 100rem;
}
diff --git a/static/js/lib/biz/MyBiz.js b/static/js/lib/biz/MyBiz.js
index 79b390e..66b20a9 100644
--- a/static/js/lib/biz/MyBiz.js
+++ b/static/js/lib/biz/MyBiz.js
@@ -7,25 +7,6 @@ import {MyMapItem} from "../model/MyMapItem.js";
export class MyBiz {
constructor() {
- /**
- * 输入事件
- */
- window.myEdit.eventListener.RegisterEventHandle('input', window.myEdit.eventListener.InputListener);
- window.myEdit.eventListener.RegisterEventHandle('compositionstart', window.myEdit.eventListener.CompositionstartListener);
- window.myEdit.eventListener.RegisterEventHandle('compositionend', window.myEdit.eventListener.CompositionendListener);
-
- // 初始化第一个输入框
- let newParagraph = document.createElement("p");
- newParagraph.setAttribute("contenteditable", "true");
- let uuid = window.myEdit.utils.Uuid()
- let curOrder = window.myEdit.ctx.incrementNumThenReturn();
- newParagraph.setAttribute("data-id", uuid)
- newParagraph.setAttribute("id", uuid)
- newParagraph.setAttribute("data-order", curOrder)
- newParagraph.onkeydown = window.myEdit.eventListener.KeydownListener
- // newParagraph.innerHTML = "
"
- //添加一行
- window.myEdit.utils.AddNewParagraph(newParagraph);
}
/**
@@ -191,7 +172,7 @@ export class MyBiz {
newParagraph.setAttribute("id", uuid)
newParagraph.setAttribute("data-order", rowNo)
newParagraph.onkeydown = window.myEdit.eventListener.KeydownListener
- newParagraph.innerHTML = "
"
+ // newParagraph.innerHTML = "
"
window.myEdit.ctx.MyRoot.appendChild(newParagraph)
window.myEdit.ctx.MyDocMap.set(rowNo, new MyMapItem(uuid))
diff --git a/static/js/lib/common/MyUtils.js b/static/js/lib/common/MyUtils.js
index bf84050..21905d0 100644
--- a/static/js/lib/common/MyUtils.js
+++ b/static/js/lib/common/MyUtils.js
@@ -275,6 +275,32 @@ export class MyUtils {
"\nwindow.opera: ", window.opera)
}
+ /**
+ * 刷新跟节点 front-size
+ * @constructor
+ */
+ RefreshRootFrontSize() {
+ let curDoc = document.documentElement;//当前文档的 root 元素
+ let curClientW = curDoc.clientWidth;
+ if (!curClientW) {
+ return
+ }
+
+ let designWidth = window.myEdit.ctx.designWith;
+ //set 1rem = viewWidth/10 (支持响应式)
+ let nowFrontSize = ((curClientW / designWidth) / 10) + 'px';
+ curDoc.style.fontSize = nowFrontSize;
+ console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize)
+
+ }
+
+ RefreshBodyFrontSize() {
+ let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值
+ let defaultFrontSize = window.myEdit.ctx.bodyFrontSize;
+ document.body.style.fontSize = defaultFrontSize * dpr + 'px';
+ console.log("body-frontSize: ", document.body.style.fontSize);
+ }
+
/**
*
* @returns 生产uuid
diff --git a/static/js/lib/event/MyEventListener.js b/static/js/lib/event/MyEventListener.js
index 798f791..39c3e5d 100644
--- a/static/js/lib/event/MyEventListener.js
+++ b/static/js/lib/event/MyEventListener.js
@@ -5,22 +5,7 @@
*/
export class MyEventListener {
- constructor(styleClass) {
- //这里监听鼠标按下事件
- document.getElementById("_style_utils").addEventListener("mousedown", function (e) {
- const event = window.myEdit.utils.ParseEvent(e);
- window.myEdit.utils.ProhibitDefaultEvent(event);
- },true)
-
- //样式事件
- let styleList = document.getElementsByClassName(styleClass);
- // console.log(styleList);
- if (styleList && styleList.length > 0) {
- for (let i = 0; i < styleList.length; i++) {
- // console.log(styleList[i]);
- styleList[i].addEventListener('click', this.SurroundContentsByStyleListener, true);
- }
- }
+ constructor() {
}
SurroundContentsByStyleListener(e) {
@@ -98,7 +83,7 @@ export class MyEventListener {
*/
InputListener(e) {
const event = window.myEdit.utils.ParseEvent(e);
- console.log("input : ",event)
+ console.log("input : ", event)
window.myEdit.biz.inputHandle(event);
}
@@ -119,7 +104,7 @@ export class MyEventListener {
*/
CompositionendListener(e) {
const event = window.myEdit.utils.ParseEvent(e);
- console.log("Compositionend : ",event)
+ console.log("Compositionend : ", event)
window.myEdit.biz.compositionendHandle(event);
}
diff --git a/static/js/lib/main.js b/static/js/lib/main.js
index df72675..201da7d 100644
--- a/static/js/lib/main.js
+++ b/static/js/lib/main.js
@@ -3,23 +3,36 @@ import {MyBiz} from './biz/MyBiz.js'
import {MyUtils} from './common/MyUtils.js'
import {MyEventListener} from "./event/MyEventListener.js";
-window.onload = function () {
+(function () {
//init
window.myEdit = {
/**
* 优先初始化 工具
*/
utils: new MyUtils(),
+
/**
* 其次初始化 事件监听
*/
- eventListener: new MyEventListener("fixStyleInnerSpan"),
+ eventListener: new MyEventListener(),
+ /**
+ * ctx
+ */
ctx: {
+
+ /**
+ * 默认body front-size 单位px
+ */
+ bodyFrontSize: 12,
+ /**
+ * 设计稿宽度 375
+ */
+ designWith: 1280,
/**
* 文档的根节点
*/
- MyRoot: document.getElementById("noteshare"),
+ MyRoot: null,
/**
* 文档的结构树
*/
@@ -63,6 +76,11 @@ window.onload = function () {
}
}
},
+
+ /**
+ * 业务处理
+ */
+ biz: new MyBiz()
}
/**
@@ -70,8 +88,69 @@ window.onload = function () {
*/
window.myEdit.biz = new MyBiz();
- //窗口撤销事件
+ /**
+ * 窗口重载&文档重载事件 for 响应式
+ */
+ window.myEdit.utils.RefreshRootFrontSize();
+ window.myEdit.utils.RefreshBodyFrontSize();
+ document.addEventListener('DOMContentLoaded', window.myEdit.utils.RefreshRootFrontSize);
+ document.addEventListener('DOMContentLoaded', window.myEdit.utils.RefreshBodyFrontSize);
+ window.addEventListener('pageshow', function (e) {
+ if (e.persisted) {
+ window.myEdit.utils.RefreshRootFrontSize();
+ window.myEdit.utils.RefreshBodyFrontSize();
+ }
+ });
+ window.addEventListener('resize', window.myEdit.utils.RefreshRootFrontSize);
+ window.addEventListener('resize', window.myEdit.utils.RefreshBodyFrontSize);
+ /**
+ * 窗口撤销事件
+ */
window.addEventListener('keydown', window.myEdit.eventListener.WindowsCtrZHandle, true);
+}());
+
+/**
+ * 加载完成后执行
+ */
+window.onload = function () {
+ //这里监听鼠标按下事件
+ document.getElementById("_style_utils").addEventListener("mousedown", function (e) {
+ const event = window.myEdit.utils.ParseEvent(e);
+ window.myEdit.utils.ProhibitDefaultEvent(event);
+ }, true);
+
+ //样式事件监听
+ let styleList = document.getElementsByClassName("fixStyleInnerSpan");
+ console.log("styleList : ", styleList);
+ if (styleList && styleList.length > 0) {
+ for (let i = 0; i < styleList.length; i++) {
+ console.log(styleList[i]);
+ styleList[i].addEventListener('click', window.myEdit.eventListener.SurroundContentsByStyleListener, true);
+ }
+ }
+
+ //ctx
+ window.myEdit.ctx.MyRoot = document.getElementById("noteshare");
+ // 初始化第一个输入框
+ let newParagraph = document.createElement("p");
+ newParagraph.setAttribute("contenteditable", "true");
+ let uuid = window.myEdit.utils.Uuid()
+ let curOrder = window.myEdit.ctx.incrementNumThenReturn();
+ newParagraph.setAttribute("data-id", uuid)
+ newParagraph.setAttribute("id", uuid)
+ newParagraph.setAttribute("data-order", curOrder)
+ newParagraph.onkeydown = window.myEdit.eventListener.KeydownListener
+ // newParagraph.innerHTML = "
"
+ //添加一行
+ window.myEdit.utils.AddNewParagraph(newParagraph);
+
+ /**
+ * 输入事件
+ */
+ window.myEdit.eventListener.RegisterEventHandle('input', window.myEdit.eventListener.InputListener);
+ window.myEdit.eventListener.RegisterEventHandle('compositionstart', window.myEdit.eventListener.CompositionstartListener);
+ window.myEdit.eventListener.RegisterEventHandle('compositionend', window.myEdit.eventListener.CompositionendListener);
+
//监听鼠标抬起事件
document.getElementById("noteshare").addEventListener("mouseup", window.myEdit.eventListener.MouseUp, true);
diff --git a/static/yanxuelu.html b/static/yanxuelu.html
index 7d58265..8ecdaeb 100644
--- a/static/yanxuelu.html
+++ b/static/yanxuelu.html
@@ -6,8 +6,11 @@
📒
+
+
@@ -18,7 +21,7 @@