This commit is contained in:
2025-07-17 16:25:01 +08:00
parent 2c0b8161a5
commit 250f78593a
2 changed files with 250 additions and 79 deletions

View File

@@ -114,7 +114,6 @@ body {
background-color: #444444; background-color: #444444;
color: #fff; color: #fff;
} }
/*编辑器样式*/
@charset "UTF-8";.ql-container { @charset "UTF-8";.ql-container {
box-sizing: border-box; box-sizing: border-box;
font-family: Helvetica,Arial,sans-serif; font-family: Helvetica,Arial,sans-serif;
@@ -144,21 +143,7 @@ body {
margin: 0; margin: 0;
padding: 0 padding: 0
} }
/* 空白占位符样式 */
.space-char {
display: inline;
white-space: pre; /* 保留空白 */
position: relative;
padding-right: 0.15em; /* 视觉间距补偿 */
}
.space-char:after {
content: " ";
visibility: hidden;
}
.space-replaced {
display: inline;
white-space: normal;
}
.ql-editor { .ql-editor {
box-sizing: border-box; box-sizing: border-box;
line-height: 1.42; line-height: 1.42;
@@ -169,37 +154,20 @@ body {
tab-size: 4; tab-size: 4;
-moz-tab-size: 4; -moz-tab-size: 4;
text-align: left; text-align: left;
word-wrap: break-word; white-space: pre-wrap;
overflow-wrap: break-word; word-wrap: break-word
word-break: normal;
white-space: normal;
} }
.ql-editor>* { .ql-editor>* {
cursor: text; cursor: text
word-break: normal;
overflow-wrap: normal;
} }
.ql-editor p,.ql-editor ol,.ql-editor ul,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6 { .ql-editor p,.ql-editor ol,.ql-editor ul,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6 {
margin: 0; margin: 0;
padding: 0; padding: 0;
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
white-space: normal;
}
/* 移动端优化 */
@media (max-width: 768px) {
.narshelpCenterdetail-app .nhlp-app-content {
width: 95%;
}
.ql-editor p,
.ql-editor li {
display: block; /* 移动端改用块级布局 */
}
} }
.ql-editor ol,.ql-editor ul { .ql-editor ol,.ql-editor ul {
padding-left: 1.5em padding-left: 1.5em
} }
@@ -594,27 +562,15 @@ body {
} }
.ql-editor .ql-size-small { .ql-editor .ql-size-small {
font-size: .75em; font-size: .75em
word-wrap: break-word; /* 兼容旧浏览器 */
overflow-wrap: break-word; /* 优先在空格处换行,避免单词拆分 */
word-break: normal; /* 禁止强制拆分单词 */
hyphens: auto; /* 可选:超长单词用连字符换行(更优雅) */
} }
.ql-editor .ql-size-large { .ql-editor .ql-size-large {
font-size: 1.5em; font-size: 1.5em
word-wrap: break-word; /* 兼容旧浏览器 */
overflow-wrap: break-word; /* 优先在空格处换行,避免单词拆分 */
word-break: normal; /* 禁止强制拆分单词 */
hyphens: auto; /* 可选:超长单词用连字符换行(更优雅) */
} }
.ql-editor .ql-size-huge { .ql-editor .ql-size-huge {
font-size: 2.5em; font-size: 2.5em
word-wrap: break-word; /* 兼容旧浏览器 */
overflow-wrap: break-word; /* 优先在空格处换行,避免单词拆分 */
word-break: normal; /* 禁止强制拆分单词 */
hyphens: auto; /* 可选:超长单词用连字符换行(更优雅) */
} }
.ql-editor .ql-direction-rtl { .ql-editor .ql-direction-rtl {
@@ -1229,7 +1185,7 @@ body {
} }
.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before { .ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before {
content: "14px" content: "12px"
} }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before { .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before {
@@ -1283,3 +1239,119 @@ body {
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before { .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before {
content: "等宽字体" content: "等宽字体"
} }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]:before {
font-family: SimSun,sans-serif;
content: "宋体"
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]:before {
font-family: SimHei,sans-serif;
content: "黑体"
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]:before {
font-family: Microsoft YaHei,sans-serif;
content: "微软雅黑"
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]:before {
font-family: KaiTi,sans-serif;
content: "楷体"
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]:before {
font-family: FangSong,sans-serif;
content: "仿宋"
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]:before {
font-family: Arial,sans-serif;
content: "Arial"
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]:before {
font-family: Times New Roman,sans-serif;
content: "Times New Roman"
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]:before {
font-family: sans-serif;
content: "sans-serif"
}
.ql-font-SimSun {
font-family: SimSun,sans-serif
}
.ql-font-SimHei {
font-family: SimHei,sans-serif
}
.ql-font-Microsoft-YaHei {
font-family: Microsoft YaHei,sans-serif
}
.ql-font-KaiTi {
font-family: KaiTi,sans-serif
}
.ql-font-FangSong {
font-family: FangSong,sans-serif
}
.ql-font-Arial {
font-family: Arial,sans-serif
}
.ql-font-Times-New-Roman {
font-family: Times New Roman,sans-serif
}
.ql-font-sans-serif {
font-family: sans-serif
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]:before {
content: "12px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]:before {
content: "14px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]:before {
content: "16px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]:before {
content: "18px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]:before {
content: "20px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]:before {
content: "22px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]:before {
content: "24px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]:before {
content: "26px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]:before {
content: "28px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]:before {
content: "30px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]:before {
content: "32px"
}

View File

@@ -254,23 +254,18 @@ div{
tab-size: 4; tab-size: 4;
-moz-tab-size: 4; -moz-tab-size: 4;
text-align: left; text-align: left;
word-wrap: normal; white-space: pre-wrap;
overflow-wrap: normal; word-wrap: break-word
word-break: normal;
hyphens: manual;
white-space: normal;
} }
.ql-editor>* { .ql-editor>* {
cursor: text; cursor: text
} }
.ql-editor p,.ql-editor ol,.ql-editor ul,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6 { .ql-editor p,.ql-editor ol,.ql-editor ul,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6 {
margin: 0; margin: 0;
padding: 0; padding: 0;
counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9
overflow-wrap: anywhere;
word-break: keep-all;
} }
.ql-editor ol,.ql-editor ul { .ql-editor ol,.ql-editor ul {
@@ -667,27 +662,15 @@ div{
} }
.ql-editor .ql-size-small { .ql-editor .ql-size-small {
font-size: .75em; font-size: .75em
word-wrap: break-word; /* 兼容旧浏览器 */
overflow-wrap: break-word; /* 优先在空格处换行,避免单词拆分 */
word-break: normal; /* 禁止强制拆分单词 */
hyphens: auto; /* 可选:超长单词用连字符换行(更优雅) */
} }
.ql-editor .ql-size-large { .ql-editor .ql-size-large {
font-size: 1.5em; font-size: 1.5em
word-wrap: break-word; /* 兼容旧浏览器 */
overflow-wrap: break-word; /* 优先在空格处换行,避免单词拆分 */
word-break: normal; /* 禁止强制拆分单词 */
hyphens: auto; /* 可选:超长单词用连字符换行(更优雅) */
} }
.ql-editor .ql-size-huge { .ql-editor .ql-size-huge {
font-size: 2.5em; font-size: 2.5em
word-wrap: break-word; /* 兼容旧浏览器 */
overflow-wrap: break-word; /* 优先在空格处换行,避免单词拆分 */
word-break: normal; /* 禁止强制拆分单词 */
hyphens: auto; /* 可选:超长单词用连字符换行(更优雅) */
} }
.ql-editor .ql-direction-rtl { .ql-editor .ql-direction-rtl {
@@ -1302,7 +1285,7 @@ div{
} }
.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before { .ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before {
content: "14px" content: "12px"
} }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before { .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before {
@@ -1356,3 +1339,119 @@ div{
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before { .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before {
content: "等宽字体" content: "等宽字体"
} }
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]:before {
font-family: SimSun,sans-serif;
content: "宋体"
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]:before {
font-family: SimHei,sans-serif;
content: "黑体"
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]:before {
font-family: Microsoft YaHei,sans-serif;
content: "微软雅黑"
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]:before {
font-family: KaiTi,sans-serif;
content: "楷体"
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]:before {
font-family: FangSong,sans-serif;
content: "仿宋"
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]:before {
font-family: Arial,sans-serif;
content: "Arial"
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]:before {
font-family: Times New Roman,sans-serif;
content: "Times New Roman"
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]:before {
font-family: sans-serif;
content: "sans-serif"
}
.ql-font-SimSun {
font-family: SimSun,sans-serif
}
.ql-font-SimHei {
font-family: SimHei,sans-serif
}
.ql-font-Microsoft-YaHei {
font-family: Microsoft YaHei,sans-serif
}
.ql-font-KaiTi {
font-family: KaiTi,sans-serif
}
.ql-font-FangSong {
font-family: FangSong,sans-serif
}
.ql-font-Arial {
font-family: Arial,sans-serif
}
.ql-font-Times-New-Roman {
font-family: Times New Roman,sans-serif
}
.ql-font-sans-serif {
font-family: sans-serif
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]:before {
content: "12px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]:before {
content: "14px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]:before {
content: "16px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]:before {
content: "18px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]:before {
content: "20px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]:before {
content: "22px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]:before {
content: "24px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]:before {
content: "26px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]:before {
content: "28px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]:before {
content: "30px"
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]:before {
content: "32px"
}