This commit is contained in:
shaoyongjun 2024-10-31 15:07:34 +08:00
parent 78a413bec9
commit 1dc0506b01
7 changed files with 175 additions and 72 deletions

24
static/a4.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<title>A4 页面大小设置</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@page {
size: A4;
margin: 0;
}
body {
width: calc(210mm * (96 / 25.4));
height: calc(297mm * (96 / 25.4));
margin: 0;
}
</style>
</head>
<body style="border: 1px red solid;background-color: #f8f9fa">
<h1>这是一个 A4 大小的网页</h1>
<p>这是一段示例文本。</p>
</body>
</html>

View File

@ -1,7 +1,7 @@
/* 字体 */ /* 字体 */
:root { :root {
/* font-size: calc(0.5em + 1vw); */ /* font-size: calc(0.5em + 1vw); */
font-size: 62.5%; /*font-size: 62.5%;*/
} }
/* style sheet for "A4" printing */ /* style sheet for "A4" printing */
@ -44,11 +44,15 @@ header {
#noteshare { #noteshare {
width: 90%; width: 90%;
/* width: 21cm; */ /* width: 21cm; */
min-height: 10rem; min-height: 160rem;
/* font-size: 1.5rem; */ /* font-size: 1.5rem; */
/*border: 1px red solid;*/ /*border: 1px red solid;*/
margin: auto auto; margin: auto auto;
/*响应式*/
display: flex;
flex-wrap: wrap;
} }
#noteshare p { #noteshare p {
@ -56,12 +60,15 @@ header {
margin: 0 0; margin: 0 0;
padding: 0 0; padding: 0 0;
/* border: none; */ /* border: none; */
/*响应式*/
flex: 1 1 100%;
} }
#testInput { #testInput {
width: 60%; width: 60%;
min-height: 10rem; min-height: 1000rem;
border: 1px rgb(0, 140, 255) solid; border: 1px rgb(0, 140, 255) solid;
margin: 20px auto; margin: 20px auto;
justify-content: center; justify-content: center;
@ -76,8 +83,8 @@ header {
.my-divider-item { .my-divider-item {
background-color: lightgray; background-color: lightgray;
width: 1px; width: 1px;
height: 2rem; height: 240rem;
margin: 0.2rem 1.6rem; margin: 20rem 160rem;
} }
.childStyleStrong { .childStyleStrong {
@ -90,7 +97,7 @@ header {
.childStyleU { .childStyleU {
text-decoration: underline; text-decoration: underline;
/ / 中划线 / / text-decoration: line-through; /*/ / 中划线 / / text-decoration: line-through;*/
} }
.childStyleDel { .childStyleDel {
@ -106,29 +113,27 @@ header {
display: none; display: none;
position: fixed; position: fixed;
z-index: 87; z-index: 87;
top: 5rem;
left: 10rem;
width: auto; width: auto;
height: 2.4rem; height: 240rem;
padding: 0.8rem 0.8rem; padding: 80rem 80rem;
/*padding: 0.6rem 1rem 0.6rem 1rem;*/ /*padding: 0.6rem 1rem 0.6rem 1rem;*/
justify-content: center; justify-content: center;
align-items: center; align-items: center;
align-content: center; align-content: center;
border-radius: 0.8rem; border-radius: 80rem;
border: 1px #dee0e3 solid; border: 1px #dee0e3 solid;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
/*box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem lightgrey;*/ /*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 { .fixStyleOut {
/*border: 1px blue solid;*/ /*border: 1px blue solid;*/
margin: 0 0; margin: 0 0;
width: auto; width: auto;
height: 2rem; height: 200rem;
padding: 0.5rem 0.5rem; padding: 50rem 50rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -137,5 +142,5 @@ header {
} }
.fixStyleInnerSpan { .fixStyleInnerSpan {
margin: 0 1rem; margin: 0 100rem;
} }

View File

@ -7,25 +7,6 @@ import {MyMapItem} from "../model/MyMapItem.js";
export class MyBiz { export class MyBiz {
constructor() { 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 = "<br>"
//添加一行
window.myEdit.utils.AddNewParagraph(newParagraph);
} }
/** /**
@ -191,7 +172,7 @@ export class MyBiz {
newParagraph.setAttribute("id", uuid) newParagraph.setAttribute("id", uuid)
newParagraph.setAttribute("data-order", rowNo) newParagraph.setAttribute("data-order", rowNo)
newParagraph.onkeydown = window.myEdit.eventListener.KeydownListener newParagraph.onkeydown = window.myEdit.eventListener.KeydownListener
newParagraph.innerHTML = "<br>" // newParagraph.innerHTML = "<br>"
window.myEdit.ctx.MyRoot.appendChild(newParagraph) window.myEdit.ctx.MyRoot.appendChild(newParagraph)
window.myEdit.ctx.MyDocMap.set(rowNo, new MyMapItem(uuid)) window.myEdit.ctx.MyDocMap.set(rowNo, new MyMapItem(uuid))

View File

@ -275,6 +275,32 @@ export class MyUtils {
"\nwindow.opera: ", window.opera) "\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 * @returns 生产uuid

View File

@ -5,22 +5,7 @@
*/ */
export class MyEventListener { export class MyEventListener {
constructor(styleClass) { constructor() {
//这里监听鼠标按下事件
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);
}
}
} }
SurroundContentsByStyleListener(e) { SurroundContentsByStyleListener(e) {

View File

@ -3,23 +3,36 @@ import {MyBiz} from './biz/MyBiz.js'
import {MyUtils} from './common/MyUtils.js' import {MyUtils} from './common/MyUtils.js'
import {MyEventListener} from "./event/MyEventListener.js"; import {MyEventListener} from "./event/MyEventListener.js";
window.onload = function () { (function () {
//init //init
window.myEdit = { window.myEdit = {
/** /**
* 优先初始化 工具 * 优先初始化 工具
*/ */
utils: new MyUtils(), utils: new MyUtils(),
/** /**
* 其次初始化 事件监听 * 其次初始化 事件监听
*/ */
eventListener: new MyEventListener("fixStyleInnerSpan"), eventListener: new MyEventListener(),
/**
* ctx
*/
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(); 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.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 = "<br>"
//添加一行
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); document.getElementById("noteshare").addEventListener("mouseup", window.myEdit.eventListener.MouseUp, true);

View File

@ -6,8 +6,11 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>📒</title> <title>📒</title>
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
<link rel="stylesheet" type="text/css" href="./css/normalize.css"> <link rel="stylesheet" type="text/css" href="./css/normalize.css">
<link rel="stylesheet" type="text/css" href="./css/myEdit.css"> <link rel="stylesheet" type="text/css" href="./css/myEdit.css">
<script type="module" src="./js/lib/main.js"></script>
</head> </head>
<body style="display: flex; flex-direction:column; background-color: #ffebc3"> <body style="display: flex; flex-direction:column; background-color: #ffebc3">
@ -18,7 +21,7 @@
<div style="display: flex;"> <div style="display: flex;">
<div style="display: flex;"> <div style="display: flex;">
<div> <div>
<svg width="1.8rem" height="1.8rem" viewBox="0 0 24 24" fill="none" <svg width="180rem" height="180rem" 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 <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" 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"
@ -26,7 +29,7 @@
</svg> </svg>
</div> </div>
<div> <div>
<svg width="1.4rem" height="1.4rem" viewBox="0 0 24 24" fill="none" <svg width="140rem" height="140rem" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined"> xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
<path <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" 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"
@ -39,7 +42,7 @@
<div style="display: flex;"> <div style="display: flex;">
<div> <div>
<svg width="1.8rem" height="1.8rem" viewBox="0 0 24 24" fill="none" <svg width="180rem" height="180rem" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="TypographyOutlined"> xmlns="http://www.w3.org/2000/svg" data-icon="TypographyOutlined">
<path <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" 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"
@ -47,7 +50,7 @@
</svg> </svg>
</div> </div>
<div> <div>
<svg width="1.4rem" height="1.4rem" viewBox="0 0 24 24" fill="none" <svg width="140rem" height="140rem" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined"> xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
<path <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" 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"
@ -59,7 +62,7 @@
<div class="my-divider-item"></div> <div class="my-divider-item"></div>
<div style="display: flex;"> <div style="display: flex;">
<span class="fixStyleInnerSpan" data-value="b"> <span class="fixStyleInnerSpan" data-value="b">
<svg width="1.8rem" height="1.8rem" viewBox="0 0 24 24" <svg width="180rem" height="180rem" viewBox="0 0 24 24"
fill="none" 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" <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"
@ -67,7 +70,7 @@
</svg> </svg>
</span> </span>
<span class="fixStyleInnerSpan" data-value="del"> <span class="fixStyleInnerSpan" data-value="del">
<svg width="1.8rem" height="1.8rem" <svg width="180rem" height="180rem"
viewBox="0 0 24 24" fill="none" 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 <path
@ -76,7 +79,7 @@
</svg> </svg>
</span> </span>
<span class="fixStyleInnerSpan" data-value="i"> <span class="fixStyleInnerSpan" data-value="i">
<svg width="1.8rem" height="1.8rem" viewBox="0 0 24 24" <svg width="180rem" height="180rem" viewBox="0 0 24 24"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="ItalicOutlined"> xmlns="http://www.w3.org/2000/svg" data-icon="ItalicOutlined">
<path <path
@ -85,7 +88,7 @@
</svg> </svg>
</span> </span>
<span class="fixStyleInnerSpan" data-value="u"> <span class="fixStyleInnerSpan" data-value="u">
<svg width="1.8rem" height="1.8rem" viewBox="0 0 24 24" <svg width="180rem" height="180rem" viewBox="0 0 24 24"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="UnderlineOutlined"> xmlns="http://www.w3.org/2000/svg" data-icon="UnderlineOutlined">
<path <path
@ -98,7 +101,7 @@
<div class="my-divider-item"></div> <div class="my-divider-item"></div>
<div> <div>
<span> <span>
<svg width="1.8rem" height="1.8rem" viewBox="0 0 18 18" fill="none" <svg width="180rem" height="180rem" viewBox="0 0 18 18" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<path <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" 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"
@ -113,8 +116,8 @@
</div> </div>
</div> </div>
</header> </header>
<main style="margin-top: 5rem; display: flex;flex-direction:column;align-items:center;"> <main style="margin-top: 500rem; display: flex;flex-direction:column;align-items:center;">
<h1>测试编辑</h1> <h3>测试编辑</h3>
<div id="noteshare" spellcheck="false" translate="no"> <div id="noteshare" spellcheck="false" translate="no">
</div> </div>
</main> </main>
@ -123,7 +126,7 @@
<!-- <div id="testInput" >测试</div>--> <!-- <div id="testInput" >测试</div>-->
</footer> </footer>
</body> </body>
<script type="module" src="./js/lib/main.js"></script>
</html> </html>