server/mylomen-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

to:sync

Browse Source
This commit is contained in:
shaoyongjun 2024-11-05 22:43:34 +08:00
parent 6a375cacbc
commit 0bd5a87973
41 changed files with 2158 additions and 244 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

252
static/css/myEdit.css
View File

@ -1,7 +1,54 @@
/* 字体 */
:root {
/* font-size: calc(0.5em + 1vw); */
/*font-size: 62.5%;*/
/*:root {*/
/* font-size: calc(0.5em + 1vw); */
/*font-size: 62.5%;*/
/*}*/
body, html {
width: 100%;
height: 100%;
}
/* border + padding + body = width */
*, :after, :before {
box-sizing: border-box;
/*选中可编辑框是 外层隐藏黑线*/
outline: none;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
/*@-ms-viewport {*/
/* width: device-width;*/
/*}*/
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;
background-color: #fff;
font-feature-settings: "tnum", "tnum";
display: flex;
flex-direction: column;
align-items: center;
/*background-color: #ffebc3;*/
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
/* style sheet for "A4" printing */
@ -18,49 +65,86 @@
}
}
* {
/* margin: 1px 2px;
padding: 1px 2px; */
/*font-family: Roboto-Regular, PingFang SC, SF Pro SC, SF Pro Text, SF Pro Icons, Helvetica Neue, Roboto, Helvetica, Arial, sans-serif;*/
outline: none;
/* box-sizing: border-box; */
}
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", Helvetica, Arial, "Microsoft YaHei", 微软雅黑, 黑体, Heiti, sans-serif, SimSun, 宋体, serif, SourceSansPro;
display: flex;
flex-direction: column;
justify-content: center;
/*align-items: center;*/
/*background-color: #ffebc3;*/
}
header {
/*position: relative;*/
/*top: 0;*/
position: fixed;
/*border: 1px yellow solid;*/
/*!* height: 8rem; *!*/
/*z-index: 9999;*/
/*left: 0;*/
z-index: 9999;
top: 0;
left: 0;
/*right: 0;*/
/*width: 100%;*/
width: 100%;
min-height: 580rem;
/*background-color: #ffebc3;*/
/*background-color: deepskyblue;*/
/*响应式*/
/*display: flex;*/
/*flex-direction:column;*/
/*flex-wrap: nowrap;*/
}
main {
display: flex;
flex-direction: column;
align-items: center;
/*flex-wrap: nowrap;*/
}
#noteshare {
width: 80%;
#head_top{
width: 100%;
height: 320rem;
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: 16px;
display: flex;
justify-content: center;
align-items: center;
}
.fixStylePosition {
display: block;
width: 100%;
height: 260rem;
/*border: 1px #dee0e3 solid;*/
/*border: 1px orange solid;*/
background-color: rgb(255, 255, 255);
border: 1px #f5f5f5 solid;
/*box-shadow: 0 40rem 80rem rgba(31, 35, 41, 0.1);*/
}
.fixStyleOut {
/*border: 1px blue solid;*/
margin: 0 0;
width: auto;
/*height: 130rem;*/
padding: 50rem 50rem;
display: flex;
justify-content: center;
align-items: center;
/*align-content: center;*/
}
.fixStyleInnerSpan {
margin: 0 80rem;
}
main {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 580rem;
/*min-height: 80%;*/
/*border: 1px greenyellow solid;*/
}
#yxl_note {
width: 60%;
/* width: 21cm; */
min-height: 2000rem;
/* font-size: 1.5rem; */
@ -77,7 +161,7 @@ main {
}
#noteshare p {
#yxl_note p {
/*border: 1px rgb(248, 245, 245) solid;*/
margin: 0 0;
padding: 0 0;
@ -109,86 +193,26 @@ main {
margin: 0 60rem;
}
.childStyleStrong {
font-weight: bold
}
.childStyleI {
font-style: italic;
}
.childStyleU {
text-decoration: underline;
/*/ / 中划线 / / text-decoration: line-through;*/
}
.childStyleDel {
text-decoration: line-through;
}
.childStyleColor {
color: red;
footer{
width: 100%;
}
.fixStylePosition {
display: none;
position: fixed;
z-index: 99;
width: auto;
/*height: 200rem;*/
/*@media screen and ( max-width: 1024px ) {*/
/* !*当屏幕尺寸小于768px时，应用下面的css样式*!*/
/* .fixStylePosition {*/
/* display: block;*/
/* z-index: 99;*/
/* top: 0;*/
/* width: 100%;*/
/* min-height: 200rem;*/
/* margin-bottom: 3rem;*/
/* }*/
padding: 20rem 30rem;
/*padding: 0.6rem 1rem 0.6rem 1rem;*/
justify-content: center;
align-items: center;
align-content: center;
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 40rem 80rem rgba(31, 35, 41, 0.1);
}
/* #_style_utils svg {*/
/* width: 400rem;*/
/* height: 400rem;*/
/* margin: 50rem 0;*/
/* }*/
.fixStyleOut {
/*border: 1px blue solid;*/
margin: 0 0;
width: auto;
/*height: 130rem;*/
/*padding: 20rem 20rem;*/
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
.fixStyleInnerSpan {
margin: 0 80rem;
}
@media screen and ( max-width: 1024px ) {
/*当屏幕尺寸小于768px时，应用下面的css样式*/
.fixStylePosition {
display: block;
z-index: 99;
top: 0;
width: 100%;
min-height: 200rem;
margin-bottom: 3rem;
}
body {
top: 1%;
}
#_style_utils svg {
width: 400rem;
height: 400rem;
margin: 50rem 0;
}
main {
margin-top: 500rem;
}
}
/*}*/

194
static/css/myEdit.css.old Normal file
View File

@ -0,0 +1,194 @@
/* 字体 */
:root {
/* font-size: calc(0.5em + 1vw); */
/*font-size: 62.5%;*/
}
/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
@page {
margin: 3cm;
}
}
/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
@page {
margin: 1in;
}
}
* {
/* margin: 1px 2px;
padding: 1px 2px; */
/*font-family: Roboto-Regular, PingFang SC, SF Pro SC, SF Pro Text, SF Pro Icons, Helvetica Neue, Roboto, Helvetica, Arial, sans-serif;*/
outline: none;
/* box-sizing: border-box; */
}
body {
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", Helvetica, Arial, "Microsoft YaHei", 微软雅黑, 黑体, Heiti, sans-serif, SimSun, 宋体, serif, SourceSansPro;
display: flex;
flex-direction: column;
justify-content: center;
/*align-items: center;*/
/*background-color: #ffebc3;*/
}
header {
/*position: relative;*/
/*top: 0;*/
/*border: 1px yellow solid;*/
/*!* height: 8rem; *!*/
/*z-index: 9999;*/
/*left: 0;*/
/*right: 0;*/
/*width: 100%;*/
/*响应式*/
/*display: flex;*/
/*flex-direction:column;*/
/*flex-wrap: nowrap;*/
}
main {
display: flex;
flex-direction: column;
align-items: center;
}
#noteshare {
width: 80%;
/* width: 21cm; */
min-height: 2000rem;
/* font-size: 1.5rem; */
/*border: 1px red solid;*/
margin: auto auto;
padding: 100rem 100rem;
/*box-shadow: 0 40rem 80rem rgba(31, 35, 41, 0.1);*/
/*响应式*/
/*display: flex;*/
/*flex-direction:column;*/
/*flex-wrap: nowrap;*/
}
#noteshare p {
/*border: 1px rgb(248, 245, 245) solid;*/
margin: 0 0;
padding: 0 0;
/* border: none; */
/*响应式*/
flex: 1 1 100%;
}
#testInput {
width: 60%;
min-height: 1000rem;
border: 1px rgb(0, 140, 255) solid;
margin: 20px auto;
justify-content: center;
}
::selection {
color: antiquewhite;
background-color: cadetblue;
text-shadow: #00a9ff;
}
.my-divider-item {
background-color: #e9e9eb;
width: 1px;
height: 180rem;
margin: 0 60rem;
}
.childStyleStrong {
font-weight: bold
}
.childStyleI {
font-style: italic;
}
.childStyleU {
text-decoration: underline;
/*/ / 中划线 / / text-decoration: line-through;*/
}
.childStyleDel {
text-decoration: line-through;
}
.childStyleColor {
color: red;
}
.fixStylePosition {
display: none;
position: fixed;
z-index: 99;
width: auto;
/*height: 200rem;*/
padding: 20rem 30rem;
/*padding: 0.6rem 1rem 0.6rem 1rem;*/
justify-content: center;
align-items: center;
align-content: center;
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 40rem 80rem rgba(31, 35, 41, 0.1);
}
.fixStyleOut {
/*border: 1px blue solid;*/
margin: 0 0;
width: auto;
/*height: 130rem;*/
/*padding: 20rem 20rem;*/
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
.fixStyleInnerSpan {
margin: 0 80rem;
}
@media screen and ( max-width: 1024px ) {
/*当屏幕尺寸小于768px时，应用下面的css样式*/
.fixStylePosition {
display: block;
z-index: 99;
top: 0;
width: 100%;
min-height: 200rem;
margin-bottom: 3rem;
}
body {
top: 1%;
}
#_style_utils svg {
width: 400rem;
height: 400rem;
margin: 50rem 0;
}
main {
margin-top: 500rem;
}
}

2
static/css/normalize.css vendored
View File

@ -405,7 +405,7 @@ select {
button,
html input[type="button"],
/* 1 */
/* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;

28
static/js/common/MyRecovery.js Normal file
View File

@ -0,0 +1,28 @@
"use strict";
/**
* 恢复实体
*/
define(function (require, exports, module) {
class MyRecovery {
constructor(data, func) {
this.data = data;
this.func = func;
}
getData() {
return this.data;
}
getFun() {
return this.func;
}
recovery() {
this.func();
}
}
//导出
module.exports= MyRecovery;
});

37
static/js/common/a4Utils.js Normal file
View File

@ -0,0 +1,37 @@
"use strict";
define(function (require, exports, module) {
class A4Utils {
constructor() {
let dpi = this.GetDPI();
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;
}
/**
* 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);
}
}
module.exports = new A4Utils();
})

139
static/js/common/ctx.js Normal file
View File

@ -0,0 +1,139 @@
"use strict";
define(function (require, exports, module) {
console.log(("import ctx"))
class MyCtx {
#MyRoot = null;
constructor() {
console.log(("ctx init"));
//可以修改的
let editFrontSize = localStorage.getItem('editFrontSize');
if (editFrontSize !== undefined && editFrontSize !== null) {
this.editFrontSize = editFrontSize;
} else {
this.editFrontSize = 14;
}
this.usn = "syjSyj";
this.docType = 0;
// 获取 User-Agent 字符串
const userAgent = window.navigator.userAgent;
// 判断是否是手机
this.isMobile = /mobi|android|iphone|ipad|ipod/i.test(userAgent.toLocaleLowerCase()) || this.getScreenWidth() < 768;
this.isIOS = /iphone|ipad|ipod/i.test(userAgent.toLocaleLowerCase()) || this.getScreenWidth() < 768;
this.isAndroid = /android/i.test(userAgent.toLocaleLowerCase()) || this.getScreenWidth() < 768;
// 判断是否是平板电脑
this.isTablet = /tablet/i.test(userAgent.toLocaleLowerCase()) || (this.getScreenWidth() >= 768 && this.getScreenWidth() < 1024);
//屏幕宽高
this.screenWidth = 0;
this.screenHeight = 0;
//默认a4 纸
const a4Utils = require('./a4Utils');
this.designWith = a4Utils.width;
//h5 this.MyRoot
//文档map
this.doc = new Map();
//行号
this.rowNo = 0;
//是否开始输入中文
this.inCompositionEvent = false;
//最近一次操作
this.latestOpDoc = null;
//初始化
}
MyRoot() {
if (this.#MyRoot === null) {
this.#MyRoot = document.getElementById("yxl_note");
}
return this.#MyRoot
}
getMapItem(orderNo) {
return this.docMap.get(orderNo);
}
incrementNumThenReturn() {
return this.rowNo++;
}
getScreenWidth() {
return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}
getScreenHeight() {
return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
/**
* 新增一个元素
* @param newParagraph
*/
addNewParagraph(newParagraph) {
//docRoot
this.MyRoot.appendChild(newParagraph);
//mapRoot
let myP = new MyDocItem(newParagraph);
let curOrder = myP.parseOrder();
let uuid = myP.parseUuid();
this.doc.set(curOrder, new MyMapItem(uuid))
//收起选区到一个点，光标落在一个可编辑元素上
window.myEdit.utils.GetSelection().setPosition(newParagraph, 0);
}
/**
* 同步某一行数据到对应的 map节点
* @param docP
* @constructor
*/
SyncMapItemChildrenStyle(docP) {
//子元素为空不处理
let items = docP.childNodes;
if (items.length <= 0) {
return
}
//构造参数
let curMyP = new MyDocItem(docP);
let mapItem = window.myEdit.ctx.getMapItem(curMyP.parseOrder());
//清空重置
// console.log(mapItem);
mapItem.getStyle().setChildrenStyleMapNull();
//遍历
for (let i = 0; i < items.length; i++) {
let curItem = items[i];
let tmpClassList = curItem.classList;
if (tmpClassList != null && tmpClassList.length > 0) {
mapItem.getStyle().setChildrenStyle(i, tmpClassList);
}
}
// console.log("sync docP : ", docP, " children: ", docP.children, " childrenMap: ", mapItem.getStyle().getChildrenStyleMap())
}
/**
*
*/
showTestText() {
}
}
// 初始化一次
module.exports = new MyCtx();
})

19
static/js/common/demo.js Normal file
View File

@ -0,0 +1,19 @@
"use strict";
define(function (require, exports, module) {
console.log(("import common"))
class Demo {
constructor() {
console.log(("init"))
}
hello() {
console.log("hello")
}
}
module.exports = Demo;
// module.exports = new Utils();
})

41
static/js/common/doc.js Normal file
View File

@ -0,0 +1,41 @@
"use strict";
define(function (require, exports, module) {
console.log(("import common"))
class Doc {
#docType;
#docId;
#content;
constructor(docType, docId, title) {
this.#docType = docType;
this.#docId = docId;
this.title = title;
this.#content = new Map();
}
getDocType() {
return this.#docType;
}
getDocId() {
return this.#docId;
}
getContent() {
return this.#content;
}
getNode(rowNo) {
return this.#content.get(rowNo.toString());
}
setNode(rowNo, node) {
this.#content.set(rowNo.toString(), node);
}
}
module.exports = Doc;
})

13
static/js/common/h5_newParagraph.js Normal file
View File

@ -0,0 +1,13 @@
"use strict";
/**
* 使用样式事件
*/
define(function (require, exports, module) {
function handle(event) {
}
//导出
exports.handle = handle;
});

41
static/js/common/node.js Normal file
View File

@ -0,0 +1,41 @@
"use strict";
define(function (require, exports, module) {
console.log(("import common"))
class Node {
#id;
#source;
#innerStyleList;
constructor(nodeId, start, end, source, type = "yxu_p") {
this.#id = nodeId;
this.#source = source;
this.type = type;
this.start = start;
this.end = end;
this.collpseChildren = false;
//样式数组 [{"k1":"v1","k2":"k2"},{}]
this.#innerStyleList = [];
}
getNodeId() {
return this.#id;
}
getInnerStyleList() {
return this.#innerStyleList;
}
updateInnerStyleList(styleList) {
this.#innerStyleList = styleList;
}
updateSource(source) {
this.source = source;
}
}
module.exports = Node;
})

160
static/js/common/utils.js Normal file
View File

@ -0,0 +1,160 @@
"use strict";
define(function (require, exports, module) {
return {
/**
*
*/
charSources: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz_'.split(''),
/**
* 十进制 转 63进制
* @param val
* @constructor
*/
Parse10To63(val) {
if (val <= 10) {
return (val - 1) + "";
}
let sources = this.charSources;
let result = [];
let num = 0;
let mx = 63, baseMix = 63;
let tmp = 0;
while (val > 0) {
let mod = val % mx;
if (num === 0) {
tmp = mod - 1;
result.push(sources[tmp])
val = val - mod;
} else {
tmp = mod / (mx / baseMix);
result.push(sources[tmp - 1])
val = val - mod;
}
// 递增
num++;
mx = mx * baseMix;
//log
// console.log("mod: ", mod, " mx: ", mx, " val: ", val, " tmp: ", tmp)
}
return result.reverse().join('')
},
/**
* 生成UUID
* @param usn
* @param docType
* @returns {string}
* @constructor
*/
Uuid(usn, docType = 0) {
let sources = this.charSources;
let radix = sources.length;
let uuid = [];
let myCrypto = window.crypto;
//1. docIdPrefix长度3
let docIdPrefix = "";
if (myCrypto) {
//生成一个 8位的数组，长度是 3
let num = new Uint8Array(3);
//随机生成
myCrypto.getRandomValues(num);
// console.log("Your lucky numbers:");
for (let i = 0; i < 3; i++) {
uuid[i] = sources[num[i] >> 2]
}
// docId + uid + docType + ts
docIdPrefix = uuid.join('');
} else {
// Compact form
for (let i = 0; i < 3; i++) uuid[i] = sources[0 | Math.random() * radix];
docIdPrefix = uuid.join('');
}
//2. 基于 2024-11-03 16:37:38 1730623058 最大长度可自增
let curTs4Sec = Date.parse(new Date()) / 1000 - 1730623058;
let tsStr = this.Parse10To63(curTs4Sec);
// console.log("curTs4Sec : ", curTs4Sec, " tsStr: ", tsStr)
// docId(长度固定3) + uid(长度固定6) + docType(长度固定1) + ts(短期内1-6)
return docIdPrefix + docType + usn + tsStr;
},
/**
* 阻止默认事件
* @constructor
*/
ProhibitDefaultEvent(event) {
event.preventDefault()
event.returnValue = false
},
/**
* 获取 触发事件的元素
* @param event
* @constructor
*/
GetEventTarget(event) {
return event.target
},
ParseEvent(e) {
return e || window.event //标准化事件处理
},
GetKeyCode(event) {
return event.keyCode || event.which || event.charCode
},
/**
* 当前选区。 兼容不同浏览器
* @returns {Selection|*}
*/
GetSelection() {
return window.getSelection() || document.selection
},
/**
* 是否是数字
* @param value
* @returns {boolean}
*/
IsNum(value) {
return !isNaN(parseFloat(value)) && isFinite(value)
},
/**
* 在节点node后面插入新节点newNode
* @method InsertAfter
* @param { Node } node 目标节点
* @param { Node } newNode 新插入的节点， 该节点将置于目标节点之后
* @return { Node } 新插入的节点
*/
InsertAfter(node, newNode) {
return node.nextSibling
? node.parentNode.insertBefore(newNode, node.nextSibling)
: node.parentNode.appendChild(newNode)
},
TriggerFocus(selector) {
const targetElement = document.querySelector(selector);
if (document.createEvent) {
const event = document.createEvent('HTMLEvents');
event.initEvent('focus', true, false);
targetElement.dispatchEvent(event);
} else if (document.createEventObject) {
//兼容IE
targetElement.fireEvent('focus');
}
}
}
});

162
static/js/event/MyEventListener.js Normal file
View File

@ -0,0 +1,162 @@
"use strict";
define(function (require, exports, module) {
/**
* 解决事件监听 this 问题，这里 转接一下
*/
class MyEventListener {
constructor() {
//resize
window.addEventListener('resize', this.RSizeListener, true);
window.addEventListener('pageshow', this.RSizeListener, true);
window.addEventListener('DOMContentLoaded', this.RSizeListener, true);
/**
* 窗口事件.
* js中的键盘事件只有三种：keydown、keyup、keypress。
* 它们触发的顺序是：keydown -> keypress -> keyup。
* 当按下一个键不放开，一般会重复地触发 keydown+keypress，直到放开后触发一个 keyup 事件。
*/
window.addEventListener('keydown', this.KeydownListener, false);
//keyup
window.addEventListener('keyup', this.KeyUpListener, false);
// window.addEventListener('DOMsubtreeModified', function (e) {
// console.log("DOMsubtreeModified : ", e)
// });
let mutationHandle = require("./impl/MutationObserverImpl")
// 并将回调函数传给它
let MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
let observer = new MutationObserver(function (mutationList, observer) {
mutationHandle.handle(mutationList);
});
// 在 MutationObserver 实例上调用 `observe` 方法，
// 并将要观察的元素与选项传给此方法
observer.observe(document.getElementById("yxl_note"),
{
// 当元素的属性变化时触发回调（默认为 false）。
attributes: true,
//当目标节点的子节点被添加或删除时触发回调（默认为 false）。
childList: true,
// 当设置为 true 时，监视目标节点及其所有后代节点的变化（默认为 false）。
subtree: true,
// 当节点的文本内容变化时触发回调（默认为 false）。
characterData: true,
//当属性变化时，记录变化前的属性值（默认为 false）。
attributeOldValue: true,
// 当文本节点变化时，记录变化前的文本内容（默认为 false）。
characterDataOldValue: true
});
//这里监听鼠标按下事件
document.getElementById("_style_utils").addEventListener("mousedown", this.Mousedown, false);
//样式事件监听
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', this.ApplyStyleListener, false);
}
}
//+/-
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)
}
AdjustMyFontSize(e) {
const handle = require('./impl/AdjustMyFontSizeEventImpl');
handle.handle(e);
}
Mousedown(e) {
const handle = require('./impl/MouseDownEventImpl');
handle.handle(e);
}
/**
* 使用样式事件
* @param e
* @constructor
*/
ApplyStyleListener(e) {
const handle = require('./impl/ApplyStyleEventImpl');
handle.handle(e);
}
/**
*
* @param {*} e
*/
KeydownListener(e) {
const keyDownHandle = require('./impl/KeyDownEventImpl');
keyDownHandle.handle(e);
}
/**
*
* @param e
* @constructor
*/
KeyUpListener(e) {
const keyUpHandle = require('./impl/KeyUpEventImpl');
keyUpHandle.handle(e);
}
/**
* 输入事件
* @param e
* @constructor
*/
InputListener(e) {
const handle = require('./impl/InputEventImpl');
handle.handle(e);
}
/**
* 中文输入开始事件
* @param e
* @constructor
*/
CompositionstartListener(e) {
const utils = require('../common/utils');
const event = utils.ParseEvent(e);
// window.myEdit.biz.compositionstartHandle(event);
}
/**
* 中文输入结束事件
* @param e
* @constructor
*/
CompositionendListener(e) {
const utils = require('../common/utils');
const event = utils.ParseEvent(e);
console.log("Compositionend : ", event)
// window.myEdit.biz.compositionendHandle(event);
}
/**
* 尺寸变化事件
* @param e
* @constructor
*/
RSizeListener(e) {
console.log("RSizeListener : ", e);
let handle = require("./impl/RSizeEventImpl");
handle.handle(e);
}
}
// 初始化一次
module.exports = new MyEventListener();
});

34
static/js/event/impl/AdjustMyFontSizeEventImpl.js Normal file
View File

@ -0,0 +1,34 @@
"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;
});

157
static/js/event/impl/ApplyStyleEventImpl.js Normal file
View File

@ -0,0 +1,157 @@
"use strict";
/**
* 使用样式事件
*/
define(function (require, exports, module) {
function handle(event) {
let utils = require("../../common/utils");
let curS = utils.GetSelection();
let curP = utils.GetEventTarget(event);
let styleK = curP.getAttribute("data-k");
let styleV = curP.getAttribute("data-v");
if (styleK === undefined || styleK === null) {
styleK = curP.closest("span").getAttribute("data-k");
styleV = curP.closest("span").getAttribute("data-v");
// console.log("closest: ", curP, curP.closest("span"))
}
for (let i = 0; i < curS.rangeCount; i++) {
let curRange = curS.getRangeAt(i);
let curCommonEle = curRange.commonAncestorContainer;
let start = curRange.startOffset;
let end = curRange.endOffset;
if (start > end) {
let tmpS = start;
start = end;
end = tmpS;
}
if (start === end) {
continue
}
// //一个元素节点，例如 <p> 和 <div>。
// let curComIsSpan = curCommonEle.nodeType === 1 && curCommonEle.nodeName === "SPAN";
// let curComParentIsP = curCommonEle.parentNode.nodeType === 1 && curCommonEle.parentNode.nodeName === "P";
// let curComParentIsDiv = curCommonEle.parentNode.nodeType === 1 && curCommonEle.parentNode.nodeName === "DIV";
// let curComParentIsSpan = curCommonEle.parentNode.nodeType === 1 && (curCommonEle.parentNode.nodeName === 'SPAN"' || curCommonEle.parentNode.nodeName === 'SPAN');
// console.log(" 当前选区信息 : ", curRange,
// "\ncurCommonEle: ", curCommonEle,
// "\ncurCommonEleParent: ", curCommonEle.parentNode, curCommonEle.parentNode.nodeType, curCommonEle.parentNode.nodeName,
// "\ncurCommonEleParentParent: ", curCommonEle.parentNode.parentNode, curCommonEle.parentNode.parentNode.nodeType, curCommonEle.parentNode.parentNode.nodeName,
//
// "\ncurComParentIsSpan: ", curComParentIsSpan,
// "\ncurComParentIsP : ", curComParentIsP,
// "\ncurComParentIsDiv", curComParentIsDiv,
// "\ncurComIsSpan", curComIsSpan,
//
// "\nstyleK: ", styleK,
// "\nstyleV: ", styleV,
// "\ntart: ", start,
// "\nend: ", end);
let curSpanContent = curCommonEle;
if (curSpanContent.nodeName !== "SPAN" || curSpanContent.getAttribute("data-flag") !== "span_content") {
curSpanContent = curSpanContent.parentElement.closest("span[data-flag='span_content']");
}
console.log("curSpanContent : ", curSpanContent, curCommonEle);
if (curSpanContent.childNodes.length <= 0) {
continue
}
let firstItem = curSpanContent.childNodes[0];
console.log("curSpanContent : ", curSpanContent, curSpanContent.childNodes, firstItem.nodeName, firstItem.nodeType);
let isEmptyStyle = curSpanContent.childNodes.length === 1 && firstItem.nodeName === "#text" && firstItem.nodeType === 3;
if (isEmptyStyle) {
let copySpan = curSpanContent.cloneNode();
copySpan.innerHTML = "";
for (let j = 0; j < curSpanContent.innerText.length; j++) {
// console.log(curStartP.innerText.charAt(j))
if (j >= start && j < end) {
let tmpSpan = document.createElement("span");
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
applySpanStyleKV(tmpSpan, styleK, styleV);
copySpan.append(tmpSpan);
} else {
let tmpSpan = document.createElement("span");
tmpSpan.innerText = curSpanContent.innerText.charAt(j);
copySpan.append(tmpSpan);
}
}
curSpanContent.innerHTML = copySpan.innerHTML;
//光标保持
let s = window.getSelection();
if (s.rangeCount > 0) s.removeAllRanges();
let newR = document.createRange();
//重新获取元素
let tmpP = curSpanContent;
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 total = 0, effectNum = 0;
for (let j = 0; j < curSpanContent.childNodes.length; j++) {
let tmpSpan = curSpanContent.childNodes[j];
if (curS.containsNode(tmpSpan, true)) {
total++;
if (spanContainsStyleKV(tmpSpan, styleK, styleV)) {
console.dir(tmpSpan);
} else {
effectNum++;
applySpanStyleKV(tmpSpan, styleK, styleV);
}
}
}
//如果没有设置任何一个 则取消
if (effectNum === 0) {
for (let j = 0; j < curSpanContent.childNodes.length; j++) {
let tmpSpan = curSpanContent.childNodes[j];
if (curS.containsNode(tmpSpan, true)) {
removeSpanStyleKV(tmpSpan, styleK, styleV);
}
}
}
}
}
}
function removeSpanStyleKV(span, styleK, styleV) {
let kList = styleK.toString().split(",");
let vList = styleV.toString().split(",");
for (let i = 0; i < kList.length; i++) {
if (span.style.getPropertyValue(kList[0]) === vList[0]) {
span.style.removeProperty(kList[0]);
}
}
}
function spanContainsStyleKV(span, styleK, styleV) {
let kList = styleK.toString().split(",");
let vList = styleV.toString().split(",");
let total = kList.length, match = 0;
for (let i = 0; i < kList.length; i++) {
if (span.style.getPropertyValue(kList[0]) === vList[0]) {
match++;
}
}
return total === match;
}
function applySpanStyleKV(span, styleK, styleV) {
let kList = styleK.toString().split(",");
let vList = styleV.toString().split(",");
for (let i = 0; i < kList.length; i++) {
span.style.setProperty(kList[i], vList[i]);
}
}
//导出
exports.handle = handle;
});

26
static/js/event/impl/CancelEventImpl.js Normal file
View File

@ -0,0 +1,26 @@
"use strict";
/**
* 撤销事件
*/
define(function (require, exports, module) {
function handle(e) {
const utils = require('../../common/utils');
const ctx = require('../../common/ctx');
let event = utils.ParseEvent(e);
console.log('触发ctrl + Z 事件', event.target)
if (ctx.latestOpDoc !== undefined && ctx.latestOpDoc !== null) {
//恢复
ctx.latestOpDoc.recovery();
//测试展示
ctx.showTestText()
//阻止事件
utils.ProhibitDefaultEvent(event);
}
ctx.latestOpDoc = null
}
//导出
exports.handle = handle;
});

13
static/js/event/impl/CopyEventImpl.js Normal file
View File

@ -0,0 +1,13 @@
"use strict";
/**
* 拷贝事件
*/
define(function (require, exports, module) {
function handle(event) {
}
//导出
exports.handle = handle;
});

83
static/js/event/impl/DelEventImpl.js Normal file
View File

@ -0,0 +1,83 @@
"use strict";
/**
* 删除事件
*/
define(function (require, exports, module) {
function handle(event) {
const ctx = require("../../common/ctx");
const utils = require("../../common/utils");
const MyRecovery = require("../../common/MyRecovery");
let curP = utils.GetEventTarget(event);
let cNo = parseInt(curP.getAttribute("id"));
//维护最近一次编辑的内容
if (ctx.latestOpDoc === undefined
|| ctx.latestOpDoc === null
|| ctx.latestOpDoc.getData().getAttribute("data-id") !== curP.getAttribute("data-id")) {
//记录最近一次删除 for 撤销
ctx.latestOpDoc = new MyRecovery(curP.cloneNode(true), function () {
let cNo = parseInt(this.data.getAttribute("id"))
console.log("恢复", this.data, cNo, " this: ", this)
if (cNo > 1) {
utils.InsertAfter(this.data, document.getElementById((cNo - 1) + ""))
} else {
//添加元素到首位 todo_xxx
// ctx.MyRoot.insertBefore(this.data, ctx.MyRoot.children[0])
ctx.MyRoot().insertBefore(this.data, ctx.MyRoot.children[0]);
}
// 恢复该元素展示
ctx.getMapItem(cNo).setHidden(false);
})
}
//如果是第一行
let previousSibling = curP.previousSibling
// console.log(curP, previousSibling === undefined, previousSibling.id === undefined)
if (previousSibling === undefined || previousSibling.id === undefined) {
//显示用户的输入内容
ctx.showTestText();
return
}
console.log('触发删除', curP.innerHTML, cNo)
let curS = utils.GetSelection();
// console.log("当前内容: ", curP.innerHTML, " 当前选区 ：", curS)
//处理前面没有内容，后面还有内容需要拼接到上层的场景
if ((curS.isCollapsed && curS.anchorOffset === 0) || curP.innerHTML === '<br>') {
let curNodeRetainHtml = curP.innerHTML
//阻止事件传递
utils.ProhibitDefaultEvent(event);
//设置该元素隐藏
ctx.MyDocMap.get(cNo).setHidden(true)
//删除当前元素
// curP.remove()
curP.innerHTML = "<br/>"
let emptyRowNoList = ctx.getMapItem("emptyRowNoList");
if (emptyRowNoList === undefined || emptyRowNoList === null) {
emptyRowNoList = [];
ctx.MyDocMap.set("emptyRowNoList", emptyRowNoList);
}
emptyRowNoList.push(cNo);
//拼接
if (curNodeRetainHtml !== '<br>') {
previousSibling.innerHTML = previousSibling.innerHTML + curNodeRetainHtml
}
//收起选区到一个点，光标落在一个可编辑元素上
window.getSelection().setPosition(previousSibling, 1);
}
//显示用户的输入内容
ctx.showTestText();
}
//导出
exports.handle = handle;
});

115
static/js/event/impl/EmptyInputEventImpl.js Normal file
View File

@ -0,0 +1,115 @@
"use strict";
/**
* 输入内容为空，如# /- /1. /等 触发事件
*/
define(function (require, exports, module) {
function handle(event) {
const utils = require('../../common/utils');
const Node = require('../../common/node');
let curP = utils.GetEventTarget(event);
let myDocItem = new Node(curP);
// let inputLength = curP.innerText.length
// console.log("emptyKeyWorkHandler :", curP, " _'", curP.innerHTML, "'_'", curP.innerText, "'_",
// "\neq1", curP.innerHTML.startsWith("&nbsp;#&nbsp;"),
// "\neq2", curP.innerHTML.startsWith(" # "),
// "\neq3", curP.innerHTML.startsWith("#&nbsp;"),
// "\neq4", curP.innerHTML.startsWith("# "),
//
// "\neqV1", curP.innerText.startsWith("&nbsp;#&nbsp;"),
// "\neqV2", curP.innerText.startsWith(" # "),
// "\neqV3", curP.innerText.startsWith("#&nbsp;"),
// "\neqV4", curP.innerText.startsWith("# "),
//
// )
/**
* h1 ~ h6
*/
if (curP.innerText.startsWith("#")) {
let curNo = myDocItem.parseOrder();
let mapNode = ctx.MyDocMap.get(curNo);
if (curP.innerHTML.startsWith("######")) {
mapNode.getStyle().setNodeType("h6")
curP.innerHTML = curP.innerHTML.replace("######", "")
this.becomeAnotherElement(curP, "h6")
} else if (curP.innerHTML.startsWith("#####")) {
mapNode.getStyle().setNodeType("h5")
curP.innerHTML = curP.innerHTML.replace("#####", "")
this.becomeAnotherElement(curP, "h5")
} else if (curP.innerHTML.startsWith("####")) {
mapNode.getStyle().setNodeType("h4")
curP.innerHTML = curP.innerHTML.replace("####", "")
this.becomeAnotherElement(curP, "h4")
} else if (curP.innerHTML.startsWith("###")) {
mapNode.getStyle().setNodeType("h3")
curP.innerHTML = curP.innerHTML.replace("###", "")
this.becomeAnotherElement(curP, "h3")
} else if (curP.innerHTML.startsWith("##")) {
mapNode.getStyle().setNodeType("h2")
curP.innerHTML = curP.innerHTML.replace("##", "")
this.becomeAnotherElement(curP, "h2")
} else {
mapNode.getStyle().setNodeType("h1")
curP.innerHTML = curP.innerHTML.replace("#", "")
this.becomeAnotherElement(curP, "h1")
}
}
/**
* 无序列表效果
*/
if (curP.innerText.startsWith("-")) {
let curNo = myDocItem.parseOrder();
let mapNode = ctx.getMapItem(curNo);
mapNode.getStyle().setPreStyle("ul", true)
//clean
let historyContent = curP.innerHTML.replace("-", "");
mapNode.setSource(curP.innerText)
//根据上一层级元素动态选择 todo
curP.setAttribute("style", "padding-left: 1rem;")
//新增元素
let newParagraph = document.createElement("span");
newParagraph.setAttribute("contenteditable", "false");
//∙ vs ∘
newParagraph.innerHTML = "∙ &nbsp;"
curP.innerHTML = ""
curP.append(newParagraph);
curP.innerHTML = curP.innerHTML + historyContent
//收起选区到一个点，光标落在一个可编辑元素上
utils.GetSelection().collapse(curP, true)
}
/**
* 有序列表效果
*/
let preContent = curP.innerText.split("\.")[0]
if (window.myEdit.utils.IsNum(preContent)) {
let curNo = myDocItem.parseOrder();
let mapNode = ctx.MyDocMap.get(curNo);
mapNode.getStyle().setPreStyle("ol", preContent)
//clean
let historyContent = curP.innerHTML.replace(preContent + ".", "");
mapNode.setSource(curP.innerText)
//todo
curP.setAttribute("style", "padding-left: 1rem;")
//新增元素
let newParagraph = document.createElement("span");
newParagraph.setAttribute("contenteditable", "false");
newParagraph.innerHTML = preContent + ".&nbsp;"
curP.innerHTML = ""
curP.append(newParagraph);
curP.innerHTML = curP.innerHTML + historyContent
//收起选区到一个点，光标落在一个可编辑元素上
utils.GetSelection().collapse(curP, true)
}
}
//导出
exports.handle = handle;
});

18
static/js/event/impl/EnterEventImpl.js Normal file
View File

@ -0,0 +1,18 @@
"use strict";
/**
* 回车事件
*/
define(function (require, exports, module) {
function handle(e) {
const utils = require('../../common/utils');
let event = utils.ParseEvent(e);
let curEl = utils.GetEventTarget(event);
// console.log("Enter event", event, "\ncurEl: ", curEl)
}
//导出
exports.handle = handle;
});

34
static/js/event/impl/InputEventImpl.js Normal file
View File

@ -0,0 +1,34 @@
"use strict";
/**
* 输入事件
*/
define(function (require, exports, module) {
function handle(e) {
const utils = require('../../common/utils');
const event = utils.ParseEvent(e);
let curP = utils.GetEventTarget(e);
console.log("input : ", event,
"\ntext: '", event.data + "'"
, "\ncurP: ", curP)
let testDiv = document.getElementById("testDevice")
testDiv.innerText =
"\ninput: " + event.data + " isEmpty: " + (event.data === " ");
//更新内容
// this.updateText(curP)
//处理空行转换
if (event.data === " ") {
let emptyHandle = require("./EmptyInputEventImpl");
emptyHandle.handle(e);
}
}
//导出
exports.handle = handle;
});

42
static/js/event/impl/KeyDownEventImpl.js Normal file
View File

@ -0,0 +1,42 @@
"use strict";
/**
* 鼠标 keyDown 事件
*/
define(function (require, exports, module) {
function handle(e) {
const utils = require('../../common/utils')
const event = utils.ParseEvent(e);
let curP = utils.GetEventTarget(e);
const keyCode = utils.GetKeyCode(event);
const keyCombination = event.ctrlKey
const metaKey = event.metaKey
// console.log("keyDown : ", event,
// "\nevent.data: '", event.data + "'",
// "\nkeyCode: '", keyCode + "'"
// , "\ncurP: ", curP);
//支持全屏撤销
if (metaKey && keyCode === 90) {
// const cancelHandle = require('./CancelEventImpl')
// cancelHandle.handle(e);
return;
}
//回车事件,禁止处理。防止生成 div
if (keyCode === 13) {
// utils.ProhibitDefaultEvent(event);
}
//在鼠标按下的时候删除，体验更好
if (keyCode === 46 || keyCode === 8) {
// const delHandle = require('./DelEventImpl')
// delHandle.handle(e);
// return;
}
}
//导出
exports.handle = handle;
});

49
static/js/event/impl/KeyUpEventImpl.js Normal file
View File

@ -0,0 +1,49 @@
"use strict";
/**
* 鼠标 keyUp 事件
*/
define(function (require, exports, module) {
function handle(e) {
const utils = require('../../common/utils')
const event = utils.ParseEvent(e);
// console.log("this: ", this, e, e.target, "\n event: ", event)
const keyCode = utils.GetKeyCode(event);
const keyCombination = event.ctrlKey
const metaKey = event.metaKey
let curP = utils.GetEventTarget(e);
// console.log("键盘事件 ", event, keyCombination, metaKey, keyCode, "\ncurP: ", curP)
// ctrl + c 复制
if (keyCombination && keyCode === 67) {
// 阻止默认事件
// utils.ProhibitDefaultEvent(event);
// console.log('触发ctrl + c 事件', e.target)
}
//撤销
if (metaKey && keyCode === 90) {
// const cancelHandle = require('./CancelEventImpl')
// cancelHandle.handle(e);
return;
}
//删除
if (keyCode === 46 || keyCode === 8) {
//todo 什么也不处理
return;
}
//回车事件
if (keyCode === 13 /* && currentNode === key.lastElementChild */) {
// const enterHandle = require('./EnterEventImpl')
// enterHandle.handle(e);
// return;
}
}
//导出
exports.handle = handle;
});

33
static/js/event/impl/MouseDownEventImpl.js Normal file
View File

@ -0,0 +1,33 @@
"use strict";
/**
* 使用样式事件
*/
define(function (require, exports, module) {
function handle(e) {
const utils = require('../../common/utils');
const ctx = require('../../common/ctx');
const event = utils.ParseEvent(e);
let curElement = utils.GetEventTarget(event);
let id = curElement.getAttribute("id");
if (id !== "_style_utils") {
id = curElement.closest("#_style_utils").getAttribute("id");
}
console.log("mousedown: ", event,
"\ncurElement:", curElement,
"\nid : ", id)
//这里监听鼠标按下事件
// if (id === "_style_utils") {
// //阻止事件，for 应用 样式
// utils.ProhibitDefaultEvent(event);
// }
//阻止事件，for 应用 样式
utils.ProhibitDefaultEvent(event);
}
//导出
exports.handle = handle;
});

93
static/js/event/impl/MutationObserverImpl.js Normal file
View File

@ -0,0 +1,93 @@
"use strict";
/**
* 使用样式事件
*/
define(function (require, exports, module) {
function handle(mutationList) {
for (let mutation of mutationList) {
switch (mutation.type) {
case "childList":
addNewP(mutation);
break;
case "characterData":
updateText(mutation);
break;
default: {
other(mutation);
}
}
}
}
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);
}
function addNewP(mutation) {
let target = mutation.target;
if (target.nodeName === "DIV" && mutation.previousSibling !== null) {
console.log(
"target: ", target,
"\nnodeType: ", target.nodeType,
"\nnodeName: ", target.nodeName,
"\ndata: ", target.value,
"\n next: ", mutation.previousSibling.nextSibling
)
let utils = require("../../common/utils");
let ctx = require("../../common/ctx");
let curP = mutation.previousSibling.nextSibling;
if (curP !== undefined && curP !== null) {
curP.id = utils.Uuid(ctx.usn, ctx.docType);
curP.setAttribute("data-order", ctx.incrementNumThenReturn());
}
}
}
function updateText(mutation) {
let target = mutation.target;
if (target.nodeType === 3 && target.nodeName === "#text") {
// console.log(
// "target: ", target,
// "\nnodeType: ", target.nodeType,
// "\nnodeName: ", target.nodeName,
// "\ndata: ", target.value,
// "\nparentNode: ", target.parentNode,
// "\nparentNode_parentNode: ", target.parentNode.parentNode,
// )
// let curSpan = target.parentNode;
// let curP = target.parentNode.parentNode;
} else {
other(mutation);
}
}
//导出
exports.handle = handle;
});

13
static/js/event/impl/PasteEventImpl.js Normal file
View File

@ -0,0 +1,13 @@
"use strict";
/**
* 粘贴事件
*/
define(function (require, exports, module) {
function handle(event) {
}
//导出
exports.handle = handle;
});

103
static/js/event/impl/RSizeEventImpl.js Normal file
View File

@ -0,0 +1,103 @@
"use strict";
define(function (require, exports, module) {
function handle(e) {
const ctx = require("../../common/ctx");
let historyScreenW = ctx.screenWidth;
let curScreenW = ctx.getScreenWidth();
if (historyScreenW === curScreenW) {
return
}
//调整
refreshEditFrontSize()
refreshRootFrontSize();
//更新
ctx.screenWidth = ctx.getScreenWidth();
ctx.screenHeight = ctx.getScreenHeight();
}
/**
* 刷新跟节点 front-size
* @constructor
*/
function refreshRootFrontSize() {
const ctx = require("../../common/ctx");
let curDoc = document.documentElement;//当前文档的 root 元素
let curClientW = ctx.getScreenWidth();
if (!curClientW) {
return
}
let designWidth = ctx.designWith;
//set 1rem = viewWidth/10 (支持响应式)
let nowFrontSize = ((curClientW / designWidth) / 10) + 'px';
curDoc.style.fontSize = nowFrontSize;
console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize);
let testDiv = document.getElementById("testDevice");
testDiv.innerText += "\nnowFrontSize: " + nowFrontSize;
// testDiv.innerText = testDiv.innerText +
// // "\n navigator_userAgent :" + navigator.userAgent.toLocaleLowerCase() +
// "\n isMobile :" + /mobi|android|iphone|ipad|ipod/i.test(navigator.userAgent.toLocaleLowerCase()) +
// "\n isIOS :" + /iphone|ipad|ipod/.test(window.navigator.userAgent.toLocaleLowerCase()) +
// "\n isAndroid :" + /android/.test(window.navigator.userAgent.toLocaleLowerCase()) +
// "\n window.width :" + window.innerWidth +
// "\n curClientW :" + curClientW +
// " \n designWidth: " + designWidth +
// "\n 1rem = " + nowFrontSize;
}
function refreshEditFrontSize() {
const ctx = require("../../common/ctx");
let curClientW = ctx.getScreenWidth();
if (!curClientW) {
return
}
let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值
if (!dpr) {
//devicePixelRatio这个属性是可以获取到设备的dpr
let devicePixelRatio = win?.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;
}
}
let myEditFrontSize = document.getElementById("myEdit_main");
// if (document.documentElement.clientWidth <= 720) {
// myEditFrontSize.style.fontSize = (window.myEdit.ctx.editFrontSize + 6) + 'px';
// } else {
// myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize * dpr + 'px';
// }
// myEditFrontSize.style.fontSize = window.myEdit.ctx.editFrontSize * dpr + 'px';
if (ctx.isTablet) {
myEditFrontSize.style.fontSize = ctx.editFrontSize * dpr + 'px';
} else {
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;
}
//导出
exports.handle = handle;
exports.refreshEditFrontSize = refreshEditFrontSize;
});

22
static/js/index.js Normal file
View File

@ -0,0 +1,22 @@
"use strict";
define(function (require) {
const ctx = require('./common/ctx');
const eventListener = require('./event/MyEventListener')
const utils = require('./common/utils')
console.log("uuid1 -10 : ", utils.Uuid(ctx.usn));
// 初始化第一个输入框
let newParagraph = document.createElement("p");
//内置span
let span = document.createElement("span");
span.append(document.createElement("br"));
span.setAttribute("data-flag","span_content")
newParagraph.append(span);
//添加一行
ctx.MyRoot().append(newParagraph);
//收起选区到一个点，光标落在一个可编辑元素上
utils.GetSelection().setPosition(newParagraph, 0);
})

49
static/js/init.go
View File

@ -3,63 +3,72 @@ package js
import (
"embed"
"io/fs"
"os"
)
import _ "embed"
//go:embed */*/*.js
//go:embed *.js
var indexList embed.FS
//go:embed */*.js
var jsList embed.FS
//go:embed lib/main.js
var jsMain embed.FS
//go:embed event/impl/*
var eventImplJs embed.FS
var jsMap = initJsMap()
func initJsMap() map[string][]byte {
var dataMap = make(map[string][]byte)
//index.js
btData, _ := indexList.ReadFile("index.js")
dataMap["index.js"] = btData
btys, _ := jsMain.ReadFile("lib/main.js")
dataMap["lib/main.js"] = btys
list := initJsMapInner("lib/biz")
//eventImpl
list, err := eventImplJs.ReadDir("event/impl")
if err != nil {
panic(err)
return nil
}
if list != nil && len(list) > 0 {
for _, file := range list {
//读取配置文件
data, err := jsList.ReadFile("lib/biz/" + file.Name())
data, err := eventImplJs.ReadFile("event/impl/" + file.Name())
if err == nil {
dataMap["lib/biz/"+file.Name()] = data
dataMap["event/impl/"+file.Name()] = data
}
}
}
list = initJsMapInner("lib/common")
list = initJsMapInner("lib")
if list != nil && len(list) > 0 {
for _, file := range list {
//读取配置文件
data, err := jsList.ReadFile("lib/common/" + file.Name())
data, err := jsList.ReadFile("lib/" + file.Name())
if err == nil {
dataMap["lib/common/"+file.Name()] = data
dataMap["lib/"+file.Name()] = data
}
}
}
list = initJsMapInner("lib/event")
list = initJsMapInner("common")
if list != nil && len(list) > 0 {
for _, file := range list {
//读取配置文件
data, err := jsList.ReadFile("lib/event/" + file.Name())
data, err := jsList.ReadFile("common/" + file.Name())
if err == nil {
dataMap["lib/event/"+file.Name()] = data
dataMap["common/"+file.Name()] = data
}
}
}
list = initJsMapInner("lib/model")
list = initJsMapInner("event")
if list != nil && len(list) > 0 {
for _, file := range list {
//读取配置文件
data, err := jsList.ReadFile("lib/model/" + file.Name())
data, err := jsList.ReadFile("event/" + file.Name())
if err == nil {
dataMap["lib/model/"+file.Name()] = data
dataMap["event/"+file.Name()] = data
}
}
}
@ -70,7 +79,7 @@ func initJsMap() map[string][]byte {
func initJsMapInner(path string) []fs.DirEntry {
list, err := jsList.ReadDir(path)
if err != nil {
os.Exit(-1)
panic(err)
return nil
}

0
static/js/lib/biz/MyBiz.js → static/js/lib.old/biz/MyBiz.js
View File

0
static/js/lib/common/MyUtils.js → static/js/lib.old/common/MyUtils.js
View File

0
static/js/lib/event/MyEventListener.js → static/js/lib.old/event/MyEventListener.js
View File

0
static/js/lib/main.js → static/js/lib.old/main.js
View File

0
static/js/lib/model/InnerStyle.js → static/js/lib.old/model/InnerStyle.js
View File

0
static/js/lib/model/MyDocItem.js → static/js/lib.old/model/MyDocItem.js
View File

0
static/js/lib/model/MyKV.js → static/js/lib.old/model/MyKV.js
View File

0
static/js/lib/model/MyMapItem.js → static/js/lib.old/model/MyMapItem.js
View File

0
static/js/lib/model/MyRecovery.js → static/js/lib.old/model/MyRecovery.js
View File

0
static/js/lib/todolist → static/js/lib.old/todolist
View File

2
static/js/lib/sea.js Normal file
View File

File diff suppressed because one or more lines are too long

273
static/yanxuelu.html
View File

@ -7,149 +7,204 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>📒</title>
<meta name="viewport"
content="width=device-width, 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, 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 type="module" src="./js/lib/main.js"></script>
<script src="./js/lib/sea.js"></script>
<script>
seajs.config({
// base:'path',
// alias:{
// 'app':'path/app/'
// },
charset: 'utf-8',
// 下载文件最大时长。单位毫秒
timeout: 20000,
debug: false
})
seajs.use('./js/index.js');
</script>
<!-- <script src="./js/index.js" data-main="./init"></script>-->
</head>
<body>
<header>
<!-- 顶部 -->
<div class="fixStylePosition" id="_style_utils">
<div class="fixStyleOut">
<div style="display: flex;">
<div style="display: flex;">
<div>
<svg width="90rem" height="90rem" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="TextOutlined">
<path
<header>
<!-- 顶部 -->
<div id="head_top" style="font-size: 16px">
<div style="width:20%">测试</div>
<div style="width: 60%"></div>
<div style="width:20%">
<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>
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
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>
</svg>
</div>
<div>
<svg width="100rem" height="100rem" 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>
<div class="my-divider-item"></div>
<div style="display: flex;">
<div>
<svg width="100rem" height="100rem" 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="90rem" height="90rem" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
<svg width="100rem" height="100rem" 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>
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>
<div class="my-divider-item"></div>
<div style="display: flex;">
<div>
<svg width="90rem" height="90rem" 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"
<div class="my-divider-item"></div>
<div style="display: flex;">
<span class="fixStyleInnerSpan" data-k="font-weight" data-v="bold">
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
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>
</svg>
</div>
<div>
<svg width="90rem" height="90rem" 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"
</svg>
</span>
<span class="fixStyleInnerSpan" data-k="text-decoration" data-v="line-through">
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
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>
</svg>
</svg>
</span>
<span class="fixStyleInnerSpan" data-k="font-style" data-v="italic">
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
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>
</svg>
</span>
<span class="fixStyleInnerSpan" data-k="text-decoration,text-underline-offset"
data-v="underline,30rem">
<svg width="100rem" height="100rem" viewBox="0 0 24 24" fill="none"
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>
</svg>
</span>
</div>
</div>
<div class="my-divider-item"></div>
<div style="display: flex;">
<span class="fixStyleInnerSpan" data-value="b">
<svg width="90rem" height="90rem" viewBox="0 0 24 24"
fill="none"
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>
<div class="my-divider-item"></div>
<div>
<span class="fixStyleInnerSpan" data-k="color" data-v="blue">
<svg width="100rem" height="100rem" viewBox="0 0 240 240" version="1.1"
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>
<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>
</g>
</g>
</g>
</svg>
</span>
<span class="fixStyleInnerSpan" data-value="del">
<svg width="90rem" height="90rem"
viewBox="0 0 24 24" fill="none"
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>
<span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
<svg width="100rem" height="100rem" viewBox="0 0 256 256" version="1.1"
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="矩形">
<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>
<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>
</g>
</g>
</svg>
</span>
<span class="fixStyleInnerSpan" data-value="i">
<svg width="90rem" height="90rem" viewBox="0 0 24 24"
fill="none"
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>
</svg>
</span>
<span class="fixStyleInnerSpan" data-value="u">
<svg width="90rem" height="90rem" viewBox="0 0 24 24"
fill="none"
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>
</svg>
</span>
</div>
<div class="my-divider-item"></div>
<div>
</div>
<div class="my-divider-item"></div>
<div>
<span>
<svg width="90rem" height="90rem" viewBox="0 0 18 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
<svg width="100rem" height="100rem" viewBox="0 0 18 18" fill="none"
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>
</span>
</div>
</div>
<!-- <div class="my-divider-item"></div>-->
<!-- <div>-->
<!-- <button onclick="info(this)">info</button>-->
<!-- </div>-->
</div>
</div>
</header>
</header>
<main id="myEdit_main">
<!-- 标题 -->
<h3>
测试编辑
</h3>
<!-- 内容 -->
<div id="noteshare" contenteditable="true" spellcheck="false" translate="no">
</div>
</main>
<main id="myEdit_main">
<!-- 标题 -->
<h3 contenteditable="true">
测试编辑
</h3>
<!-- 内容 -->
<div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
</div>
</main>
<footer>
<footer>
</footer>
<div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%;"></div>
</footer>
<div id="testDiv" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
<div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%; display: block"></div>
<p style="font-size: 16px;">
<span><button onclick="plusPx()">+</button></span>
<span><button onclick="reducePx()">-</button></span>
</p>
</body>
<script>
function plusPx() {
window.myEdit.ctx.editFrontSize += 1;
window.myEdit.utils.RefreshEditFrontSize();
}
function reducePx() {
window.myEdit.ctx.editFrontSize += -1;
window.myEdit.utils.RefreshEditFrontSize();
}
</script>
</html>

155
static/yanxuelu.html.old Normal file
View File

@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- https://quilljs.com/docs/customization/registries -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>📒</title>
<meta name="viewport"
content="width=device-width, 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">-->
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
<link rel="stylesheet" type="text/css" href="./css/myEdit.css">
<script type="module" src="./js/lib/main.js"></script>
</head>
<body>
<header>
<!-- 顶部 -->
<div class="fixStylePosition" id="_style_utils">
<div class="fixStyleOut">
<div style="display: flex;">
<div style="display: flex;">
<div>
<svg width="90rem" height="90rem" viewBox="0 0 24 24" fill="none"
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>
</svg>
</div>
<div>
<svg width="90rem" height="90rem" 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>
<div class="my-divider-item"></div>
<div style="display: flex;">
<div>
<svg width="90rem" height="90rem" 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="90rem" height="90rem" 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;">
<span class="fixStyleInnerSpan" data-value="b">
<svg width="90rem" height="90rem" viewBox="0 0 24 24"
fill="none"
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>
</svg>
</span>
<span class="fixStyleInnerSpan" data-value="del">
<svg width="90rem" height="90rem"
viewBox="0 0 24 24" fill="none"
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>
</svg>
</span>
<span class="fixStyleInnerSpan" data-value="i">
<svg width="90rem" height="90rem" viewBox="0 0 24 24"
fill="none"
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>
</svg>
</span>
<span class="fixStyleInnerSpan" data-value="u">
<svg width="90rem" height="90rem" viewBox="0 0 24 24"
fill="none"
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>
</svg>
</span>
</div>
<div class="my-divider-item"></div>
<div>
<span>
<svg width="90rem" height="90rem" viewBox="0 0 18 18" fill="none"
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>
</svg>
</span>
</div>
<!-- <div class="my-divider-item"></div>-->
<!-- <div>-->
<!-- <button onclick="info(this)">info</button>-->
<!-- </div>-->
</div>
</div>
</header>
<main id="myEdit_main">
<!-- 标题 -->
<h3>
测试编辑
</h3>
<!-- 内容 -->
<div id="noteshare" contenteditable="true" spellcheck="false" translate="no">
</div>
</main>
<footer>
</footer>
<div id="testDevice" style="font-size: 16px; width: 300px;margin-left: 10%;"></div>
<p style="font-size: 16px;">
<span><button onclick="plusPx()">+</button></span>
<span><button onclick="reducePx()">-</button></span>
</p>
</body>
<script>
function plusPx() {
window.myEdit.ctx.editFrontSize += 1;
window.myEdit.utils.RefreshEditFrontSize();
}
function reducePx() {
window.myEdit.ctx.editFrontSize += -1;
window.myEdit.utils.RefreshEditFrontSize();
}
</script>
</html>