Compare commits
No commits in common. "4c4ba596fb3283bbc38fa127211f7780a53c251e" and "72f80f06bda0fd223390fa1d9f11b323f1b9385a" have entirely different histories.
4c4ba596fb
...
72f80f06bd
@ -15,186 +15,6 @@ body, html {
|
|||||||
|
|
||||||
/*选中可编辑框是 外层隐藏黑线*/
|
/*选中可编辑框是 外层隐藏黑线*/
|
||||||
outline: none;
|
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 {
|
html {
|
||||||
@ -214,12 +34,9 @@ body {
|
|||||||
color: #262626;
|
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-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;
|
font-variant: tabular-nums;
|
||||||
|
line-height: 1.5715;
|
||||||
/* 行高设置*/
|
|
||||||
/*line-height: 1.5715;*/
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
font-feature-settings: "tnum", "tnum";
|
font-feature-settings: "tnum", "tnum";
|
||||||
font-weight: normal;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -257,7 +74,7 @@ header {
|
|||||||
left: 0;
|
left: 0;
|
||||||
/*right: 0;*/
|
/*right: 0;*/
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/*min-height: 58rem;*/
|
min-height: 58rem;
|
||||||
|
|
||||||
/*background-color: #ffebc3;*/
|
/*background-color: #ffebc3;*/
|
||||||
/*background-color: deepskyblue;*/
|
/*background-color: deepskyblue;*/
|
||||||
@ -269,6 +86,20 @@ header {
|
|||||||
/*flex-wrap: nowrap;*/
|
/*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: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.fixStylePosition {
|
.fixStylePosition {
|
||||||
display: block;
|
display: block;
|
||||||
@ -290,20 +121,14 @@ header {
|
|||||||
/*height: 130rem;*/
|
/*height: 130rem;*/
|
||||||
padding: 5rem 5rem;
|
padding: 5rem 5rem;
|
||||||
|
|
||||||
font-size: 16rem;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
/*align-content: center;*/
|
/*align-content: center;*/
|
||||||
/*flex-direction: column;*/
|
|
||||||
/*align-items: center;*/
|
|
||||||
/*justify-content: center;*/
|
|
||||||
/*align-content: center;*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixStyleInnerSpan {
|
.fixStyleInnerSpan {
|
||||||
margin: 0 1rem;
|
margin: 0 8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
@ -312,7 +137,7 @@ main {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
margin-top: 30rem;
|
margin-top: 58rem;
|
||||||
/*min-height: 80%;*/
|
/*min-height: 80%;*/
|
||||||
|
|
||||||
/*border: 1px greenyellow solid;*/
|
/*border: 1px greenyellow solid;*/
|
||||||
@ -332,7 +157,7 @@ main {
|
|||||||
/*响应式*/
|
/*响应式*/
|
||||||
/*display: flex;*/
|
/*display: flex;*/
|
||||||
/*flex-direction:column;*/
|
/*flex-direction:column;*/
|
||||||
/*flex-wrap: wrap;*/
|
/*flex-wrap: nowrap;*/
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -340,64 +165,19 @@ main {
|
|||||||
/*border: 1px rgb(248, 245, 245) solid;*/
|
/*border: 1px rgb(248, 245, 245) solid;*/
|
||||||
margin: 0 0;
|
margin: 0 0;
|
||||||
padding: 0 0;
|
padding: 0 0;
|
||||||
/*padding: 0 0;*/
|
|
||||||
/* border: none; */
|
/* border: none; */
|
||||||
|
|
||||||
/* 字符之间的间距 */
|
|
||||||
letter-spacing: normal;
|
|
||||||
height: fit-content;
|
|
||||||
|
|
||||||
line-height: inherit;
|
|
||||||
|
|
||||||
/*布局*/
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: baseline;
|
|
||||||
/*padding-left: 2em;*/
|
|
||||||
/*响应式*/
|
/*响应式*/
|
||||||
/*flex: 1 1 100%;*/
|
flex: 1 1 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#yxl_note p span[data-flag="span_content"] {
|
#yxl_note p span{
|
||||||
/*border: 1px deepskyblue solid;*/
|
/*border: 1px rgb(248, 245, 245) solid;*/
|
||||||
margin: 0 0;
|
margin: 0 0;
|
||||||
padding: 0 0;
|
padding: 0 0;
|
||||||
/* border: none; */
|
/* border: none; */
|
||||||
|
|
||||||
display: inline;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
/*缩进2个字符的距离*/
|
|
||||||
text-indent: 2em;
|
|
||||||
|
|
||||||
&:empty::before {
|
|
||||||
content: attr(placeholder);
|
|
||||||
/*font-size: 14rem;*/
|
|
||||||
color: #CCC;
|
|
||||||
/*line-height: 21rem;*/
|
|
||||||
/*padding-top: 20rem;*/
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#my-title {
|
|
||||||
&:empty::before {
|
|
||||||
content: '请输入标题';
|
|
||||||
color: #CCC;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#yxl_note p span[data-before-style="my-li-content"]::before {
|
|
||||||
content: attr(my-li-content);
|
|
||||||
/*border: 1px rgb(0, 140, 255) solid;*/
|
|
||||||
-webkit-transform: scale(1.375);
|
|
||||||
transform: scale(1.375);
|
|
||||||
|
|
||||||
margin: 0 0;
|
|
||||||
padding: 0 0;
|
|
||||||
|
|
||||||
/*display: compact;*/
|
|
||||||
/*width: 2em;*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#testInput {
|
#testInput {
|
||||||
@ -409,22 +189,19 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: inherit;
|
color: antiquewhite;
|
||||||
/*color: antiquewhite;*/
|
background-color: cadetblue;
|
||||||
/*background-color: cadetblue;*/
|
text-shadow: #00a9ff;
|
||||||
background-color: rgba(27, 162, 227, .2);
|
|
||||||
/*background-color: #d6e0fe;*/
|
|
||||||
/*text-shadow: #00a9ff;*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-divider-item {
|
.my-divider-item {
|
||||||
background-color: #e9e9eb;
|
background-color: #e9e9eb;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 18rem;
|
height: 18rem;
|
||||||
margin: 0 3rem;
|
margin: 0 6rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,134 +0,0 @@
|
|||||||
/*隐藏滑动黑条*/
|
|
||||||
::-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;
|
|
||||||
}
|
|
||||||
@ -1,201 +0,0 @@
|
|||||||
* {
|
|
||||||
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
|
|
||||||
}
|
|
||||||
@ -2,8 +2,8 @@
|
|||||||
define(function (require, exports, module) {
|
define(function (require, exports, module) {
|
||||||
class A4Utils {
|
class A4Utils {
|
||||||
constructor() {
|
constructor() {
|
||||||
// let dpi = this.GetDPI();
|
let dpi = this.GetDPI();
|
||||||
// console.log("dpi: ", dpi)
|
console.log("dpi: ", dpi)
|
||||||
//A0纸尺寸841mm×1189mm
|
//A0纸尺寸841mm×1189mm
|
||||||
//
|
//
|
||||||
// A1纸尺寸594mm×841mm
|
// A1纸尺寸594mm×841mm
|
||||||
@ -25,11 +25,10 @@ define(function (require, exports, module) {
|
|||||||
// A9纸尺寸37mm×52mm
|
// A9纸尺寸37mm×52mm
|
||||||
let width_mm = 210; // A4纸宽度，单位：毫米
|
let width_mm = 210; // A4纸宽度，单位：毫米
|
||||||
let height_mm = 297; // A4纸高度，单位：毫米
|
let height_mm = 297; // A4纸高度，单位：毫米
|
||||||
// let width_px = this.MmToPixel(width_mm, dpi);
|
let width_px = this.MmToPixel(width_mm, dpi);
|
||||||
// let height_px = this.MmToPixel(height_mm, dpi);
|
let height_px = this.MmToPixel(height_mm, dpi);
|
||||||
// this.width = width_px;
|
this.width = width_px;
|
||||||
this.width = 750; //按照iphone6
|
this.height = height_px;
|
||||||
// this.height = height_px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -47,7 +46,7 @@ define(function (require, exports, module) {
|
|||||||
// tempDiv.style.left = "0px"
|
// tempDiv.style.left = "0px"
|
||||||
document.body.appendChild(tempDiv);
|
document.body.appendChild(tempDiv);
|
||||||
let dpi = tempDiv.offsetWidth;
|
let dpi = tempDiv.offsetWidth;
|
||||||
alert(123)
|
// alert(123)
|
||||||
document.body.removeChild(tempDiv);
|
document.body.removeChild(tempDiv);
|
||||||
return dpi;
|
return dpi;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -9,60 +9,13 @@ define(function (require, exports, module) {
|
|||||||
console.log(("ctx init"));
|
console.log(("ctx init"));
|
||||||
|
|
||||||
//可以修改的
|
//可以修改的
|
||||||
let editFrontSize = localStorage.getItem('refreshEditFrontSize');
|
let editFrontSize = localStorage.getItem('editFrontSize');
|
||||||
if (editFrontSize !== undefined && editFrontSize !== null) {
|
if (editFrontSize !== undefined && editFrontSize !== null) {
|
||||||
this.editFrontSize = editFrontSize;
|
this.editFrontSize = editFrontSize;
|
||||||
} else {
|
} else {
|
||||||
this.editFrontSize = 14;
|
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",
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
//refreshEditColor
|
|
||||||
let refreshEditColor = localStorage.getItem('refreshEditColor');
|
|
||||||
if (refreshEditColor !== undefined && refreshEditColor !== null) {
|
|
||||||
this.refreshEditColor = refreshEditColor;
|
|
||||||
} else {
|
|
||||||
this.refreshEditColor = "black";
|
|
||||||
}
|
|
||||||
let refreshEditColorLiList = document.querySelectorAll(".my_style_nav ul[data-my-style-type='refreshEditColor'] li");
|
|
||||||
for (let i = 0; i < refreshEditColorLiList.length; i++) {
|
|
||||||
let tmpLi=refreshEditColorLiList[i];
|
|
||||||
if (tmpLi.getAttribute("data-my-style-v") === this.refreshEditColor) {
|
|
||||||
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");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//refreshEditBgColor
|
|
||||||
let refreshEditBgColor = localStorage.getItem('refreshEditBgColor');
|
|
||||||
if (refreshEditBgColor !== undefined && refreshEditBgColor !== null) {
|
|
||||||
this.refreshEditBgColor = refreshEditBgColor;
|
|
||||||
} else {
|
|
||||||
this.refreshEditBgColor = "transparent";
|
|
||||||
}
|
|
||||||
let refreshEditBgColorLiList = document.querySelectorAll(".my_style_nav ul[data-my-style-type='refreshEditBgColor'] li");
|
|
||||||
for (let i = 0; i < refreshEditBgColorLiList.length; i++) {
|
|
||||||
let tmpLi=refreshEditBgColorLiList[i];
|
|
||||||
if (tmpLi.getAttribute("data-my-style-v") === this.refreshEditBgColor) {
|
|
||||||
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");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.usn = "syjSyj";
|
this.usn = "syjSyj";
|
||||||
this.docType = 0;
|
this.docType = 0;
|
||||||
|
|
||||||
|
|||||||
@ -163,38 +163,9 @@ define(function (require, exports, module) {
|
|||||||
* @constructor
|
* @constructor
|
||||||
*/
|
*/
|
||||||
GetText(element) {
|
GetText(element) {
|
||||||
if (element === null || element === undefined) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
//textContent 性能 准确性更好
|
//textContent 性能 准确性更好
|
||||||
return element.textContent || element.innerText;
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -54,12 +54,6 @@ define(function (require, exports, module) {
|
|||||||
document.getElementById("yxl_note").addEventListener('compositionend',
|
document.getElementById("yxl_note").addEventListener('compositionend',
|
||||||
this.CompositionendListener);
|
this.CompositionendListener);
|
||||||
|
|
||||||
// 注册光标移动事件
|
|
||||||
// document.getElementById("yxl_note").addEventListener('selectionchange', function (e) {
|
|
||||||
// console.log("注册光标移动事件", window.Selection)
|
|
||||||
// }, false);
|
|
||||||
|
|
||||||
|
|
||||||
//这里监听鼠标按下事件
|
//这里监听鼠标按下事件
|
||||||
document.getElementById("_style_utils").addEventListener("mousedown", this.Mousedown, false);
|
document.getElementById("_style_utils").addEventListener("mousedown", this.Mousedown, false);
|
||||||
|
|
||||||
@ -74,28 +68,16 @@ define(function (require, exports, module) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//+/-
|
||||||
//::before
|
document.getElementById("my_fontSize+").addEventListener("click", this.AdjustMyFontSize, true)
|
||||||
//样式事件监听
|
document.getElementById("my_fontSize-").addEventListener("click", this.AdjustMyFontSize, true)
|
||||||
let myBeforeStyleList = document.getElementsByClassName("my_before_style");
|
document.getElementById("my_fontSize0").addEventListener("click", this.AdjustMyFontSize, true)
|
||||||
// console.log("styleList : ", styleList);
|
|
||||||
if (myBeforeStyleList && myBeforeStyleList.length > 0) {
|
|
||||||
for (let i = 0; i < myBeforeStyleList.length; i++) {
|
|
||||||
myBeforeStyleList[i].addEventListener('click', this.ApplyMyBeforeStyleListener, false);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//监听下拉事件
|
AdjustMyFontSize(e) {
|
||||||
let dropStyleList = document.querySelectorAll(".my_style_nav ul");
|
const handle = require('./impl/AdjustMyFontSizeEventImpl');
|
||||||
for (let i = 0; i < dropStyleList.length; i++) {
|
handle.handle(e);
|
||||||
dropStyleList[i].addEventListener("click", this.DropDownStyleSelectListener, false);
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
DropDownStyleSelectListener(e) {
|
|
||||||
require('./impl/DropDownStyleSelectEventImpl').handle(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
Mousedown(e) {
|
Mousedown(e) {
|
||||||
const handle = require('./impl/MouseDownEventImpl');
|
const handle = require('./impl/MouseDownEventImpl');
|
||||||
@ -113,16 +95,6 @@ define(function (require, exports, module) {
|
|||||||
handle.handle(e);
|
handle.handle(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* :: before 样式
|
|
||||||
* @param e
|
|
||||||
* @constructor
|
|
||||||
*/
|
|
||||||
ApplyMyBeforeStyleListener(e) {
|
|
||||||
const handle = require('./impl/BeforeStyleEventImpl');
|
|
||||||
handle.handle(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @param {*} e
|
* @param {*} e
|
||||||
@ -178,7 +150,7 @@ define(function (require, exports, module) {
|
|||||||
* @constructor
|
* @constructor
|
||||||
*/
|
*/
|
||||||
RSizeListener(e) {
|
RSizeListener(e) {
|
||||||
// console.log("RSizeListener : ", e);
|
console.log("RSizeListener : ", e);
|
||||||
let handle = require("./impl/RSizeEventImpl");
|
let handle = require("./impl/RSizeEventImpl");
|
||||||
handle.handle(e);
|
handle.handle(e);
|
||||||
}
|
}
|
||||||
|
|||||||
34
static/js/event/impl/AdjustMyFontSizeEventImpl.js
Normal file
34
static/js/event/impl/AdjustMyFontSizeEventImpl.js
Normal 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;
|
||||||
|
});
|
||||||
@ -1,152 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
/**
|
|
||||||
* 拷贝事件
|
|
||||||
*/
|
|
||||||
define(function (require, exports, module) {
|
|
||||||
|
|
||||||
function handle(event) {
|
|
||||||
let utils = require("../../common/utils");
|
|
||||||
let curS = utils.GetSelection();
|
|
||||||
let curRange = curS.getRangeAt(0); //只考虑一个选区场景
|
|
||||||
let curNode = utils.GetEventTarget(event);
|
|
||||||
console.dir(curS)
|
|
||||||
//只处理选择的是一个范围。
|
|
||||||
// if (curS.type !== "Range") {
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
//选区信息
|
|
||||||
console.dir(curS)
|
|
||||||
console.dir(curRange)
|
|
||||||
|
|
||||||
//获取样式
|
|
||||||
let styleK = curNode.getAttribute("data-k");
|
|
||||||
let styleV = curNode.getAttribute("data-v");
|
|
||||||
if (styleK === undefined || styleK === null) {
|
|
||||||
styleK = curNode.closest("span").getAttribute("data-k");
|
|
||||||
styleV = curNode.closest("span").getAttribute("data-v");
|
|
||||||
// console.log("closest: ", curNode, curNode.closest("span"))
|
|
||||||
}
|
|
||||||
console.log("before styleK: ", styleK, " styleV: ", styleV);
|
|
||||||
|
|
||||||
//获取开始结束的区域
|
|
||||||
let curStartContainerEle = curRange.startContainer;
|
|
||||||
let curEndContainerEle = curRange.endContainer;
|
|
||||||
let taskMap = new Map;
|
|
||||||
let start = curRange.startOffset;
|
|
||||||
let end = curRange.endOffset;
|
|
||||||
if (start > end) {
|
|
||||||
let tmpS = start;
|
|
||||||
start = end;
|
|
||||||
end = tmpS;
|
|
||||||
}
|
|
||||||
|
|
||||||
//处理选区数量
|
|
||||||
let pStart = getSpanContentOfP(curStartContainerEle);
|
|
||||||
let pEnd = getSpanContentOfP(curEndContainerEle);
|
|
||||||
console.dir(curStartContainerEle)
|
|
||||||
console.dir(curEndContainerEle)
|
|
||||||
console.dir(pStart)
|
|
||||||
console.dir(pEnd)
|
|
||||||
if (pStart.getAttribute("id") === pEnd.getAttribute("id")) {
|
|
||||||
taskMap.set(pStart.getAttribute("id"), pStart)
|
|
||||||
} else {
|
|
||||||
//修正顺序
|
|
||||||
let tmp = pStart;
|
|
||||||
if (parseInt(pStart.getAttribute("data-order")) > parseInt(pEnd.getAttribute("data-order"))) {
|
|
||||||
pStart = pEnd;
|
|
||||||
pEnd = tmp;
|
|
||||||
}
|
|
||||||
//fill p
|
|
||||||
let nextTask = pStart;
|
|
||||||
taskMap.set(nextTask.getAttribute("id"), nextTask)
|
|
||||||
while (true) {
|
|
||||||
nextTask = nextTask.nextSibling;
|
|
||||||
taskMap.set(nextTask.getAttribute("id"), nextTask)
|
|
||||||
if (nextTask.getAttribute("id") === pEnd.getAttribute("id")) {
|
|
||||||
break
|
|
||||||
}
|
|
||||||
console.dir(nextTask)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//选择单行还是多行
|
|
||||||
let total = taskMap.size;
|
|
||||||
let hadNum = 0;
|
|
||||||
console.dir(taskMap)
|
|
||||||
let doneNum = 0;
|
|
||||||
|
|
||||||
let curTxtIndent = CalCurTextIndent(pStart);
|
|
||||||
for (let [key, curP] of taskMap) {
|
|
||||||
let curSpanContent = curP.querySelector("span[data-flag='span_content']");
|
|
||||||
console.log("curP : ", curP, "\n", "\nkey:", key, "\ncurSpanContent: ", curSpanContent,
|
|
||||||
"\npreEle: ", curP.previousElementSibling);
|
|
||||||
|
|
||||||
//设置属性 展示 ::before
|
|
||||||
curSpanContent.setAttribute("data-before-style", styleK);
|
|
||||||
//无序
|
|
||||||
if (styleV === "ol") {
|
|
||||||
let tmpV = curSpanContent.getAttribute(styleK);
|
|
||||||
if (tmpV !== undefined && tmpV !== null) {
|
|
||||||
hadNum++;
|
|
||||||
} else {
|
|
||||||
curSpanContent.style.setProperty("text-indent", curTxtIndent + "em");
|
|
||||||
curSpanContent.setAttribute(styleK, "• ");
|
|
||||||
}
|
|
||||||
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
//有序
|
|
||||||
if (styleV === "ul") {
|
|
||||||
let tmpV = curSpanContent.getAttribute(styleK);
|
|
||||||
if (tmpV !== undefined && tmpV !== null) {
|
|
||||||
hadNum++;
|
|
||||||
} else {
|
|
||||||
curSpanContent.style.setProperty("text-indent", curTxtIndent + "em");
|
|
||||||
//::before
|
|
||||||
doneNum++;
|
|
||||||
curSpanContent.setAttribute(styleK, doneNum + "• ");
|
|
||||||
}
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 如果全部已经设置好了 则取消
|
|
||||||
if (total === hadNum) {
|
|
||||||
for (let [key, curP] of taskMap) {
|
|
||||||
let curSpanContent = curP.querySelector("span[data-flag='span_content']");
|
|
||||||
curSpanContent.removeAttribute(styleK);
|
|
||||||
curSpanContent.removeAttribute("data-before-style");
|
|
||||||
curSpanContent.style.setProperty("text-indent", "2em");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
function CalCurTextIndent(curP) {
|
|
||||||
let preP = curP.previousElementSibling;
|
|
||||||
let curTxtIndent = 4;
|
|
||||||
if (preP !== null) {
|
|
||||||
let preSpanContent = preP.querySelector("span[data-flag='span_content']");
|
|
||||||
if (preSpanContent !== null) {
|
|
||||||
let txtIndent = preSpanContent.style.getPropertyValue("text-indent");
|
|
||||||
console.log("txtIndent : ", txtIndent, preSpanContent)
|
|
||||||
if (txtIndent !== null && txtIndent !== "") {
|
|
||||||
curTxtIndent = parseInt(txtIndent.replace("em", "")) + 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return curTxtIndent;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getSpanContentOfP(item) {
|
|
||||||
let tmp = item;
|
|
||||||
if (item.nodeName !== "SPAN" || item.getAttribute("data-flag") !== "span_content") {
|
|
||||||
tmp = item.parentElement.closest("span[data-flag='span_content']");
|
|
||||||
}
|
|
||||||
return tmp.parentNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
//导出
|
|
||||||
exports.handle = handle;
|
|
||||||
});
|
|
||||||
@ -6,23 +6,6 @@
|
|||||||
define(function (require, exports, module) {
|
define(function (require, exports, module) {
|
||||||
|
|
||||||
function handle(event) {
|
function handle(event) {
|
||||||
const ctx = require("../../common/ctx");
|
|
||||||
const utils = require("../../common/utils");
|
|
||||||
let target = utils.GetEventTarget(event);
|
|
||||||
// console.log("删除元素是 ", target);
|
|
||||||
|
|
||||||
//禁止删除最后一行
|
|
||||||
let allPList = target.querySelectorAll("p");
|
|
||||||
if (allPList.length === 1) {
|
|
||||||
let lastOneSpan = allPList[0].querySelector("span[data-flag='span_content']")
|
|
||||||
let lastOneSpanTxt = utils.GetText(lastOneSpan);
|
|
||||||
if (lastOneSpanTxt === "\n") {
|
|
||||||
utils.ProhibitDefaultEvent(event);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handle2(event) {
|
|
||||||
const ctx = require("../../common/ctx");
|
const ctx = require("../../common/ctx");
|
||||||
const utils = require("../../common/utils");
|
const utils = require("../../common/utils");
|
||||||
const MyRecovery = require("../../common/MyRecovery");
|
const MyRecovery = require("../../common/MyRecovery");
|
||||||
@ -67,7 +50,7 @@ define(function (require, exports, module) {
|
|||||||
let curS = utils.GetSelection();
|
let curS = utils.GetSelection();
|
||||||
// console.log("当前内容: ", curP.innerHTML, " 当前选区 ：", curS)
|
// console.log("当前内容: ", curP.innerHTML, " 当前选区 ：", curS)
|
||||||
//处理前面没有内容，后面还有内容需要拼接到上层的场景
|
//处理前面没有内容，后面还有内容需要拼接到上层的场景
|
||||||
if ((curS.isCollapsed && curS.anchorOffset === 0) || curP.innerHTML === ' ') {
|
if ((curS.isCollapsed && curS.anchorOffset === 0) || curP.innerHTML === '<br>') {
|
||||||
let curNodeRetainHtml = curP.innerHTML
|
let curNodeRetainHtml = curP.innerHTML
|
||||||
//阻止事件传递
|
//阻止事件传递
|
||||||
utils.ProhibitDefaultEvent(event);
|
utils.ProhibitDefaultEvent(event);
|
||||||
@ -83,7 +66,7 @@ define(function (require, exports, module) {
|
|||||||
}
|
}
|
||||||
emptyRowNoList.push(cNo);
|
emptyRowNoList.push(cNo);
|
||||||
//拼接
|
//拼接
|
||||||
if (curNodeRetainHtml !== ' ') {
|
if (curNodeRetainHtml !== '<br>') {
|
||||||
previousSibling.innerHTML = previousSibling.innerHTML + curNodeRetainHtml
|
previousSibling.innerHTML = previousSibling.innerHTML + curNodeRetainHtml
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,156 +0,0 @@
|
|||||||
"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);
|
|
||||||
|
|
||||||
//保存在本地 refreshEditColor
|
|
||||||
localStorage.setItem('refreshEditColor', 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);
|
|
||||||
//保存在本地 refreshEditBgColor
|
|
||||||
localStorage.setItem('refreshEditBgColor', 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;
|
|
||||||
});
|
|
||||||
@ -8,13 +8,6 @@ define(function (require, exports, module) {
|
|||||||
const utils = require('../../common/utils');
|
const utils = require('../../common/utils');
|
||||||
let event = utils.ParseEvent(e);
|
let event = utils.ParseEvent(e);
|
||||||
let curEl = utils.GetEventTarget(event);
|
let curEl = utils.GetEventTarget(event);
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function handleOld(e) {
|
|
||||||
const utils = require('../../common/utils');
|
|
||||||
let event = utils.ParseEvent(e);
|
|
||||||
let curEl = utils.GetEventTarget(event);
|
|
||||||
|
|
||||||
utils.ProhibitDefaultEvent(event);
|
utils.ProhibitDefaultEvent(event);
|
||||||
let select = utils.GetSelection();
|
let select = utils.GetSelection();
|
||||||
|
|||||||
@ -35,9 +35,9 @@ define(function (require, exports, module) {
|
|||||||
|
|
||||||
//在鼠标按下的时候删除，体验更好
|
//在鼠标按下的时候删除，体验更好
|
||||||
if (keyCode === 46 || keyCode === 8) {
|
if (keyCode === 46 || keyCode === 8) {
|
||||||
const delHandle = require('./DelEventImpl')
|
// const delHandle = require('./DelEventImpl')
|
||||||
delHandle.handle(e);
|
// delHandle.handle(e);
|
||||||
return;
|
// return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -26,115 +26,96 @@ define(function (require, exports, module) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function other(mutation) {
|
function other(mutation) {
|
||||||
// console.log("other ", mutation)
|
console.log("mutation : ", mutation,
|
||||||
// console.log("other -> mutation : ", mutation,
|
// 观察的变动类型（attributes、characterData或者childList）。
|
||||||
// // 观察的变动类型（attributes、characterData或者childList）。
|
"\ntype", mutation.type,
|
||||||
// "\ntype", mutation.type,
|
//发生变动的DOM节点。
|
||||||
// //发生变动的DOM节点。
|
"\ntarget", mutation.target,
|
||||||
// "\ntarget", mutation.target, mutation.target.nodeName, mutation.previousSibling,
|
"\ntargetParent", mutation.target.parentElement, mutation.target.parentNode,
|
||||||
// "\ntargetParent", mutation.target.parentElement, mutation.target.parentNode,
|
//新增的DOM节点。
|
||||||
// //新增的DOM节点。
|
"\naddedNodes", mutation.addedNodes,
|
||||||
// "\naddedNodes", mutation.addedNodes,
|
//删除的DOM节点。
|
||||||
// //删除的DOM节点。
|
"\nremovedNodes", mutation.removedNodes,
|
||||||
// "\nremovedNodes", mutation.removedNodes,
|
//前一个同级节点，如果没有则返回null。
|
||||||
// //前一个同级节点，如果没有则返回null。
|
"\npreviousSibling", mutation.previousSibling,
|
||||||
// "\npreviousSibling", mutation.previousSibling,
|
//下一个同级节点，如果没有则返回null。
|
||||||
// //下一个同级节点，如果没有则返回null。
|
"\nnextSibling", mutation.nextSibling,
|
||||||
// "\nnextSibling", mutation.nextSibling,
|
//发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
|
||||||
// //发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
|
"\nattributeName", mutation.attributeName,
|
||||||
// "\nattributeName", mutation.attributeName,
|
//变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。
|
||||||
// //变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。
|
"\noldValue", mutation.oldValue);
|
||||||
// "\noldValue", mutation.oldValue);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function addNewP(mutation) {
|
function addNewP(mutation) {
|
||||||
let ctx = require("../../common/ctx");
|
|
||||||
let utils = require("../../common/utils");
|
|
||||||
//div 下新增p元素
|
//div 下新增p元素
|
||||||
let target = mutation.target;
|
let target = mutation.target;
|
||||||
// target.clone()
|
// target.clone()
|
||||||
if (target.nodeName === "DIV" && mutation.previousSibling !== null) {
|
if (target.nodeName === "DIV" && mutation.previousSibling !== null) {
|
||||||
|
let utils = require("../../common/utils");
|
||||||
|
let ctx = require("../../common/ctx");
|
||||||
let newParagraph = mutation.previousSibling.nextSibling;
|
let newParagraph = mutation.previousSibling.nextSibling;
|
||||||
// console.log(
|
console.log(
|
||||||
// "addNewP target: ", target,
|
"addNewP target: ", target,
|
||||||
// "\nnodeType: ", target.nodeType,
|
"\nnodeType: ", target.nodeType,
|
||||||
// "\nnodeName: ", target.nodeName,
|
"\nnodeName: ", target.nodeName,
|
||||||
// "\ndata: ", target.value,
|
"\ndata: ", target.value,
|
||||||
// "\n next: ", newParagraph,
|
"\n next: ", newParagraph,
|
||||||
// "\ncurRowNo: ", ctx.getCurRowNo()
|
"\ncurRowNo: ", ctx.getCurRowNo()
|
||||||
// )
|
)
|
||||||
if (newParagraph !== undefined && newParagraph !== null) {
|
if (newParagraph !== undefined && newParagraph !== null) {
|
||||||
newParagraph.id = utils.Uuid(ctx.usn, ctx.docType);
|
newParagraph.id = utils.Uuid(ctx.usn, ctx.docType);
|
||||||
let curNo = ctx.incrementNumThenReturn();
|
newParagraph.setAttribute("data-order", ctx.incrementNumThenReturn());
|
||||||
newParagraph.setAttribute("data-order", curNo);
|
|
||||||
|
// let newParagraph = document.getElementById(targetP.id);
|
||||||
|
//前置 span
|
||||||
|
let preSpan = newParagraph.querySelector("span[data-flag='span_pre']");
|
||||||
|
if (preSpan === undefined || preSpan === null) {
|
||||||
|
preSpan = document.createElement("span");
|
||||||
|
preSpan.setAttribute("contenteditable", "false")
|
||||||
|
preSpan.setAttribute("data-flag", "span_pre")
|
||||||
|
// newParagraph.appendChild(preSpan);
|
||||||
|
//添加到元素首位
|
||||||
|
newParagraph.insertBefore(preSpan, newParagraph.firstChild);
|
||||||
|
} else {
|
||||||
|
console.log("newParagraph preSpan exist ", newParagraph, " ", preSpan)
|
||||||
|
}
|
||||||
|
|
||||||
//内置span
|
//内置span
|
||||||
let spanContent = newParagraph.querySelector("span[data-flag='span_content']");
|
let spanContent = newParagraph.querySelector("span[data-flag='span_content']");
|
||||||
if (spanContent === undefined || spanContent === null) {
|
if (spanContent === undefined || spanContent === null) {
|
||||||
spanContent = document.createElement("span");
|
spanContent = document.createElement("span");
|
||||||
// spanContent.append(document.createElement("br"));
|
spanContent.append(document.createElement("br"));
|
||||||
spanContent.setAttribute("data-flag", "span_content")
|
spanContent.setAttribute("data-flag", "span_content")
|
||||||
if (curNo === 0) { //首行有提示
|
|
||||||
spanContent.setAttribute("placeholder", "请输入内容")
|
|
||||||
} else {
|
|
||||||
spanContent.setAttribute("placeholder", "请输入内容")
|
|
||||||
spanContent.innerHTML = " "
|
|
||||||
}
|
|
||||||
|
|
||||||
// console.dir(mutation)
|
|
||||||
|
|
||||||
newParagraph.appendChild(spanContent);
|
newParagraph.appendChild(spanContent);
|
||||||
} else {
|
} else {
|
||||||
console.log("newParagraph spanContent exist", spanContent);
|
console.log("newParagraph preSpan spanContent ", newParagraph)
|
||||||
spanContent.innerHTML = " "
|
|
||||||
}
|
}
|
||||||
|
|
||||||
utils.GetSelection().removeAllRanges();
|
|
||||||
utils.GetSelection().setPosition(spanContent, 0);
|
utils.GetSelection().setPosition(spanContent, 0);
|
||||||
spanContent.focus();
|
spanContent.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
return
|
|
||||||
}
|
}
|
||||||
|
|
||||||
//解决（flex 布局 for 无序列表 前面可以输入问题）回车不换行问题
|
|
||||||
// console.log(" fix ", mutation)
|
|
||||||
if (target.nodeName === "P"
|
|
||||||
&& target.getAttribute("data-order") != null
|
|
||||||
&& mutation.previousSibling !== null
|
|
||||||
&& mutation.previousSibling.getAttribute("data-flag") === "span_content") { //
|
|
||||||
let utils = require("../../common/utils");
|
|
||||||
let flagP = target;
|
|
||||||
for (let i = 0; i < mutation.addedNodes.length; i++) {
|
|
||||||
let tmpSpan = mutation.addedNodes[i];
|
|
||||||
let tmpP = document.createElement("p");
|
|
||||||
let curNo = ctx.getCurRowNo();
|
|
||||||
if (curNo === 0) { //首行有提示
|
|
||||||
tmpSpan.setAttribute("placeholder", "请输入内容")
|
|
||||||
} else {
|
|
||||||
tmpSpan.textContent = "\n"
|
|
||||||
}
|
|
||||||
tmpP.appendChild(tmpSpan)
|
|
||||||
utils.InsertAfter(flagP, tmpP);
|
|
||||||
flagP = tmpP;
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
other(mutation);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateText(mutation) {
|
function updateText(mutation) {
|
||||||
let target = mutation.target;
|
let target = mutation.target;
|
||||||
if (target.nodeType === 3 && target.nodeName === "#text") {
|
if (target.nodeType === 3 && target.nodeName === "#text") {
|
||||||
let utils = require("../../common/utils");
|
let testDiv = document.getElementById("testDevice");
|
||||||
let ctx = require("../../common/ctx");
|
testDiv.innerText=""
|
||||||
//测试内容填写
|
// console.log(
|
||||||
// let testDiv = document.getElementById("testDevice");
|
// "updateText target: ", target,
|
||||||
// testDiv.innerText = mutation.oldValue
|
// "\nnodeType: ", target.nodeType,
|
||||||
|
// "\nnodeName: ", target.nodeName,
|
||||||
|
// "\ndata: ", target.value,
|
||||||
|
// "\nparentNode: ", target.parentNode,
|
||||||
|
// "\nparentNode_parentNode: ", target.parentNode?.parentNode,
|
||||||
|
// )
|
||||||
|
|
||||||
let grandfatherElement = target.parentNode?.parentElement;
|
let grandfatherElement = target.parentNode?.parentElement;
|
||||||
//处理添加了样式的 行
|
|
||||||
if (grandfatherElement != null && grandfatherElement.getAttribute("data-flag") === "span_content") {
|
if (grandfatherElement != null && grandfatherElement.getAttribute("data-flag") === "span_content") {
|
||||||
|
let utils = require("../../common/utils");
|
||||||
|
let ctx = require("../../common/ctx");
|
||||||
//正在输入中文直接忽略
|
//正在输入中文直接忽略
|
||||||
if (ctx.Compositionstart) {
|
if (ctx.Compositionstart) {
|
||||||
return;
|
return;
|
||||||
@ -148,12 +129,12 @@ define(function (require, exports, module) {
|
|||||||
if (curTxt.trim().length <= 1) {
|
if (curTxt.trim().length <= 1) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// console.dir(select)
|
console.dir(select)
|
||||||
// console.dir(mutation)
|
console.dir(mutation)
|
||||||
// console.dir(grandfatherElement)
|
console.dir(grandfatherElement)
|
||||||
// console.dir(tmpSpan)
|
console.dir(tmpSpan)
|
||||||
// console.log(tmpSpan)
|
console.log(tmpSpan)
|
||||||
// console.log(curTxt.split(''))
|
console.log(curTxt.split(''))
|
||||||
let curTxtArr = curTxt.split('');
|
let curTxtArr = curTxt.split('');
|
||||||
//保留一个
|
//保留一个
|
||||||
tmpSpan.innerText = curTxtArr[0];
|
tmpSpan.innerText = curTxtArr[0];
|
||||||
@ -165,34 +146,14 @@ define(function (require, exports, module) {
|
|||||||
lastSpan = tmpSpan;
|
lastSpan = tmpSpan;
|
||||||
}
|
}
|
||||||
//选区调整
|
//选区调整
|
||||||
// console.log("lastSpan : ", lastSpan)
|
console.log("lastSpan : ", lastSpan)
|
||||||
utils.GetSelection().setPosition(lastSpan, 1);
|
utils.GetSelection().setPosition(lastSpan, 1);
|
||||||
} else {
|
} else {
|
||||||
console.log("TODO 暂时不支持")
|
console.log("TODO 暂时不支持")
|
||||||
}
|
}
|
||||||
} else { // 处理没有添加样式的行
|
} else {
|
||||||
console.log("TODO 暂时不支持")
|
console.log("TODO 暂时不支持")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//处理无序列表和有序列表 探究
|
|
||||||
if (target.parentNode === undefined || target.parentNode?.parentElement === undefined) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// console.log(
|
|
||||||
// "updateText mutation: ", mutation,
|
|
||||||
// "\ntarget: ", target,
|
|
||||||
// "\nnodeType: ", target.nodeType,
|
|
||||||
// "\nnodeName: ", target.nodeName,
|
|
||||||
// "\ndata: ", target.value,
|
|
||||||
// "\noldValue: ", target.oldValue, target.oldValue?.startsWith("- "),
|
|
||||||
// "\nparentNode: ", target.parentNode, target.parentElement,
|
|
||||||
// "\nparentNode_parentNode: ", target.parentNode?.parentElement,
|
|
||||||
// )
|
|
||||||
let curP = target.parentElement?.closest("p");
|
|
||||||
let curSpanContent = curP.querySelector("span[data-flag='span_content']")
|
|
||||||
// console.log("curSpanContent: ", curSpanContent)
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
other(mutation);
|
other(mutation);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -24,7 +24,6 @@ define(function (require, exports, module) {
|
|||||||
*/
|
*/
|
||||||
function refreshRootFrontSize() {
|
function refreshRootFrontSize() {
|
||||||
const ctx = require("../../common/ctx");
|
const ctx = require("../../common/ctx");
|
||||||
const utils = require("../../common/utils");
|
|
||||||
let designWidth = ctx.designWith;
|
let designWidth = ctx.designWith;
|
||||||
let curDoc = document.documentElement;//当前文档的 root 元素
|
let curDoc = document.documentElement;//当前文档的 root 元素
|
||||||
let curClientW = ctx.getScreenWidth();
|
let curClientW = ctx.getScreenWidth();
|
||||||
@ -32,14 +31,8 @@ define(function (require, exports, module) {
|
|||||||
curClientW = designWidth;
|
curClientW = designWidth;
|
||||||
}
|
}
|
||||||
|
|
||||||
//纸张
|
|
||||||
if (curClientW >= designWidth) {
|
|
||||||
ctx.MyRoot().style.width = designWidth + "px";
|
|
||||||
} else {
|
|
||||||
ctx.MyRoot().style.width = "100%";
|
|
||||||
}
|
|
||||||
|
|
||||||
let dpr = utils.GetDpr();
|
let dpr = getDpr();
|
||||||
//set 1rem = curClientW / designWidth (支持响应式)
|
//set 1rem = curClientW / designWidth (支持响应式)
|
||||||
let nowFrontSize = '1px';
|
let nowFrontSize = '1px';
|
||||||
if (ctx.isTablet || ctx.isMobile || ctx.isIOS || ctx.isAndroid) {
|
if (ctx.isTablet || ctx.isMobile || ctx.isIOS || ctx.isAndroid) {
|
||||||
@ -48,27 +41,16 @@ define(function (require, exports, module) {
|
|||||||
nowFrontSize = (curClientW / designWidth) + 'px';
|
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 = dpr * nowFrontSize;
|
||||||
|
|
||||||
curDoc.style.fontSize = nowFrontSize;
|
curDoc.style.fontSize = nowFrontSize;
|
||||||
// let testDiv = document.getElementById("testDevice");
|
|
||||||
// testDiv.innerText += "\ncurClientW: " + curClientW;
|
console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize);
|
||||||
// testDiv.innerText += "\ndesignWith: " + designWidth;
|
let testDiv = document.getElementById("testDevice");
|
||||||
// testDiv.innerText += "\n1rem =: " + nowFrontSize;
|
testDiv.innerText += "\ncurClientW: " + curClientW;
|
||||||
// testDiv.innerText += "\nwindow.screen.width =: " + window.screen.width;
|
testDiv.innerText += "\ndesignWith: " + designWidth;
|
||||||
// testDiv.innerText += "\nwindow.screen.height =: " + window.screen.height;
|
testDiv.innerText += "\n1rem =: " + nowFrontSize;
|
||||||
|
testDiv.innerText += "\nwindow.screen.width =: " + window.screen.width;
|
||||||
|
testDiv.innerText += "\nwindow.screen.height =: " + window.screen.height;
|
||||||
// testDiv.innerText = testDiv.innerText +
|
// testDiv.innerText = testDiv.innerText +
|
||||||
// // "\n navigator_userAgent :" + navigator.userAgent.toLocaleLowerCase() +
|
// // "\n navigator_userAgent :" + navigator.userAgent.toLocaleLowerCase() +
|
||||||
// "\n isMobile :" + /mobi|android|iphone|ipad|ipod/i.test(navigator.userAgent.toLocaleLowerCase()) +
|
// "\n isMobile :" + /mobi|android|iphone|ipad|ipod/i.test(navigator.userAgent.toLocaleLowerCase()) +
|
||||||
@ -81,10 +63,33 @@ 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() {
|
function refreshEditFrontSize() {
|
||||||
const ctx = require("../../common/ctx");
|
const ctx = require("../../common/ctx");
|
||||||
const utils = require("../../common/utils");
|
|
||||||
let curClientW = ctx.getScreenWidth();
|
let curClientW = ctx.getScreenWidth();
|
||||||
if (!curClientW) {
|
if (!curClientW) {
|
||||||
return
|
return
|
||||||
@ -92,7 +97,7 @@ define(function (require, exports, module) {
|
|||||||
//字体尺寸 https://www.shejidaren.com/zihao-daxiao-sheji-bilv.html
|
//字体尺寸 https://www.shejidaren.com/zihao-daxiao-sheji-bilv.html
|
||||||
//12～72 px 建议最大字体是48px
|
//12～72 px 建议最大字体是48px
|
||||||
|
|
||||||
let dpr = utils.GetDpr();
|
let dpr = getDpr();
|
||||||
|
|
||||||
let myEditFrontSize = document.getElementById("myEdit_main");
|
let myEditFrontSize = document.getElementById("myEdit_main");
|
||||||
if (ctx.isTablet) {
|
if (ctx.isTablet) {
|
||||||
@ -101,20 +106,9 @@ define(function (require, exports, module) {
|
|||||||
myEditFrontSize.style.fontSize = ctx.editFrontSize + 'px';
|
myEditFrontSize.style.fontSize = ctx.editFrontSize + 'px';
|
||||||
}
|
}
|
||||||
|
|
||||||
//show
|
// console.log("myEditFrontSize: ", myEditFrontSize.style.fontSize);
|
||||||
let curMyFontSizeEl = document.getElementById("cur_my_font_size");
|
let testDiv = document.getElementById("testDevice");
|
||||||
curMyFontSizeEl.textContent = ctx.editFrontSize + "px";
|
testDiv.innerText += "\ndpr: " + dpr + "\nmyEditFrontSize: " + myEditFrontSize.style.fontSize;
|
||||||
//更新默认值
|
|
||||||
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,14 +1,5 @@
|
|||||||
"use strict";
|
"use strict";
|
||||||
define(function (require) {
|
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 ctx = require('./common/ctx');
|
||||||
const eventListener = require('./event/MyEventListener')
|
const eventListener = require('./event/MyEventListener')
|
||||||
const utils = require('./common/utils')
|
const utils = require('./common/utils')
|
||||||
|
|||||||
52
static/tmp
52
static/tmp
@ -1,52 +0,0 @@
|
|||||||
mongosharda5d4b580165es02.mongodb.ivolces.com
|
|
||||||
mongosharda5d4b580165es12.mongodb.ivolces.com
|
|
||||||
mongosharda5d4b580165es22.mongodb.ivolces.com
|
|
||||||
mongosharda5d4b580165es32.mongodb.ivolces.com
|
|
||||||
mongosharda5d4b580165es42.mongodb.ivolces.com
|
|
||||||
mongosharda5d4b580165es52.mongodb.ivolces.com
|
|
||||||
|
|
||||||
# hidden 节点
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es02.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es12.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es22.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es32.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es42.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es52.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
|
|
||||||
# 从节点
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es00.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es10.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es20.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es30.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es40.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es50.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
|
|
||||||
# 主节点
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es01.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es11.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es21.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es31.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es41.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
|
|
||||||
mongosh mongodb://archive:mubuSyj123@mongosharda5d4b580165es51.mongodb.ivolces.com:3717/?authSource=admin
|
|
||||||
|
|
||||||
# 执行命令
|
|
||||||
use mubu_document
|
|
||||||
|
|
||||||
db.runCommand( { compact: "hash_tag" } )
|
|
||||||
db.runCommand( { compact: "at_tag" } )
|
|
||||||
db.runCommand( { compact: "docs" } ,{ background: true } )
|
|
||||||
|
|
||||||
db.runCommand( { compact: "nodes" } ,{ background: true } )
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" style="font-size: 1.5px">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<!-- https://quilljs.com/docs/customization/registries -->
|
<!-- https://quilljs.com/docs/customization/registries -->
|
||||||
@ -11,9 +11,7 @@
|
|||||||
<!-- content="width=device-width, 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/normalize.css">
|
||||||
<link rel="stylesheet" type="text/css" href="./css/myEdit.css">
|
<link rel="stylesheet" type="text/css" href="./css/myEdit.css">
|
||||||
<link rel="stylesheet" type="text/css" href="./css/my_drop.css">
|
<script src="./js/lib/sea.js"></script>
|
||||||
<!-- <script src="./js/lib/sea.js"></script>-->
|
|
||||||
<script src="https://www.mylomen.com/js/lib/sea.js"></script>
|
|
||||||
<script>
|
<script>
|
||||||
seajs.config({
|
seajs.config({
|
||||||
// base:'path',
|
// base:'path',
|
||||||
@ -33,66 +31,60 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
|
<!-- 顶部 -->
|
||||||
|
<div id="head_top" style="font-size: 12px">
|
||||||
|
<div style="width:10%">测试</div>
|
||||||
|
<div style="width: 60%"></div>
|
||||||
|
<div style="width:30%">
|
||||||
|
<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="fixStylePosition" id="_style_utils">
|
||||||
<div class="fixStyleOut">
|
<div class="fixStyleOut">
|
||||||
|
<div style="display: flex;margin: 0 0; ">
|
||||||
<!-- 字体 -->
|
<div style="display: flex; margin: 0 0;">
|
||||||
<div style="display: flex;">
|
<div>
|
||||||
<span>
|
|
||||||
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg" data-icon="TextOutlined">
|
xmlns="http://www.w3.org/2000/svg" data-icon="TextOutlined">
|
||||||
<path
|
<path
|
||||||
d="M2 3a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V4h-7v16h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3V4H4v3a1 1 0 1 1-2 0V3Z"
|
d="M2 3a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V4h-7v16h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3V4H4v3a1 1 0 1 1-2 0V3Z"
|
||||||
fill="currentColor"></path>
|
fill="currentColor"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</div>
|
||||||
<div class="my_style_nav">
|
<div>
|
||||||
<span>
|
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
||||||
<svg width="8rem" height="8rem" viewBox="0 0 24 24" fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
||||||
<path
|
<path
|
||||||
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
|
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
|
||||||
fill="currentColor"></path>
|
fill="currentColor"></path>
|
||||||
</svg>
|
</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>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="my-divider-item"></div>
|
<div class="my-divider-item"></div>
|
||||||
|
|
||||||
<div style="display: flex;">
|
<div style="display: flex;">
|
||||||
<span class="my_before_style" data-k="my-li-content" data-v="ol">
|
|
||||||
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg" data-icon="DisorderListOutlined">
|
|
||||||
<path
|
|
||||||
d="M3.5 5.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM9 3a1 1 0 0 0 0 2h13a1 1 0 1 0 0-2H9Zm0 8a1 1 0 1 0 0 2h13a1 1 0 1 0 0-2H9Zm-1 9a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm-3-8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm-1.5 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
|
|
||||||
fill="currentColor"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div style="width: 10rem"></div>
|
|
||||||
<div>
|
<div>
|
||||||
<span class="my_before_style" data-k="my-li-content" data-v="ul">
|
|
||||||
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg" data-icon="OrderListOutlined">
|
xmlns="http://www.w3.org/2000/svg" data-icon="TypographyOutlined">
|
||||||
<path
|
<path
|
||||||
d="M4.577 1.809a.543.543 0 0 0-.819-.469l-.502.296-.004.003-.309.187c-.342.207-.858.519-1.142.701a.573.573 0 0 0-.261.485c0 .482.544.774.948.522.227-.141.465-.287.642-.395v3.478a.723.723 0 1 0 1.447 0V1.81Zm-.899 7.128c-1.233 0-2.056.817-2.056 1.84a.25.25 0 0 0 .25.251h.891a.259.259 0 0 0 .26-.259c0-.32.227-.589.608-.589a.62.62 0 0 1 .428.15.52.52 0 0 1 .16.396c0 .315-.188.579-.538.949l-1.815 1.968a.672.672 0 0 0 .494 1.127h3.003a.63.63 0 0 0 0-1.26H3.744l.933-1.047c.61-.652.99-1.127.99-1.834a1.57 1.57 0 0 0-.563-1.226c-.356-.3-.852-.466-1.426-.466Zm.015 7.429c-1.006 0-1.692.478-1.946 1.178a.541.541 0 0 0 .107.553c.122.137.307.22.503.22a.773.773 0 0 0 .478-.18c.125-.098.23-.222.312-.33.096-.124.257-.224.511-.224.21 0 .37.063.472.152a.46.46 0 0 1 .16.359v.002a.503.503 0 0 1-.165.391.71.71 0 0 1-.483.16h-.14a.606.606 0 1 0 0 1.213h.168c.275 0 .468.074.59.178a.538.538 0 0 1 .186.42.554.554 0 0 1-.185.435c-.122.107-.314.184-.583.184-.32 0-.528-.114-.644-.264a1.776 1.776 0 0 0-.308-.323.766.766 0 0 0-.47-.174.678.678 0 0 0-.504.22.549.549 0 0 0-.114.55c.244.717.926 1.22 2.012 1.22.602 0 1.161-.168 1.575-.478.416-.311.683-.768.676-1.323-.01-.69-.376-1.122-.793-1.332.34-.231.63-.644.621-1.224-.019-.962-.92-1.583-2.036-1.583ZM8 4a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 8a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Zm0 8a1 1 0 0 1 1-1h13a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z"
|
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>
|
fill="currentColor"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</div>
|
||||||
|
<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>
|
||||||
|
|
||||||
<div class="my-divider-item"></div>
|
<div class="my-divider-item"></div>
|
||||||
@ -133,8 +125,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="my-divider-item"></div>
|
<div class="my-divider-item"></div>
|
||||||
|
<div>
|
||||||
<div style="display: flex; ">
|
|
||||||
<span class="fixStyleInnerSpan" data-k="color" data-v="blue">
|
<span class="fixStyleInnerSpan" data-k="color" data-v="blue">
|
||||||
<svg width="10rem" height="10rem" viewBox="0 0 240 240" version="1.1"
|
<svg width="10rem" height="10rem" viewBox="0 0 240 240" version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
@ -155,30 +146,6 @@
|
|||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</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-style-k="color" data-my-style-v="black"><span style="color: black">黑色</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="gray"><span style="color: gray">灰色</span></li>
|
|
||||||
</ul>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="display: flex;">
|
|
||||||
<span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
|
<span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
|
||||||
<svg width="10rem" height="10rem" viewBox="0 0 256 256" version="1.1"
|
<svg width="10rem" height="10rem" viewBox="0 0 256 256" version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
@ -205,62 +172,8 @@
|
|||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</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-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>
|
||||||
|
|
||||||
<div class="my-divider-item"></div>
|
<div class="my-divider-item"></div>
|
||||||
<div style="display: flex;margin: 0 0;line-height: 1; ">
|
|
||||||
<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>
|
<div>
|
||||||
<span>
|
<span>
|
||||||
<svg width="10rem" height="10rem" viewBox="0 0 18 18" fill="none"
|
<svg width="10rem" height="10rem" viewBox="0 0 18 18" fill="none"
|
||||||
@ -269,34 +182,31 @@
|
|||||||
d="M4.2 10.4A1.19 1.19 0 013 9.2 1.19 1.19 0 014.2 8c.23 0 .43.06.6.17.2.1.33.24.44.43.11.18.17.38.17.6 0 .23-.06.43-.17.6-.1.2-.25.34-.43.45-.18.1-.38.16-.6.16zm4.72 0a1.19 1.19 0 01-1.2-1.2A1.19 1.19 0 018.92 8c.22 0 .42.06.6.17.19.1.33.24.44.43.1.18.16.38.16.6a1.22 1.22 0 01-.6 1.04c-.18.11-.38.17-.6.17zm4.72 0a1.19 1.19 0 01-1.2-1.2 1.19 1.19 0 011.2-1.2c.22 0 .42.06.6.17.18.1.33.24.44.43.11.18.16.38.16.6 0 .23-.05.43-.16.6a1.18 1.18 0 01-1.04.6z"
|
d="M4.2 10.4A1.19 1.19 0 013 9.2 1.19 1.19 0 014.2 8c.23 0 .43.06.6.17.2.1.33.24.44.43.11.18.17.38.17.6 0 .23-.06.43-.17.6-.1.2-.25.34-.43.45-.18.1-.38.16-.6.16zm4.72 0a1.19 1.19 0 01-1.2-1.2A1.19 1.19 0 018.92 8c.22 0 .42.06.6.17.19.1.33.24.44.43.1.18.16.38.16.6a1.22 1.22 0 01-.6 1.04c-.18.11-.38.17-.6.17zm4.72 0a1.19 1.19 0 01-1.2-1.2 1.19 1.19 0 011.2-1.2c.22 0 .42.06.6.17.18.1.33.24.44.43.11.18.16.38.16.6 0 .23-.05.43-.16.6a1.18 1.18 0 01-1.04.6z"
|
||||||
fill="#535353"></path>
|
fill="#535353"></path>
|
||||||
</svg>
|
</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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div class="my-divider-item"></div>-->
|
||||||
|
<!-- <div>-->
|
||||||
|
<!-- <button onclick="info(this)" style="font-size: 16px">info</button>-->
|
||||||
|
<!-- </div>-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="myEdit_main">
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="myEdit_main" style="font-size: 14px">
|
|
||||||
<!-- 标题 -->
|
<!-- 标题 -->
|
||||||
<h3 id="my-title" contenteditable="true"></h3>
|
<h3 contenteditable="true">
|
||||||
|
测试编辑
|
||||||
|
</h3>
|
||||||
<!-- 内容 -->
|
<!-- 内容 -->
|
||||||
<div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
|
<div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|
||||||
</footer>
|
</footer>
|
||||||
<div id="testDiv" style="font-size: 14px; width: 300px;margin-left: 10%; display: block"></div>
|
<div id="testDiv" style="font-size: 14px; width: 300px;margin-left: 10%; display: block"></div>
|
||||||
<div id="testDevice" style="font-size: 14px; width: 300px;margin-left: 10%; display: block"></div>
|
<div id="testDevice" style="font-size: 14px; width: 300px;margin-left: 10%; display: block"></div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
<script>
|
<script>
|
||||||
@ -306,7 +216,7 @@
|
|||||||
console.dir(select)
|
console.dir(select)
|
||||||
console.dir(rangeAt)
|
console.dir(rangeAt)
|
||||||
|
|
||||||
let spanContent = rangeAt.commonAncestorContainer.parentElement.querySelector("span[data-flag='span_content']")
|
let spanContent = rangeAt.commonAncestorContainer.parentElement.querySelector("span[data-flag='span_content']");
|
||||||
console.dir(spanContent)
|
console.dir(spanContent)
|
||||||
for (const child of spanContent.children) {
|
for (const child of spanContent.children) {
|
||||||
console.log(child, select.containsNode(child, false), select.containsNode(child, true))
|
console.log(child, select.containsNode(child, false), select.containsNode(child, true))
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user