"use strict"; import {MyBiz} from './biz/MyBiz.js' import {MyUtils} from './common/MyUtils.js' import {MyEventListener} from "./event/MyEventListener.js"; (function () { //init window.myEdit = { /** * 优先初始化 工具 */ utils: new MyUtils(), /** * 其次初始化 事件监听 */ eventListener: new MyEventListener(), /** * ctx */ ctx: { /** * 是否是手机端 */ isMobile: /mobi|android|iphone|ipad|ipod/i.test(navigator.userAgent.toLocaleLowerCase()), isIOS: /iphone|ipad|ipod/.test(window.navigator.userAgent.toLocaleLowerCase()), isAndroid: /android/.test(window.navigator.userAgent.toLocaleLowerCase()), //高度 for android originHeight: document.documentElement.clientHeight || document.body.clientHeight, /** * 默认body front-size 单位px */ editFrontSize: 14, /** * 设计稿宽度 375 */ designWith: 1280, /** * 文档的根节点 */ MyRoot: null, /** * 文档的结构树 */ MyDocMap: new Map(), getMapItem: function (orderNo) { return this.MyDocMap.get(orderNo); }, /** * 最新修改的元素. 当前只支持撤销一次 */ latestOpDoc: null, /** * 行增加记录。 行号 */ rowNo: 0, incrementNumThenReturn: function () { return this.rowNo++; }, /** * 是否开始输入中文 */ inCompositionEvent: false, showTestText: function () { //显示用户的输入内容 let userInput = document.getElementById("testInput"); if (userInput) { let obj = {} for (let [k, v] of this.MyDocMap.entries()) { if (v["data-hidden"] && v["data-hidden"] === true) { continue } obj[k] = v } // console.log("userInput : ", userInput) userInput.innerText = JSON.stringify(obj) } } }, /** * 业务处理 */ biz: new MyBiz() } // 直接调用工具函数获取 A4 纸的像素尺寸 let a4_size = window.myEdit.utils.A4SizeInPixels(); window.myEdit.ctx.designWith = a4_size.width; /** * 业务处理 */ window.myEdit.biz = new MyBiz(); /** * 窗口重载&文档重载事件 for 响应式 */ window.myEdit.utils.RefreshRootFrontSize(); window.myEdit.utils.RefreshEditFrontSize(); document.addEventListener('DOMContentLoaded', window.myEdit.utils.RefreshRootFrontSize); document.addEventListener('DOMContentLoaded', window.myEdit.utils.RefreshEditFrontSize); window.addEventListener('pageshow', function (e) { if (e.persisted) { window.myEdit.utils.RefreshRootFrontSize(); window.myEdit.utils.RefreshEditFrontSize(); } }); window.addEventListener('resize', window.myEdit.utils.RefreshRootFrontSize); window.addEventListener('resize', window.myEdit.utils.RefreshEditFrontSize); /** * 窗口撤销事件. * js中的键盘事件只有三种:keydown、keyup、keypress。它们触发的顺序是:keydown -> keypress -> keyup。当按下一个键不放开,一般会重复地触发 keydown+keypress,直到放开后触发一个 keyup 事件。 * */ window.addEventListener('keydown', window.myEdit.eventListener.WindowsKeydownOrTouchendHandle, true); window.addEventListener('touchend', window.myEdit.eventListener.WindowsKeydownOrTouchendHandle, true); }()); /** * 加载完成后执行 */ window.onload = function () { //样式事件监听 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.onkeyup = 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.MouseUpOrTouchend, true); //监听手指抬起事件 document.getElementById("noteshare").addEventListener("touchend", window.myEdit.eventListener.MouseUpOrTouchend, true); //这里监听鼠标按下事件 document.getElementById("_style_utils").addEventListener("mousedown", function (e) { const event = window.myEdit.utils.ParseEvent(e); console.log("mousedown: ", event) window.myEdit.utils.ProhibitDefaultEvent(event); }, false); /** * 监听手机键盘 */ if (window.myEdit.ctx.isMobile) { if (window.myEdit.ctx.isIOS) { // window.addEventListener("") } else if (window.myEdit.ctx.isAndroid) { } } }