to:sync
This commit is contained in:
shaoyongjun
parent
a73c96f6fa
commit
07dcd13877
@ -15,6 +15,186 @@ body, html {
|
||||
|
||||
/*选中可编辑框是 外层隐藏黑线*/
|
||||
outline: none;
|
||||
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
.fontsize24,
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fontsize20,
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fontsize18,
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fontsize16,
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fontsize14,
|
||||
h5 {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fontsize12,
|
||||
h6 {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fllil li {
|
||||
float: left
|
||||
}
|
||||
|
||||
.fllir li {
|
||||
float: right
|
||||
}
|
||||
|
||||
.fl {
|
||||
float: left
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right
|
||||
}
|
||||
|
||||
.radius {
|
||||
border-radius: 100%
|
||||
}
|
||||
|
||||
.positionCenterLeft {
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto
|
||||
}
|
||||
|
||||
.positionCenterTop {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto
|
||||
}
|
||||
|
||||
.positionCenter {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto
|
||||
}
|
||||
|
||||
.distable {
|
||||
display: table
|
||||
}
|
||||
|
||||
.distablecell {
|
||||
display: table-cell;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.textels {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
|
||||
.marginCenter {
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.t_l {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.t_c {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.t_r {
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.unLine {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.fiexd {
|
||||
position: fixed
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
clear: both;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.o-hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block
|
||||
}
|
||||
|
||||
.lblock {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
html {
|
||||
@ -39,6 +219,7 @@ body {
|
||||
/*line-height: 1.5715;*/
|
||||
background-color: #fff;
|
||||
font-feature-settings: "tnum", "tnum";
|
||||
font-weight: normal;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -76,7 +257,7 @@ header {
|
||||
left: 0;
|
||||
/*right: 0;*/
|
||||
width: 100%;
|
||||
min-height: 58rem;
|
||||
/*min-height: 58rem;*/
|
||||
|
||||
/*background-color: #ffebc3;*/
|
||||
/*background-color: deepskyblue;*/
|
||||
@ -88,20 +269,6 @@ header {
|
||||
/*flex-wrap: nowrap;*/
|
||||
}
|
||||
|
||||
/*#head_top {*/
|
||||
/* width: 100%;*/
|
||||
/* height: 32rem;*/
|
||||
|
||||
/* 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: 16rem;*/
|
||||
/* display: flex;*/
|
||||
/* justify-content: space-around;*/
|
||||
/* align-items: center;*/
|
||||
/*}*/
|
||||
|
||||
.fixStylePosition {
|
||||
display: block;
|
||||
@ -123,33 +290,20 @@ header {
|
||||
/*height: 130rem;*/
|
||||
padding: 5rem 5rem;
|
||||
|
||||
font-size: 16rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/*align-content: center;*/
|
||||
/*flex-direction: column;*/
|
||||
/*align-items: center;*/
|
||||
/*justify-content: center;*/
|
||||
/*align-content: center;*/
|
||||
}
|
||||
|
||||
.fixStyleInnerSpan {
|
||||
margin: 0 3rem;
|
||||
}
|
||||
|
||||
#_position_more {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
#_show_more {
|
||||
margin: 1rem 0;
|
||||
font-size: 12rem;
|
||||
position: relative;
|
||||
top: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
/*border: 1px red solid;*/
|
||||
min-width: 5em;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
main {
|
||||
@ -158,7 +312,7 @@ main {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
margin-top: 20rem;
|
||||
margin-top: 30rem;
|
||||
/*min-height: 80%;*/
|
||||
|
||||
/*border: 1px greenyellow solid;*/
|
||||
@ -204,26 +358,6 @@ main {
|
||||
/*flex: 1 1 100%;*/
|
||||
}
|
||||
|
||||
/*#yxl_note p span[data-flag="span_pre"] {*/
|
||||
/* !*border: 1px red solid;*!*/
|
||||
/* !*min-width: 2em;*!*/
|
||||
/* width: fit-content;*/
|
||||
/* height: fit-content;*/
|
||||
/* margin: 0 0;*/
|
||||
/* text-indent: 0;*/
|
||||
/* padding: 0 0;*/
|
||||
|
||||
/* display: inline;*/
|
||||
|
||||
/* justify-content: flex-end;*/
|
||||
/* -moz-user-select: none;*/
|
||||
/* user-select: none;*/
|
||||
/* -webkit-user-select: none;*/
|
||||
|
||||
/* box-sizing: border-box;*/
|
||||
/* white-space: nowrap;*/
|
||||
/*}*/
|
||||
|
||||
#yxl_note p span[data-flag="span_content"] {
|
||||
/*border: 1px deepskyblue solid;*/
|
||||
margin: 0 0;
|
||||
@ -280,7 +414,7 @@ main {
|
||||
background-color: #e9e9eb;
|
||||
width: 1px;
|
||||
height: 18rem;
|
||||
margin: 0 6rem;
|
||||
margin: 0 3rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
|
||||
134
static/css/my_drop.css
Normal file
134
static/css/my_drop.css
Normal file
@ -0,0 +1,134 @@
|
||||
/*隐藏滑动黑条*/
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.my_style_nav {
|
||||
font-size: 14rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
padding: 0 0;
|
||||
min-width: 10rem;
|
||||
|
||||
/*border: 1px blue solid;*/
|
||||
}
|
||||
|
||||
|
||||
.my_style_nav ul {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
/*left: 0;*/
|
||||
top: 26rem;
|
||||
|
||||
/*height: 0;*/
|
||||
/*width: 60rem;*/
|
||||
transform: translate(1em, 0rem);
|
||||
|
||||
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
/*justify-content: center;*/
|
||||
/*align-content: center;*/
|
||||
|
||||
/*opacity: 0;*/
|
||||
/*min-height: 70rem;*/
|
||||
max-height: 120rem;
|
||||
/*overflow: hidden;*/
|
||||
overflow: auto;
|
||||
|
||||
padding: 5rem 0;
|
||||
border-radius: 5rem;
|
||||
box-shadow: 0 40rem 80rem rgba(31, 35, 41, 0.1);
|
||||
background-color: rgb(255, 255, 255);
|
||||
border: 1px #f5f5f5 solid;
|
||||
}
|
||||
|
||||
|
||||
.my_style_nav ul li {
|
||||
float: none;
|
||||
/*过渡代码*/
|
||||
transition: all .3s;
|
||||
background-color: rgb(255, 255, 255);
|
||||
/*opacity: 0;*/
|
||||
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
padding: 2rem 5rem;
|
||||
min-width: 55rem;
|
||||
/*border-radius: 5rem;*/
|
||||
/*min-width: 45rem;*/
|
||||
|
||||
/*border: 1px blue solid;*/
|
||||
|
||||
display: flex;
|
||||
/*flex-direction: column;*/
|
||||
/*align-items: center;*/
|
||||
justify-content: flex-end;
|
||||
/*align-content: center;*/
|
||||
|
||||
}
|
||||
|
||||
.my_style_nav ul li span {
|
||||
min-width: 20rem;
|
||||
}
|
||||
|
||||
/*.my_style_nav ul li.done::before{*/
|
||||
/* */
|
||||
/*}*/
|
||||
|
||||
.my_style_nav ul li[data-my-select="true"]::before {
|
||||
content: attr(data-my-select-v);
|
||||
width: 1.2em;
|
||||
transform: rotate(-3deg);
|
||||
|
||||
|
||||
/*content: "";*/
|
||||
/*border-color: black;*/
|
||||
/*border-style: solid;*/
|
||||
/*border-width: 0 0.1em 0.1em 0;*/
|
||||
/*height: 1em;*/
|
||||
/*width: 0.5em;*/
|
||||
/*transform: rotate(50deg);*/
|
||||
/*top: 1em;*/
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
/*!*奇数项初始往右边偏移100%*!*/
|
||||
/*.my_style_nav ul li:nth-of-type(1n) {*/
|
||||
/* transform: translate3d(100%, 0, 0);*/
|
||||
/*}*/
|
||||
/*!*偶数项初始往左边偏移100%*!*/
|
||||
/*.my_style_nav ul li:nth-of-type(2n) {*/
|
||||
/* transform: translate3d(-100%, 0, 0);*/
|
||||
/*}*/
|
||||
|
||||
/*.my_style_nav:focus ul {*/
|
||||
/* overflow: visible;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
.my_style_nav span {
|
||||
min-width: 14rem;
|
||||
min-height: 20rem;
|
||||
padding: 0 1rem;
|
||||
/*border: 1px red solid;*/
|
||||
}
|
||||
|
||||
/*透明度和互动同时进行*/
|
||||
.my_style_nav span:hover {
|
||||
/*background: whitesmoke;*/
|
||||
border-radius: 5rem;
|
||||
}
|
||||
|
||||
/*兄弟 ul*/
|
||||
.my_style_nav span:hover + ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.my_style_nav ul:hover {
|
||||
display: flex;
|
||||
}
|
||||
201
static/css/reset.css
Normal file
201
static/css/reset.css
Normal file
@ -0,0 +1,201 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 100%;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none
|
||||
}
|
||||
|
||||
address,
|
||||
caption,
|
||||
cite,
|
||||
code,
|
||||
dfn,
|
||||
em,
|
||||
strong,
|
||||
th,
|
||||
var {
|
||||
font-style: normal;
|
||||
font-weight: 400
|
||||
}
|
||||
|
||||
fieldset,
|
||||
img {
|
||||
border: 0
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: none
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
.fontsize24,
|
||||
h1 {
|
||||
font-size: 24px
|
||||
}
|
||||
|
||||
.fontsize20,
|
||||
h2 {
|
||||
font-size: 20px
|
||||
}
|
||||
|
||||
.fontsize18,
|
||||
h3 {
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.fontsize16,
|
||||
h4 {
|
||||
font-size: 16px
|
||||
}
|
||||
|
||||
.fontsize14,
|
||||
h5 {
|
||||
font-size: 14px
|
||||
}
|
||||
|
||||
.fontsize12,
|
||||
h6 {
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.fllil li {
|
||||
float: left
|
||||
}
|
||||
|
||||
.fllir li {
|
||||
float: right
|
||||
}
|
||||
|
||||
.fl {
|
||||
float: left
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right
|
||||
}
|
||||
|
||||
.radius {
|
||||
border-radius: 100%
|
||||
}
|
||||
|
||||
.positionCenterLeft {
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto
|
||||
}
|
||||
|
||||
.positionCenterTop {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto
|
||||
}
|
||||
|
||||
.positionCenter {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto
|
||||
}
|
||||
|
||||
.distable {
|
||||
display: table
|
||||
}
|
||||
|
||||
.distablecell {
|
||||
display: table-cell;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.textels {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
|
||||
.marginCenter {
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.t_l {
|
||||
text-align: left
|
||||
}
|
||||
|
||||
.t_c {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.t_r {
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.unLine {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.fiexd {
|
||||
position: fixed
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
clear: both;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.o-hidden {
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block
|
||||
}
|
||||
|
||||
.lblock {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
vertical-align: middle
|
||||
}
|
||||
@ -9,13 +9,32 @@ define(function (require, exports, module) {
|
||||
console.log(("ctx init"));
|
||||
|
||||
//可以修改的
|
||||
let editFrontSize = localStorage.getItem('editFrontSize');
|
||||
let editFrontSize = localStorage.getItem('refreshEditFrontSize');
|
||||
if (editFrontSize !== undefined && editFrontSize !== null) {
|
||||
this.editFrontSize = editFrontSize;
|
||||
} else {
|
||||
this.editFrontSize = 14;
|
||||
}
|
||||
|
||||
//refreshPFontSize
|
||||
let refreshPFontSize = localStorage.getItem('refreshPFontSize');
|
||||
if (refreshPFontSize !== undefined && refreshPFontSize !== null) {
|
||||
this.refreshPFontSize = refreshPFontSize;
|
||||
} else {
|
||||
this.refreshPFontSize = {
|
||||
"font-weight": "normal",
|
||||
"font-size": "defaultFontSize",
|
||||
};
|
||||
}
|
||||
|
||||
//refreshEditBgColor
|
||||
let refreshEditBgColor = localStorage.getItem('refreshEditBgColor');
|
||||
if (refreshEditBgColor !== undefined && refreshEditBgColor !== null) {
|
||||
this.refreshEditBgColor = refreshEditBgColor;
|
||||
} else {
|
||||
this.refreshEditBgColor = null;
|
||||
}
|
||||
|
||||
this.usn = "syjSyj";
|
||||
this.docType = 0;
|
||||
|
||||
|
||||
@ -168,7 +168,33 @@ define(function (require, exports, module) {
|
||||
}
|
||||
//textContent 性能 准确性更好
|
||||
return element.textContent || element.innerText;
|
||||
},
|
||||
|
||||
GetDpr() {
|
||||
//获取屏幕像素密度
|
||||
let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值
|
||||
if (!dpr) {
|
||||
//devicePixelRatio这个属性是可以获取到设备的dpr
|
||||
let devicePixelRatio = window?.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;
|
||||
}
|
||||
}
|
||||
return dpr;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
@ -74,10 +74,6 @@ define(function (require, exports, module) {
|
||||
}
|
||||
|
||||
|
||||
//+/-
|
||||
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)
|
||||
|
||||
//::before
|
||||
//样式事件监听
|
||||
@ -88,13 +84,19 @@ define(function (require, exports, module) {
|
||||
myBeforeStyleList[i].addEventListener('click', this.ApplyMyBeforeStyleListener, false);
|
||||
}
|
||||
}
|
||||
|
||||
//监听下拉事件
|
||||
let dropStyleList = document.querySelectorAll(".my_style_nav ul");
|
||||
for (let i = 0; i < dropStyleList.length; i++) {
|
||||
dropStyleList[i].addEventListener("click", this.DropDownStyleSelectListener, false);
|
||||
}
|
||||
}
|
||||
|
||||
AdjustMyFontSize(e) {
|
||||
const handle = require('./impl/AdjustMyFontSizeEventImpl');
|
||||
handle.handle(e);
|
||||
DropDownStyleSelectListener(e) {
|
||||
require('./impl/DropDownStyleSelectEventImpl').handle(e);
|
||||
}
|
||||
|
||||
|
||||
Mousedown(e) {
|
||||
const handle = require('./impl/MouseDownEventImpl');
|
||||
handle.handle(e);
|
||||
|
||||
@ -1,53 +0,0 @@
|
||||
"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
|
||||
}
|
||||
|
||||
console.log("curId : ", curId, " target: ", curEl)
|
||||
if (curId === null) { //防止点击到 path
|
||||
let tmpSvg = curEl.parentElement.closest("span");
|
||||
if (tmpSvg !== undefined && tmpSvg !== null) {
|
||||
curId = tmpSvg.getAttribute("id");
|
||||
}
|
||||
}
|
||||
if (curId === "my_fontSize+") {
|
||||
if (ctx.editFrontSize >= 72) {
|
||||
ctx.editFrontSize = 72;
|
||||
} else {
|
||||
ctx.editFrontSize++;
|
||||
}
|
||||
} else {
|
||||
if (ctx.editFrontSize <= 12) {
|
||||
ctx.editFrontSize = 12
|
||||
} else {
|
||||
ctx.editFrontSize--;
|
||||
}
|
||||
}
|
||||
|
||||
//触发resize
|
||||
let resizeImp = require("./RSizeEventImpl");
|
||||
resizeImp.refreshEditFrontSize();
|
||||
|
||||
//保存在本地
|
||||
localStorage.setItem('editFrontSize', ctx.editFrontSize);
|
||||
//show
|
||||
document.getElementById("cur_my_font_size").textContent = ctx.editFrontSize + "px"
|
||||
}
|
||||
|
||||
//导出
|
||||
exports.handle = handle;
|
||||
});
|
||||
153
static/js/event/impl/DropDownStyleSelectEventImpl.js
Normal file
153
static/js/event/impl/DropDownStyleSelectEventImpl.js
Normal file
@ -0,0 +1,153 @@
|
||||
"use strict";
|
||||
/**
|
||||
* 拷贝事件
|
||||
*/
|
||||
define(function (require, exports, module) {
|
||||
|
||||
function handle(e) {
|
||||
const utils = require("../../common/utils");
|
||||
let event = utils.ParseEvent(e);
|
||||
let target = utils.GetEventTarget(event);
|
||||
console.log("target: ", target, target.tagName)
|
||||
if (target.tagName === "SPAN") {
|
||||
target = target.parentElement;
|
||||
console.log("cur_target: ", target, target.tagName)
|
||||
}
|
||||
if (target.tagName === "LI") {
|
||||
let curLi = target;
|
||||
//处理 下拉选择/取消选择
|
||||
let myParent = curLi.parentElement;
|
||||
let dataMySelectV = myParent.getAttribute("data-my-select-v");
|
||||
let liList = myParent.querySelectorAll("li");
|
||||
for (let i = 0; i < liList.length; i++) {
|
||||
let tmpLi = liList[i];
|
||||
if (tmpLi.textContent === curLi.textContent) {
|
||||
tmpLi.setAttribute("data-my-select", "true");
|
||||
tmpLi.setAttribute("data-my-select-v", dataMySelectV);
|
||||
tmpLi.style.setProperty("background-color", "#f0f0f0");
|
||||
continue;
|
||||
}
|
||||
|
||||
tmpLi.setAttribute("data-my-select", "false");
|
||||
tmpLi.removeAttribute("data-my-select-v");
|
||||
tmpLi.style.removeProperty("background-color");
|
||||
}
|
||||
|
||||
|
||||
//refreshPFontSize ; refreshEditFrontSize ; refreshEditColor ; refreshEditBgColor; other
|
||||
let dataMyStyleType = myParent.getAttribute("data-my-style-type");
|
||||
switch (dataMyStyleType) {
|
||||
case "refreshPFontSize":
|
||||
refreshPFontSize(target);
|
||||
break;
|
||||
case "refreshEditFrontSize":
|
||||
refreshEditFrontSize(target);
|
||||
break;
|
||||
case "refreshEditColor":
|
||||
refreshEditColor(target);
|
||||
break
|
||||
case "refreshEditBgColor":
|
||||
refreshEditBgColor(target);
|
||||
break
|
||||
default :
|
||||
console.log("暂时不支持")
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function refreshEditColor(curLi) {
|
||||
const ctx = require("../../common/ctx");
|
||||
const utils = require("../../common/utils");
|
||||
let select = utils.GetSelection();
|
||||
let curP = select.anchorNode.parentElement.closest("p");
|
||||
let dataMySelectK = curLi.getAttribute("data-my-style-k");
|
||||
let dataMySelectV = curLi.getAttribute("data-my-style-v");
|
||||
|
||||
let tSpan = curLi.parentElement.parentElement.previousElementSibling;
|
||||
console.log("refreshEditColor ", dataMySelectK, dataMySelectV, tSpan, tSpan.getAttribute("data-v"))
|
||||
|
||||
tSpan.setAttribute("data-v", dataMySelectV)
|
||||
|
||||
}
|
||||
|
||||
function refreshEditBgColor(curLi) {
|
||||
const ctx = require("../../common/ctx");
|
||||
const utils = require("../../common/utils");
|
||||
let select = utils.GetSelection();
|
||||
let curP = select.anchorNode.parentElement.closest("p");
|
||||
let dataMySelectK = curLi.getAttribute("data-my-style-k");
|
||||
let dataMySelectV = curLi.getAttribute("data-my-style-v");
|
||||
|
||||
let tSpan = curLi.parentElement.parentElement.previousElementSibling;
|
||||
console.log("refreshEditBgColor ", dataMySelectK, dataMySelectV, tSpan, tSpan.getAttribute("data-v"))
|
||||
|
||||
tSpan.setAttribute("data-v", dataMySelectV)
|
||||
}
|
||||
|
||||
function refreshPFontSize(curLi) {
|
||||
const ctx = require("../../common/ctx");
|
||||
const utils = require("../../common/utils");
|
||||
let select = utils.GetSelection();
|
||||
let curP = select.anchorNode.parentElement.closest("p");
|
||||
let dataMySelectK = curLi.getAttribute("data-my-style-k");
|
||||
let dataMySelectV = curLi.getAttribute("data-my-style-v");
|
||||
|
||||
let kList = dataMySelectK.toString().split(",");
|
||||
let vList = dataMySelectV.toString().split(",");
|
||||
let total = kList.length;
|
||||
let num = 0;
|
||||
for (let i = 0; i < kList.length; i++) {
|
||||
if (curP.style.getPropertyValue(kList[i]) === vList[i]) {
|
||||
num++;
|
||||
}
|
||||
|
||||
if (vList[i] === "defaultFontSize") {
|
||||
let myEditFrontSize = document.getElementById("myEdit_main");
|
||||
curP.style.setProperty(kList[i], myEditFrontSize.style.fontSize);
|
||||
} else {
|
||||
curP.style.setProperty(kList[i], vList[i]);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//移除
|
||||
if (total === num) {
|
||||
for (let j = 0; j < kList.length; j++) {
|
||||
curP.style.removeProperty(kList[j]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function refreshEditFrontSize(curLi) {
|
||||
const ctx = require("../../common/ctx");
|
||||
const utils = require("../../common/utils");
|
||||
let curStyleV = curLi.getAttribute("data-my-style-v");
|
||||
//设置当前的尺寸
|
||||
ctx.editFrontSize = curStyleV;
|
||||
let curClientW = ctx.getScreenWidth();
|
||||
if (!curClientW) {
|
||||
return
|
||||
}
|
||||
//字体尺寸 https://www.shejidaren.com/zihao-daxiao-sheji-bilv.html
|
||||
//12～72 px 建议最大字体是48px
|
||||
let dpr = utils.GetDpr();
|
||||
let myEditFrontSize = document.getElementById("myEdit_main");
|
||||
if (ctx.isTablet) {
|
||||
myEditFrontSize.style.fontSize = ctx.editFrontSize * dpr + 'px';
|
||||
} else {
|
||||
myEditFrontSize.style.fontSize = ctx.editFrontSize + 'px';
|
||||
}
|
||||
|
||||
console.log("refreshEditFrontSize ", curLi, curStyleV,
|
||||
"\nctx.editFrontSize: ", ctx.editFrontSize)
|
||||
|
||||
//保存在本地 refreshEditFrontSize
|
||||
localStorage.setItem('refreshEditFrontSize', ctx.editFrontSize);
|
||||
//show
|
||||
document.getElementById("cur_my_font_size").textContent = ctx.editFrontSize + "px"
|
||||
}
|
||||
|
||||
//导出
|
||||
exports.handle = handle;
|
||||
});
|
||||
@ -26,7 +26,7 @@ define(function (require, exports, module) {
|
||||
}
|
||||
|
||||
function other(mutation) {
|
||||
console.log("other ", mutation)
|
||||
// console.log("other ", mutation)
|
||||
// console.log("other -> mutation : ", mutation,
|
||||
// // 观察的变动类型（attributes、characterData或者childList）。
|
||||
// "\ntype", mutation.type,
|
||||
@ -55,14 +55,14 @@ define(function (require, exports, module) {
|
||||
// target.clone()
|
||||
if (target.nodeName === "DIV" && mutation.previousSibling !== null) {
|
||||
let newParagraph = mutation.previousSibling.nextSibling;
|
||||
console.log(
|
||||
"addNewP target: ", target,
|
||||
"\nnodeType: ", target.nodeType,
|
||||
"\nnodeName: ", target.nodeName,
|
||||
"\ndata: ", target.value,
|
||||
"\n next: ", newParagraph,
|
||||
"\ncurRowNo: ", ctx.getCurRowNo()
|
||||
)
|
||||
// console.log(
|
||||
// "addNewP target: ", target,
|
||||
// "\nnodeType: ", target.nodeType,
|
||||
// "\nnodeName: ", target.nodeName,
|
||||
// "\ndata: ", target.value,
|
||||
// "\n next: ", newParagraph,
|
||||
// "\ncurRowNo: ", ctx.getCurRowNo()
|
||||
// )
|
||||
if (newParagraph !== undefined && newParagraph !== null) {
|
||||
newParagraph.id = utils.Uuid(ctx.usn, ctx.docType);
|
||||
let curNo = ctx.incrementNumThenReturn();
|
||||
@ -165,7 +165,7 @@ define(function (require, exports, module) {
|
||||
lastSpan = tmpSpan;
|
||||
}
|
||||
//选区调整
|
||||
console.log("lastSpan : ", lastSpan)
|
||||
// console.log("lastSpan : ", lastSpan)
|
||||
utils.GetSelection().setPosition(lastSpan, 1);
|
||||
} else {
|
||||
console.log("TODO 暂时不支持")
|
||||
|
||||
@ -24,6 +24,7 @@ define(function (require, exports, module) {
|
||||
*/
|
||||
function refreshRootFrontSize() {
|
||||
const ctx = require("../../common/ctx");
|
||||
const utils = require("../../common/utils");
|
||||
let designWidth = ctx.designWith;
|
||||
let curDoc = document.documentElement;//当前文档的 root 元素
|
||||
let curClientW = ctx.getScreenWidth();
|
||||
@ -38,7 +39,7 @@ define(function (require, exports, module) {
|
||||
ctx.MyRoot().style.width = "100%";
|
||||
}
|
||||
|
||||
let dpr = getDpr();
|
||||
let dpr = utils.GetDpr();
|
||||
//set 1rem = curClientW / designWidth (支持响应式)
|
||||
let nowFrontSize = '1px';
|
||||
if (ctx.isTablet || ctx.isMobile || ctx.isIOS || ctx.isAndroid) {
|
||||
@ -47,10 +48,21 @@ define(function (require, exports, module) {
|
||||
nowFrontSize = (curClientW / designWidth) + 'px';
|
||||
}
|
||||
|
||||
console.log(
|
||||
"\nuserAgent: ", window.navigator.userAgent,
|
||||
"\nisTablet: ", ctx.isTablet,
|
||||
"\nisMobile: ", ctx.isMobile,
|
||||
"\nisIOS: ", ctx.isIOS,
|
||||
"\nisAndroid: ", ctx.isAndroid,
|
||||
"\nwindow.innerWidth: ", window.innerWidth,
|
||||
"\ngetScreenWidth: ", ctx.getScreenWidth(),
|
||||
"curClientW : ", curClientW,
|
||||
"\ndesignWidth: ", designWidth,
|
||||
"\n1rem = ", nowFrontSize,
|
||||
"\nnowFrontSize: ", nowFrontSize);
|
||||
// curDoc.style.fontSize = dpr * nowFrontSize;
|
||||
curDoc.style.fontSize = nowFrontSize;
|
||||
|
||||
console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize);
|
||||
curDoc.style.fontSize = nowFrontSize;
|
||||
// let testDiv = document.getElementById("testDevice");
|
||||
// testDiv.innerText += "\ncurClientW: " + curClientW;
|
||||
// testDiv.innerText += "\ndesignWith: " + designWidth;
|
||||
@ -69,33 +81,10 @@ define(function (require, exports, module) {
|
||||
|
||||
}
|
||||
|
||||
function getDpr() {
|
||||
//获取屏幕像素密度
|
||||
let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值
|
||||
if (!dpr) {
|
||||
//devicePixelRatio这个属性是可以获取到设备的dpr
|
||||
let devicePixelRatio = window?.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;
|
||||
}
|
||||
}
|
||||
return dpr;
|
||||
}
|
||||
|
||||
function refreshEditFrontSize() {
|
||||
const ctx = require("../../common/ctx");
|
||||
const utils = require("../../common/utils");
|
||||
let curClientW = ctx.getScreenWidth();
|
||||
if (!curClientW) {
|
||||
return
|
||||
@ -103,7 +92,7 @@ define(function (require, exports, module) {
|
||||
//字体尺寸 https://www.shejidaren.com/zihao-daxiao-sheji-bilv.html
|
||||
//12～72 px 建议最大字体是48px
|
||||
|
||||
let dpr = getDpr();
|
||||
let dpr = utils.GetDpr();
|
||||
|
||||
let myEditFrontSize = document.getElementById("myEdit_main");
|
||||
if (ctx.isTablet) {
|
||||
@ -113,7 +102,19 @@ define(function (require, exports, module) {
|
||||
}
|
||||
|
||||
//show
|
||||
document.getElementById("cur_my_font_size").textContent = ctx.editFrontSize + "px"
|
||||
let curMyFontSizeEl = document.getElementById("cur_my_font_size");
|
||||
curMyFontSizeEl.textContent = ctx.editFrontSize + "px";
|
||||
//更新默认值
|
||||
let liList = curMyFontSizeEl.parentElement.nextElementSibling.querySelectorAll("ul li");
|
||||
for (let i = 0; i < liList.length; i++) {
|
||||
let tmpLi = liList[i];
|
||||
if (tmpLi.getAttribute("data-my-style-v") === ctx.editFrontSize) {
|
||||
tmpLi.setAttribute("data-my-select", "true");
|
||||
tmpLi.setAttribute("data-my-select-v", tmpLi.parentElement.getAttribute("data-my-select-v"));
|
||||
} else {
|
||||
tmpLi.removeAttribute("data-my-select");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
"use strict";
|
||||
define(function (require) {
|
||||
const isDebug = false; // 控制是否屏蔽全局console.log 日志；isDebug设为false即可屏蔽
|
||||
console.log = (function (oldLogFunc) {
|
||||
return function () {
|
||||
if (isDebug) {
|
||||
oldLogFunc.apply(this, arguments);
|
||||
}
|
||||
}
|
||||
})(console.log);
|
||||
|
||||
const ctx = require('./common/ctx');
|
||||
const eventListener = require('./event/MyEventListener')
|
||||
const utils = require('./common/utils')
|
||||
|
||||
@ -11,7 +11,9 @@
|
||||
<!-- 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 src="./js/lib/sea.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="./css/my_drop.css">
|
||||
<!-- <script src="./js/lib/sea.js"></script>-->
|
||||
<script src="https://www.mylomen.com/js/lib/sea.js"></script>
|
||||
<script>
|
||||
seajs.config({
|
||||
// base:'path',
|
||||
@ -32,56 +34,43 @@
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<!-- 顶部 -->
|
||||
<!-- <div id="head_top" style="font-size: 12rem">-->
|
||||
<!-- <div>测试</div>-->
|
||||
<!-- <div></div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <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; align-items: center">
|
||||
<!-- <div>-->
|
||||
<!-- <svg width="10rem" height="10rem" 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>-->
|
||||
<span id="my_fontSize-" style=" transform: rotate(90deg); align-content: center;
|
||||
border-radius: 3rem;
|
||||
background-color:lightgrey;">
|
||||
<svg width="10rem" height="10rem" 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>
|
||||
</span>
|
||||
<div style="margin: 0 2rem">
|
||||
<span id="cur_my_font_size" style="font-size: 14px">14px</span>
|
||||
</div>
|
||||
<span id="my_fontSize+" style=" transform: rotate(-90deg); align-content: center;
|
||||
margin-left: 2rem;
|
||||
border-radius: 3rem;
|
||||
background-color: lightgrey;">
|
||||
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
||||
|
||||
<!-- 字体 -->
|
||||
<div style="display: flex;">
|
||||
<span>
|
||||
<svg width="10rem" height="10rem" 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>
|
||||
</span>
|
||||
<div class="my_style_nav">
|
||||
<span>
|
||||
<svg width="8rem" height="8rem" 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>
|
||||
</span>
|
||||
<ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshPFontSize">
|
||||
<li data-my-select="true" data-my-select-v="✔" data-my-style-k="font-weight,font-size"
|
||||
data-my-style-v="normal,defaultFontSize"><span>正文</span>
|
||||
</li>
|
||||
<li data-my-style-k="font-weight,font-size" data-my-style-v="500,24px"><span>H1</span></li>
|
||||
<li data-my-style-k="font-weight,font-size" data-my-style-v="500,20px"><span>H2</span></li>
|
||||
<li data-my-style-k="font-weight,font-size" data-my-style-v="500,18px"><span>H3</span></li>
|
||||
<li data-my-style-k="font-weight,font-size" data-my-style-v="500,16px"><span>H4</span></li>
|
||||
<li data-my-style-k="font-weight,font-size" data-my-style-v="500,14px"><span>H5</span></li>
|
||||
<li data-my-style-k="font-weight,font-size" data-my-style-v="500,12px"><span>H6</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="my-divider-item"></div>
|
||||
|
||||
<div style="display: flex;">
|
||||
@ -93,14 +82,6 @@
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<!-- <div>-->
|
||||
<!-- <svg width="10rem" height="10rem" 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 style="width: 10rem"></div>
|
||||
<div>
|
||||
@ -152,7 +133,8 @@
|
||||
</div>
|
||||
|
||||
<div class="my-divider-item"></div>
|
||||
<div>
|
||||
|
||||
<div style="display: flex; ">
|
||||
<span class="fixStyleInnerSpan" data-k="color" data-v="blue">
|
||||
<svg width="10rem" height="10rem" viewBox="0 0 240 240" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
@ -173,6 +155,34 @@
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<span class="my_style_nav">
|
||||
<span>
|
||||
<svg width="8rem" height="8rem" 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>
|
||||
</span>
|
||||
<ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshEditColor">
|
||||
<li data-my-select="true" data-my-select-v="✔" data-my-style-k="color"
|
||||
data-my-style-v="white">
|
||||
<span>无色</span>
|
||||
</li>
|
||||
<li data-my-style-k="color" data-my-style-v="red"><span style="color: red">红色</span></li>
|
||||
<li data-my-style-k="color" data-my-style-v="#edce02"><span style="color: #edce02">黄色</span>
|
||||
</li>
|
||||
<li data-my-style-k="color" data-my-style-v="blue"><span style="color: blue">蓝色</span></li>
|
||||
<li data-my-style-k="color" data-my-style-v="black"><span style="color: black">黑色</span>
|
||||
</li>
|
||||
<li data-my-style-k="color" data-my-style-v="gray"><span style="color: gray">灰色</span></li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
|
||||
<svg width="10rem" height="10rem" viewBox="0 0 256 256" version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
@ -199,10 +209,64 @@
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<span class="my_style_nav">
|
||||
<span>
|
||||
<svg width="8rem" height="8rem" 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>
|
||||
</span>
|
||||
<ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshEditBgColor">
|
||||
<li data-my-select="true" data-my-select-v="✔" data-my-style-k="background-color"
|
||||
data-my-style-v="transparent">
|
||||
<span>空白</span>
|
||||
</li>
|
||||
<li data-my-style-k="background-color" data-my-style-v="lightcoral"><span
|
||||
style="color: lightcoral">浅红</span></li>
|
||||
<li data-my-style-k="background-color" data-my-style-v="#fff897"><span
|
||||
style="color: #fff897">浅黄</span>
|
||||
</li>
|
||||
<li data-my-style-k="background-color" data-my-style-v="lightblue"><span
|
||||
style="color: lightblue">浅蓝</span></li>
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="my-divider-item"></div>
|
||||
<div style="display: flex; flex-direction:column; align-items: flex-end">
|
||||
<div style="display: flex;margin: 0 0; ">
|
||||
<span>
|
||||
<span id="cur_my_font_size" style="font-size: 14px">14px</span>
|
||||
</span>
|
||||
|
||||
<div class="my_style_nav">
|
||||
<span>
|
||||
<svg width="8rem" height="8rem" 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>
|
||||
</span>
|
||||
|
||||
<ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshEditFrontSize">
|
||||
<li data-my-style-k="font-size" data-my-style-v="12"><span>12px</span></li>
|
||||
<li data-my-style-k="font-size" data-my-style-v="14"><span>14px</span></li>
|
||||
<li data-my-style-k="font-size" data-my-style-v="16"><span>16px</span></li>
|
||||
<li data-my-style-k="font-size" data-my-style-v="18"><span>18px</span></li>
|
||||
<li data-my-style-k="font-size" data-my-style-v="20"><span>21px</span></li>
|
||||
<li data-my-style-k="font-size" data-my-style-v="24"><span>24px</span></li>
|
||||
<li data-my-style-k="font-size" data-my-style-v="36"><span>36px</span></li>
|
||||
<li data-my-style-k="font-size" data-my-style-v="48"><span>48px</span></li>
|
||||
<li data-my-style-k="font-size" data-my-style-v="60"><span>60px</span></li>
|
||||
<li data-my-style-k="font-size" data-my-style-v="72"><span>72px</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>
|
||||
<svg width="10rem" height="10rem" viewBox="0 0 18 18" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
@ -210,28 +274,14 @@
|
||||
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>
|
||||
|
||||
|
||||
<!-- <ul class="menu fllil" data-my-select-v="✔" data-my-style-type="other">-->
|
||||
<!-- <li data-my-select="true" data-my-select-v="✔">h1</li>-->
|
||||
<!-- <li>h2</li>-->
|
||||
<!-- <li>h3</li>-->
|
||||
<!-- <li>h4</li>-->
|
||||
<!-- <li>h5</li>-->
|
||||
<!-- </ul>-->
|
||||
</span>
|
||||
|
||||
<div id="_position_more">
|
||||
<div id="_show_more">
|
||||
<!-- <div id="my_fontSize0">-->
|
||||
<!-- cls-->
|
||||
<!-- </div>-->
|
||||
<!-- <div>-->
|
||||
<!-- <span id="my_fontSize-" style="border: 1px red solid; min-width: 2em">-</span>-->
|
||||
<!-- <span style="border: 1px red solid;">14px</span>-->
|
||||
<!-- <span id="my_fontSize+" style="border: 1px red solid; min-width: 6rem">+</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div style="display: flex;align-content:space-between;">-->
|
||||
<!-- <span>-->
|
||||
<!-- <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-icon="PrinterOutlined"><path d="M18.788 10.74a.97.97 0 1 1-1.94 0 .97.97 0 0 1 1.94 0Z" fill="currentColor"></path><path d="M6.5 1.333h11c1.15 0 1.97.967 1.967 1.967v3.367h.29a2.91 2.91 0 0 1 2.91 2.909v5.814c0 1.11-.976 1.943-1.937 1.943h-1.942v3.394c0 1.07-.956 1.94-1.94 1.94H7.153c-1.063 0-1.94-.942-1.94-1.94v-3.394h-1.94c-.932 0-1.942-.833-1.938-1.94V9.577a2.91 2.91 0 0 1 2.909-2.91h.29V3.3c0-1.05.867-1.97 1.967-1.967Zm11.027 5.334V3.273H6.473v3.394h11.054ZM5.212 15.394v-.485c0-1.088.945-1.94 1.94-1.94h9.697c1.077 0 1.94.973 1.94 1.94v.485h1.938V9.576a.97.97 0 0 0-.97-.97H4.244a.97.97 0 0 0-.97.97v5.818h1.94Zm1.94-.485v5.818h9.697V14.91H7.152Z" fill="currentColor"></path></svg>-->
|
||||
<!-- </span>-->
|
||||
<!-- <span>打印</span>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user