Compare commits
10 Commits
72f80f06bd
...
4c4ba596fb
| Author | SHA1 | Date | |
|---|---|---|---|
|
4c4ba596fb | ||
|
|
d8302cb9ca | ||
|
|
c115dda50b | ||
|
|
07dcd13877 | ||
|
|
a73c96f6fa | ||
|
|
a883c64eab | ||
|
|
978bafac7f | ||
|
|
97611ea548 | ||
|
|
f744a0832e | ||
|
|
44c00e5f61 |
@ -15,6 +15,186 @@ 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 {
|
||||||
@ -34,9 +214,12 @@ 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;
|
||||||
@ -74,7 +257,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;*/
|
||||||
@ -86,20 +269,6 @@ 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;
|
||||||
@ -121,14 +290,20 @@ 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 8rem;
|
margin: 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
@ -137,7 +312,7 @@ main {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
margin-top: 58rem;
|
margin-top: 30rem;
|
||||||
/*min-height: 80%;*/
|
/*min-height: 80%;*/
|
||||||
|
|
||||||
/*border: 1px greenyellow solid;*/
|
/*border: 1px greenyellow solid;*/
|
||||||
@ -157,7 +332,7 @@ main {
|
|||||||
/*响应式*/
|
/*响应式*/
|
||||||
/*display: flex;*/
|
/*display: flex;*/
|
||||||
/*flex-direction:column;*/
|
/*flex-direction:column;*/
|
||||||
/*flex-wrap: nowrap;*/
|
/*flex-wrap: wrap;*/
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -165,19 +340,64 @@ 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{
|
#yxl_note p span[data-flag="span_content"] {
|
||||||
/*border: 1px rgb(248, 245, 245) solid;*/
|
/*border: 1px deepskyblue 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 {
|
||||||
@ -189,19 +409,22 @@ main {
|
|||||||
}
|
}
|
||||||
|
|
||||||
::selection {
|
::selection {
|
||||||
color: antiquewhite;
|
color: inherit;
|
||||||
background-color: cadetblue;
|
/*color: antiquewhite;*/
|
||||||
text-shadow: #00a9ff;
|
/*background-color: cadetblue;*/
|
||||||
|
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 6rem;
|
margin: 0 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer{
|
footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
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
|
||||||
|
}
|
||||||
@ -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,10 +25,11 @@ 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.height = height_px;
|
this.width = 750; //按照iphone6
|
||||||
|
// this.height = height_px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -46,7 +47,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,13 +9,60 @@ define(function (require, exports, module) {
|
|||||||
console.log(("ctx init"));
|
console.log(("ctx init"));
|
||||||
|
|
||||||
//可以修改的
|
//可以修改的
|
||||||
let editFrontSize = localStorage.getItem('editFrontSize');
|
let editFrontSize = localStorage.getItem('refreshEditFrontSize');
|
||||||
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,9 +163,38 @@ 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,6 +54,12 @@ 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);
|
||||||
|
|
||||||
@ -68,17 +74,29 @@ define(function (require, exports, module) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//+/-
|
|
||||||
document.getElementById("my_fontSize+").addEventListener("click", this.AdjustMyFontSize, true)
|
//::before
|
||||||
document.getElementById("my_fontSize-").addEventListener("click", this.AdjustMyFontSize, true)
|
//样式事件监听
|
||||||
document.getElementById("my_fontSize0").addEventListener("click", this.AdjustMyFontSize, true)
|
let myBeforeStyleList = document.getElementsByClassName("my_before_style");
|
||||||
|
// console.log("styleList : ", styleList);
|
||||||
|
if (myBeforeStyleList && myBeforeStyleList.length > 0) {
|
||||||
|
for (let i = 0; i < myBeforeStyleList.length; i++) {
|
||||||
|
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) {
|
DropDownStyleSelectListener(e) {
|
||||||
const handle = require('./impl/AdjustMyFontSizeEventImpl');
|
require('./impl/DropDownStyleSelectEventImpl').handle(e);
|
||||||
handle.handle(e);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
Mousedown(e) {
|
Mousedown(e) {
|
||||||
const handle = require('./impl/MouseDownEventImpl');
|
const handle = require('./impl/MouseDownEventImpl');
|
||||||
handle.handle(e);
|
handle.handle(e);
|
||||||
@ -95,6 +113,16 @@ 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
|
||||||
@ -150,7 +178,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);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,34 +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
|
|
||||||
} 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;
|
|
||||||
});
|
|
||||||
152
static/js/event/impl/BeforeStyleEventImpl.js
Normal file
152
static/js/event/impl/BeforeStyleEventImpl.js
Normal file
@ -0,0 +1,152 @@
|
|||||||
|
"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,6 +6,23 @@
|
|||||||
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");
|
||||||
@ -50,7 +67,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 === '<br>') {
|
if ((curS.isCollapsed && curS.anchorOffset === 0) || curP.innerHTML === ' ') {
|
||||||
let curNodeRetainHtml = curP.innerHTML
|
let curNodeRetainHtml = curP.innerHTML
|
||||||
//阻止事件传递
|
//阻止事件传递
|
||||||
utils.ProhibitDefaultEvent(event);
|
utils.ProhibitDefaultEvent(event);
|
||||||
@ -66,7 +83,7 @@ define(function (require, exports, module) {
|
|||||||
}
|
}
|
||||||
emptyRowNoList.push(cNo);
|
emptyRowNoList.push(cNo);
|
||||||
//拼接
|
//拼接
|
||||||
if (curNodeRetainHtml !== '<br>') {
|
if (curNodeRetainHtml !== ' ') {
|
||||||
previousSibling.innerHTML = previousSibling.innerHTML + curNodeRetainHtml
|
previousSibling.innerHTML = previousSibling.innerHTML + curNodeRetainHtml
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
156
static/js/event/impl/DropDownStyleSelectEventImpl.js
Normal file
156
static/js/event/impl/DropDownStyleSelectEventImpl.js
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
"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,6 +8,13 @@ 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,96 +26,115 @@ define(function (require, exports, module) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function other(mutation) {
|
function other(mutation) {
|
||||||
console.log("mutation : ", mutation,
|
// console.log("other ", mutation)
|
||||||
// 观察的变动类型（attributes、characterData或者childList）。
|
// console.log("other -> mutation : ", mutation,
|
||||||
"\ntype", mutation.type,
|
// // 观察的变动类型（attributes、characterData或者childList）。
|
||||||
//发生变动的DOM节点。
|
// "\ntype", mutation.type,
|
||||||
"\ntarget", mutation.target,
|
// //发生变动的DOM节点。
|
||||||
"\ntargetParent", mutation.target.parentElement, mutation.target.parentNode,
|
// "\ntarget", mutation.target, mutation.target.nodeName, mutation.previousSibling,
|
||||||
//新增的DOM节点。
|
// "\ntargetParent", mutation.target.parentElement, mutation.target.parentNode,
|
||||||
"\naddedNodes", mutation.addedNodes,
|
// //新增的DOM节点。
|
||||||
//删除的DOM节点。
|
// "\naddedNodes", mutation.addedNodes,
|
||||||
"\nremovedNodes", mutation.removedNodes,
|
// //删除的DOM节点。
|
||||||
//前一个同级节点，如果没有则返回null。
|
// "\nremovedNodes", mutation.removedNodes,
|
||||||
"\npreviousSibling", mutation.previousSibling,
|
// //前一个同级节点，如果没有则返回null。
|
||||||
//下一个同级节点，如果没有则返回null。
|
// "\npreviousSibling", mutation.previousSibling,
|
||||||
"\nnextSibling", mutation.nextSibling,
|
// //下一个同级节点，如果没有则返回null。
|
||||||
//发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
|
// "\nnextSibling", mutation.nextSibling,
|
||||||
"\nattributeName", mutation.attributeName,
|
// //发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
|
||||||
//变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。
|
// "\nattributeName", mutation.attributeName,
|
||||||
"\noldValue", mutation.oldValue);
|
// //变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。
|
||||||
|
// "\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);
|
||||||
newParagraph.setAttribute("data-order", ctx.incrementNumThenReturn());
|
let curNo = 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 preSpan spanContent ", newParagraph)
|
console.log("newParagraph spanContent exist", spanContent);
|
||||||
|
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 testDiv = document.getElementById("testDevice");
|
let utils = require("../../common/utils");
|
||||||
testDiv.innerText=""
|
let ctx = require("../../common/ctx");
|
||||||
// console.log(
|
//测试内容填写
|
||||||
// "updateText target: ", target,
|
// let testDiv = document.getElementById("testDevice");
|
||||||
// "\nnodeType: ", target.nodeType,
|
// testDiv.innerText = mutation.oldValue
|
||||||
// "\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;
|
||||||
@ -129,12 +148,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];
|
||||||
@ -146,14 +165,34 @@ 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,6 +24,7 @@ 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();
|
||||||
@ -31,8 +32,14 @@ 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 = getDpr();
|
let dpr = utils.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) {
|
||||||
@ -41,16 +48,27 @@ 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;
|
|
||||||
|
|
||||||
console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize);
|
curDoc.style.fontSize = nowFrontSize;
|
||||||
let testDiv = document.getElementById("testDevice");
|
// let testDiv = document.getElementById("testDevice");
|
||||||
testDiv.innerText += "\ncurClientW: " + curClientW;
|
// testDiv.innerText += "\ncurClientW: " + curClientW;
|
||||||
testDiv.innerText += "\ndesignWith: " + designWidth;
|
// testDiv.innerText += "\ndesignWith: " + designWidth;
|
||||||
testDiv.innerText += "\n1rem =: " + nowFrontSize;
|
// testDiv.innerText += "\n1rem =: " + nowFrontSize;
|
||||||
testDiv.innerText += "\nwindow.screen.width =: " + window.screen.width;
|
// testDiv.innerText += "\nwindow.screen.width =: " + window.screen.width;
|
||||||
testDiv.innerText += "\nwindow.screen.height =: " + window.screen.height;
|
// 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()) +
|
||||||
@ -63,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() {
|
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
|
||||||
@ -97,7 +92,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 = getDpr();
|
let dpr = utils.GetDpr();
|
||||||
|
|
||||||
let myEditFrontSize = document.getElementById("myEdit_main");
|
let myEditFrontSize = document.getElementById("myEdit_main");
|
||||||
if (ctx.isTablet) {
|
if (ctx.isTablet) {
|
||||||
@ -106,9 +101,20 @@ define(function (require, exports, module) {
|
|||||||
myEditFrontSize.style.fontSize = ctx.editFrontSize + 'px';
|
myEditFrontSize.style.fontSize = ctx.editFrontSize + 'px';
|
||||||
}
|
}
|
||||||
|
|
||||||
// console.log("myEditFrontSize: ", myEditFrontSize.style.fontSize);
|
//show
|
||||||
let testDiv = document.getElementById("testDevice");
|
let curMyFontSizeEl = document.getElementById("cur_my_font_size");
|
||||||
testDiv.innerText += "\ndpr: " + dpr + "\nmyEditFrontSize: " + myEditFrontSize.style.fontSize;
|
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";
|
"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
Normal file
52
static/tmp
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
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">
|
<html lang="en" style="font-size: 1.5px">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<!-- https://quilljs.com/docs/customization/registries -->
|
<!-- https://quilljs.com/docs/customization/registries -->
|
||||||
@ -7,11 +7,13 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>📒</title>
|
<title>📒</title>
|
||||||
<meta name="viewport"
|
<meta name="viewport"
|
||||||
content="width=device-width, height=device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
content="width=device-width, height=device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||||
<!-- content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">-->
|
<!-- 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">
|
||||||
<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>
|
<script>
|
||||||
seajs.config({
|
seajs.config({
|
||||||
// base:'path',
|
// base:'path',
|
||||||
@ -31,182 +33,270 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<!-- 顶部 -->
|
<div class="fixStylePosition" id="_style_utils">
|
||||||
<div id="head_top" style="font-size: 12px">
|
<div class="fixStyleOut">
|
||||||
<div style="width:10%">测试</div>
|
|
||||||
<div style="width: 60%"></div>
|
<!-- 字体 -->
|
||||||
<div style="width:30%">
|
<div style="display: flex;">
|
||||||
<span><button id="my_fontSize0">cls</button></span>
|
<span>
|
||||||
<span>｜</span>
|
|
||||||
<span><button id="my_fontSize+">+</button></span>
|
|
||||||
<span>｜</span>
|
|
||||||
<span><button id="my_fontSize-">-</button></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="fixStylePosition" id="_style_utils">
|
|
||||||
<div class="fixStyleOut">
|
|
||||||
<div style="display: flex;margin: 0 0; ">
|
|
||||||
<div style="display: flex; margin: 0 0;">
|
|
||||||
<div>
|
|
||||||
<svg width="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>
|
||||||
</div>
|
</span>
|
||||||
<div>
|
<div class="my_style_nav">
|
||||||
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
<span>
|
||||||
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
<svg width="8rem" height="8rem" viewBox="0 0 24 24" fill="none"
|
||||||
<path
|
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"
|
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 style="display: flex;">
|
|
||||||
<div>
|
|
||||||
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg" data-icon="TypographyOutlined">
|
|
||||||
<path
|
|
||||||
d="M2 4a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2H3Zm-1 5a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm1 3a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2H3Z"
|
|
||||||
fill="currentColor"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<svg width="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 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>
|
||||||
|
<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"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" data-icon="OrderListOutlined">
|
||||||
|
<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"
|
||||||
|
fill="currentColor"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="my-divider-item"></div>
|
||||||
|
<div style="display: flex;">
|
||||||
<span class="fixStyleInnerSpan" data-k="font-weight" data-v="bold">
|
<span class="fixStyleInnerSpan" data-k="font-weight" data-v="bold">
|
||||||
<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="BoldOutlined">
|
xmlns="http://www.w3.org/2000/svg" data-icon="BoldOutlined">
|
||||||
<path
|
<path
|
||||||
d="M5 2.709C5 2.317 5.317 2 5.709 2h6.734a5.317 5.317 0 0 1 3.686 9.148 5.671 5.671 0 0 1-2.623 10.7H5.71a.709.709 0 0 1-.71-.707V2.71Zm2 7.798h5.443a3.19 3.19 0 0 0 3.19-3.19c0-1.762-1.428-3.317-3.19-3.317H7v6.507Zm0 2.126v7.09h6.507a3.544 3.544 0 0 0 0-7.09H7Z"
|
d="M5 2.709C5 2.317 5.317 2 5.709 2h6.734a5.317 5.317 0 0 1 3.686 9.148 5.671 5.671 0 0 1-2.623 10.7H5.71a.709.709 0 0 1-.71-.707V2.71Zm2 7.798h5.443a3.19 3.19 0 0 0 3.19-3.19c0-1.762-1.428-3.317-3.19-3.317H7v6.507Zm0 2.126v7.09h6.507a3.544 3.544 0 0 0 0-7.09H7Z"
|
||||||
fill="currentColor"></path>
|
fill="currentColor"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<span class="fixStyleInnerSpan" data-k="text-decoration" data-v="line-through">
|
<span class="fixStyleInnerSpan" data-k="text-decoration" data-v="line-through">
|
||||||
<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="HorizontalLineOutlined">
|
xmlns="http://www.w3.org/2000/svg" data-icon="HorizontalLineOutlined">
|
||||||
<path
|
<path
|
||||||
d="M5.49 7.226A5.107 5.107 0 0 1 6.9 3.831C8.017 2.636 9.718 2 11.819 2c2.142 0 3.779.57 4.867 1.689.4.392.869.958 1.26 1.595.443.723-.191 1.53-1.04 1.53-.606 0-1.039-.447-1.326-.981a2.864 2.864 0 0 0-.362-.517c-.735-.93-1.909-1.419-3.386-1.419-2.404 0-4.154 1.395-4.2 3.393-.02.846.337 1.58.995 2.043h-2.75c-.271-.621-.403-1.332-.385-2.107Zm8.906 6.024H4.038c-.518 0-.938-.38-.938-.897 0-.518.42-.978.938-.978h16.125c.518 0 .937.437.937.954 0 .518-.42.921-.937.921h-2.455c.542.806.96 1.954.934 3.055C18.563 19.82 15.87 22 11.572 22c-2.875 0-5.028-.964-6.13-2.745a6.884 6.884 0 0 1-.545-1.191c-.261-.72.318-1.432 1.084-1.432.574 0 1.034.416 1.24.952.17.445.4.794.733 1.142.805.858 2.104 1.305 3.766 1.305 2.845 0 4.696-1.39 4.747-3.61.024-1.072-.256-1.61-.897-2.42-.473-.598-1.174-.751-1.174-.751Z"
|
d="M5.49 7.226A5.107 5.107 0 0 1 6.9 3.831C8.017 2.636 9.718 2 11.819 2c2.142 0 3.779.57 4.867 1.689.4.392.869.958 1.26 1.595.443.723-.191 1.53-1.04 1.53-.606 0-1.039-.447-1.326-.981a2.864 2.864 0 0 0-.362-.517c-.735-.93-1.909-1.419-3.386-1.419-2.404 0-4.154 1.395-4.2 3.393-.02.846.337 1.58.995 2.043h-2.75c-.271-.621-.403-1.332-.385-2.107Zm8.906 6.024H4.038c-.518 0-.938-.38-.938-.897 0-.518.42-.978.938-.978h16.125c.518 0 .937.437.937.954 0 .518-.42.921-.937.921h-2.455c.542.806.96 1.954.934 3.055C18.563 19.82 15.87 22 11.572 22c-2.875 0-5.028-.964-6.13-2.745a6.884 6.884 0 0 1-.545-1.191c-.261-.72.318-1.432 1.084-1.432.574 0 1.034.416 1.24.952.17.445.4.794.733 1.142.805.858 2.104 1.305 3.766 1.305 2.845 0 4.696-1.39 4.747-3.61.024-1.072-.256-1.61-.897-2.42-.473-.598-1.174-.751-1.174-.751Z"
|
||||||
fill="currentColor"></path>
|
fill="currentColor"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<span class="fixStyleInnerSpan" data-k="font-style" data-v="italic">
|
<span class="fixStyleInnerSpan" data-k="font-style" data-v="italic">
|
||||||
<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="ItalicOutlined">
|
xmlns="http://www.w3.org/2000/svg" data-icon="ItalicOutlined">
|
||||||
<path
|
<path
|
||||||
d="M14.825 5.077 11.19 18.923h4.052a1.038 1.038 0 1 1 0 2.077H4.954a1.038 1.038 0 1 1 0-2.077h4.053l3.636-13.846H8.591A1.038 1.038 0 1 1 8.59 3h10.287a1.038 1.038 0 0 1 0 2.077h-4.053Z"
|
d="M14.825 5.077 11.19 18.923h4.052a1.038 1.038 0 1 1 0 2.077H4.954a1.038 1.038 0 1 1 0-2.077h4.053l3.636-13.846H8.591A1.038 1.038 0 1 1 8.59 3h10.287a1.038 1.038 0 0 1 0 2.077h-4.053Z"
|
||||||
fill="currentColor"></path>
|
fill="currentColor"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<span class="fixStyleInnerSpan" data-k="text-decoration,text-underline-offset"
|
<span class="fixStyleInnerSpan" data-k="text-decoration,text-underline-offset"
|
||||||
data-v="underline,30rem">
|
data-v="underline,30rem">
|
||||||
<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="UnderlineOutlined">
|
xmlns="http://www.w3.org/2000/svg" data-icon="UnderlineOutlined">
|
||||||
<path
|
<path
|
||||||
d="M7.361 3.052a.99.99 0 0 0-.989-.994.998.998 0 0 0-.999.994v5.765c0 4.205 2.601 7.29 6.627 7.29s6.627-3.085 6.627-7.29V3.052a.996.996 0 0 0-.996-.994.992.992 0 0 0-.992.994v5.765c0 3.003-1.763 5.302-4.639 5.302-2.876 0-4.639-2.299-4.639-5.302V3.052ZM3.054 19.42a.988.988 0 0 0-.994.988 1 1 0 0 0 .994 1h17.892a1 1 0 0 0 .994-1.002.987.987 0 0 0-.994-.986H3.054Z"
|
d="M7.361 3.052a.99.99 0 0 0-.989-.994.998.998 0 0 0-.999.994v5.765c0 4.205 2.601 7.29 6.627 7.29s6.627-3.085 6.627-7.29V3.052a.996.996 0 0 0-.996-.994.992.992 0 0 0-.992.994v5.765c0 3.003-1.763 5.302-4.639 5.302-2.876 0-4.639-2.299-4.639-5.302V3.052ZM3.054 19.42a.988.988 0 0 0-.994.988 1 1 0 0 0 .994 1h17.892a1 1 0 0 0 .994-1.002.987.987 0 0 0-.994-.986H3.054Z"
|
||||||
fill="currentColor"></path>
|
fill="currentColor"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</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">
|
||||||
<g id="icon/字体颜色" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<g id="icon/字体颜色" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
<g transform="translate(0.000000, 0.500000)">
|
<g transform="translate(0.000000, 0.500000)">
|
||||||
<g transform="translate(39.000000, 17.353553)">
|
<g transform="translate(39.000000, 17.353553)">
|
||||||
<path
|
<path
|
||||||
d="M11,201.146447 L167,201.146447 C173.075132,201.146447 178,206.071314 178,212.146447 C178,218.221579 173.075132,223.146447 167,223.146447 L11,223.146447 C4.92486775,223.146447 7.43989126e-16,218.221579 0,212.146447 C-7.43989126e-16,206.071314 4.92486775,201.146447 11,201.146447 Z"
|
d="M11,201.146447 L167,201.146447 C173.075132,201.146447 178,206.071314 178,212.146447 C178,218.221579 173.075132,223.146447 167,223.146447 L11,223.146447 C4.92486775,223.146447 7.43989126e-16,218.221579 0,212.146447 C-7.43989126e-16,206.071314 4.92486775,201.146447 11,201.146447 Z"
|
||||||
id="矩形" fill="#DF2A3F" fill-rule="evenodd"></path>
|
id="矩形" fill="#DF2A3F" fill-rule="evenodd"></path>
|
||||||
<path
|
<path
|
||||||
d="M72.3425855,16.8295583 C75.799482,7.50883712 86.1577877,2.75526801 95.4785089,6.21216449 C100.284516,7.99463061 104.096358,11.7387855 105.968745,16.4968188 L106.112518,16.8745422 L159.385152,161.694068 C161.291848,166.877345 158.635655,172.624903 153.452378,174.531599 C148.358469,176.405421 142.719567,173.872338 140.716873,168.864661 L140.614848,168.598825 L89.211,28.86 L37.3759214,168.623816 C35.4885354,173.712715 29.8981043,176.351047 24.7909589,174.617647 L24.5226307,174.522368 C19.4337312,172.634982 16.7953993,167.044551 18.5287999,161.937406 L18.6240786,161.669077 L72.3425855,16.8295583 Z"
|
d="M72.3425855,16.8295583 C75.799482,7.50883712 86.1577877,2.75526801 95.4785089,6.21216449 C100.284516,7.99463061 104.096358,11.7387855 105.968745,16.4968188 L106.112518,16.8745422 L159.385152,161.694068 C161.291848,166.877345 158.635655,172.624903 153.452378,174.531599 C148.358469,176.405421 142.719567,173.872338 140.716873,168.864661 L140.614848,168.598825 L89.211,28.86 L37.3759214,168.623816 C35.4885354,173.712715 29.8981043,176.351047 24.7909589,174.617647 L24.5226307,174.522368 C19.4337312,172.634982 16.7953993,167.044551 18.5287999,161.937406 L18.6240786,161.669077 L72.3425855,16.8295583 Z"
|
||||||
id="路径-21" fill="currentColor" fill-rule="nonzero"></path>
|
id="路径-21" fill="currentColor" fill-rule="nonzero"></path>
|
||||||
<path
|
<path
|
||||||
d="M121,103.146447 C126.522847,103.146447 131,107.623599 131,113.146447 C131,118.575687 126.673329,122.994378 121.279905,123.142605 L121,123.146447 L55,123.146447 C49.4771525,123.146447 45,118.669294 45,113.146447 C45,107.717207 49.3266708,103.298515 54.7200952,103.150288 L55,103.146447 L121,103.146447 Z"
|
d="M121,103.146447 C126.522847,103.146447 131,107.623599 131,113.146447 C131,118.575687 126.673329,122.994378 121.279905,123.142605 L121,123.146447 L55,123.146447 C49.4771525,123.146447 45,118.669294 45,113.146447 C45,107.717207 49.3266708,103.298515 54.7200952,103.150288 L55,103.146447 L121,103.146447 Z"
|
||||||
id="路径-22" fill="currentColor" fill-rule="nonzero"></path>
|
id="路径-22" fill="currentColor" fill-rule="nonzero"></path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
|
|
||||||
|
<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">
|
||||||
<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">
|
||||||
<g id="icon/填充色" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
<g id="icon/填充色" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
<g id="icon/背景颜色">
|
<g id="icon/背景颜色">
|
||||||
<g id="编组" fill="currentColor">
|
<g id="编组" fill="currentColor">
|
||||||
<g transform="translate(119.502295, 137.878331) rotate(-135.000000) translate(-119.502295, -137.878331) translate(48.002295, 31.757731)"
|
<g transform="translate(119.502295, 137.878331) rotate(-135.000000) translate(-119.502295, -137.878331) translate(48.002295, 31.757731)"
|
||||||
id="矩形">
|
id="矩形">
|
||||||
<path
|
<path
|
||||||
d="M100.946943,60.8084699 L43.7469427,60.8084699 C37.2852111,60.8084699 32.0469427,66.0467383 32.0469427,72.5084699 L32.0469427,118.70847 C32.0469427,125.170201 37.2852111,130.40847 43.7469427,130.40847 L100.946943,130.40847 C107.408674,130.40847 112.646943,125.170201 112.646943,118.70847 L112.646943,72.5084699 C112.646943,66.0467383 107.408674,60.8084699 100.946943,60.8084699 Z M93.646,79.808 L93.646,111.408 L51.046,111.408 L51.046,79.808 L93.646,79.808 Z"
|
d="M100.946943,60.8084699 L43.7469427,60.8084699 C37.2852111,60.8084699 32.0469427,66.0467383 32.0469427,72.5084699 L32.0469427,118.70847 C32.0469427,125.170201 37.2852111,130.40847 43.7469427,130.40847 L100.946943,130.40847 C107.408674,130.40847 112.646943,125.170201 112.646943,118.70847 L112.646943,72.5084699 C112.646943,66.0467383 107.408674,60.8084699 100.946943,60.8084699 Z M93.646,79.808 L93.646,111.408 L51.046,111.408 L51.046,79.808 L93.646,79.808 Z"
|
||||||
fill-rule="nonzero"></path>
|
fill-rule="nonzero"></path>
|
||||||
<path
|
<path
|
||||||
d="M87.9366521,16.90916 L87.9194966,68.2000001 C87.9183543,69.4147389 86.9334998,70.399264 85.7187607,70.4 L56.9423078,70.4 C55.7272813,70.4 54.7423078,69.4150264 54.7423078,68.2 L54.7423078,39.4621057 C54.7423078,37.2523513 55.5736632,35.1234748 57.0711706,33.4985176 L76.4832996,12.4342613 C78.9534987,9.75382857 83.1289108,9.5834005 85.8093436,12.0535996 C87.1658473,13.303709 87.9372691,15.0644715 87.9366521,16.90916 Z"
|
d="M87.9366521,16.90916 L87.9194966,68.2000001 C87.9183543,69.4147389 86.9334998,70.399264 85.7187607,70.4 L56.9423078,70.4 C55.7272813,70.4 54.7423078,69.4150264 54.7423078,68.2 L54.7423078,39.4621057 C54.7423078,37.2523513 55.5736632,35.1234748 57.0711706,33.4985176 L76.4832996,12.4342613 C78.9534987,9.75382857 83.1289108,9.5834005 85.8093436,12.0535996 C87.1658473,13.303709 87.9372691,15.0644715 87.9366521,16.90916 Z"
|
||||||
fill-rule="evenodd"></path>
|
fill-rule="evenodd"></path>
|
||||||
<path
|
<path
|
||||||
d="M131.3,111.241199 L11.7,111.241199 C5.23826843,111.241199 0,116.479467 0,122.941199 L0,200.541199 C0,207.002931 5.23826843,212.241199 11.7,212.241199 L131.3,212.241199 C137.761732,212.241199 143,207.002931 143,200.541199 L143,122.941199 C143,116.479467 137.761732,111.241199 131.3,111.241199 Z M124,130.241 L124,193.241 L19,193.241 L19,130.241 L124,130.241 Z"
|
d="M131.3,111.241199 L11.7,111.241199 C5.23826843,111.241199 0,116.479467 0,122.941199 L0,200.541199 C0,207.002931 5.23826843,212.241199 11.7,212.241199 L131.3,212.241199 C137.761732,212.241199 143,207.002931 143,200.541199 L143,122.941199 C143,116.479467 137.761732,111.241199 131.3,111.241199 Z M124,130.241 L124,193.241 L19,193.241 L19,130.241 L124,130.241 Z"
|
||||||
fill-rule="nonzero"></path>
|
fill-rule="nonzero"></path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<path
|
<path
|
||||||
d="M51,218 L205,218 C211.075132,218 216,222.924868 216,229 C216,235.075132 211.075132,240 205,240 L51,240 C44.9248678,240 40,235.075132 40,229 C40,222.924868 44.9248678,218 51,218 Z"
|
d="M51,218 L205,218 C211.075132,218 216,222.924868 216,229 C216,235.075132 211.075132,240 205,240 L51,240 C44.9248678,240 40,235.075132 40,229 C40,222.924868 44.9248678,218 51,218 Z"
|
||||||
id="矩形" fill="#FBDE28"></path>
|
id="矩形" fill="#FBDE28"></path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
|
||||||
<div class="my-divider-item"></div>
|
<span class="my_style_nav">
|
||||||
<div>
|
<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 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>
|
||||||
<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"
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
<path
|
<path
|
||||||
d="M4.2 10.4A1.19 1.19 0 013 9.2 1.19 1.19 0 014.2 8c.23 0 .43.06.6.17.2.1.33.24.44.43.11.18.17.38.17.6 0 .23-.06.43-.17.6-.1.2-.25.34-.43.45-.18.1-.38.16-.6.16zm4.72 0a1.19 1.19 0 01-1.2-1.2A1.19 1.19 0 018.92 8c.22 0 .42.06.6.17.19.1.33.24.44.43.1.18.16.38.16.6a1.22 1.22 0 01-.6 1.04c-.18.11-.38.17-.6.17zm4.72 0a1.19 1.19 0 01-1.2-1.2 1.19 1.19 0 011.2-1.2c.22 0 .42.06.6.17.18.1.33.24.44.43.11.18.16.38.16.6 0 .23-.05.43-.16.6a1.18 1.18 0 01-1.04.6z"
|
d="M4.2 10.4A1.19 1.19 0 013 9.2 1.19 1.19 0 014.2 8c.23 0 .43.06.6.17.2.1.33.24.44.43.11.18.17.38.17.6 0 .23-.06.43-.17.6-.1.2-.25.34-.43.45-.18.1-.38.16-.6.16zm4.72 0a1.19 1.19 0 01-1.2-1.2A1.19 1.19 0 018.92 8c.22 0 .42.06.6.17.19.1.33.24.44.43.1.18.16.38.16.6a1.22 1.22 0 01-.6 1.04c-.18.11-.38.17-.6.17zm4.72 0a1.19 1.19 0 01-1.2-1.2 1.19 1.19 0 011.2-1.2c.22 0 .42.06.6.17.18.1.33.24.44.43.11.18.16.38.16.6 0 .23-.05.43-.16.6a1.18 1.18 0 01-1.04.6z"
|
||||||
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>
|
||||||
<!-- <div class="my-divider-item"></div>-->
|
|
||||||
<!-- <div>-->
|
|
||||||
<!-- <button onclick="info(this)" style="font-size: 16px">info</button>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main id="myEdit_main">
|
|
||||||
<!-- 标题 -->
|
|
||||||
<h3 contenteditable="true">
|
|
||||||
测试编辑
|
|
||||||
</h3>
|
|
||||||
<!-- 内容 -->
|
|
||||||
<div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<footer>
|
</header>
|
||||||
|
|
||||||
</footer>
|
<main id="myEdit_main" style="font-size: 14px">
|
||||||
<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>
|
<h3 id="my-title" contenteditable="true"></h3>
|
||||||
|
<!-- 内容 -->
|
||||||
|
<div id="yxl_note" contenteditable="true" spellcheck="false" translate="no">
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
<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>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
<script>
|
<script>
|
||||||
@ -216,7 +306,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