mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
perf: 富文本样式优化
This commit is contained in:
parent
84fd78e39f
commit
77f150b354
@ -1,7 +1,7 @@
|
|||||||
.ProseMirror, .ProseMirror-static {
|
.ProseMirror, .ProseMirror-static {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
font-size: 20px;
|
font-size: 16px;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
|
|
||||||
@ -15,19 +15,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
|
margin: 0;
|
||||||
margin-top: var(--paragraphSpace);
|
margin-top: var(--paragraphSpace);
|
||||||
}
|
}
|
||||||
p:first-child {
|
p:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul, ol, li {
|
||||||
|
margin: 0;
|
||||||
|
margin-top: var(--paragraphSpace);
|
||||||
|
}
|
||||||
ul {
|
ul {
|
||||||
list-style-type: disc;
|
list-style-type: disc;
|
||||||
padding-inline-start: 1.25em;
|
padding-inline-start: 1.25em;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
list-style-type: inherit;
|
list-style-type: inherit;
|
||||||
padding: 2px 0;
|
padding: 0.125em 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -37,12 +42,12 @@
|
|||||||
|
|
||||||
li {
|
li {
|
||||||
list-style-type: inherit;
|
list-style-type: inherit;
|
||||||
padding: 2px 0;
|
padding: 0.125em 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
background-color: $borderColor;
|
background-color: #f1f1f1;
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
margin: 0 1px;
|
margin: 0 1px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
@ -60,37 +65,35 @@
|
|||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding-right: 1.2em;
|
padding: 0 1.2em;
|
||||||
padding-left: 1.2em;
|
margin: 0.6em 0;
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
border-left: 4px solid #ddd;
|
border-left: 4px solid #e0e0e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-indent='1'] {
|
[data-indent='1'] {
|
||||||
padding-left: 20px;
|
padding-left: 1em;
|
||||||
}
|
}
|
||||||
[data-indent='2'] {
|
[data-indent='2'] {
|
||||||
padding-left: 40px;
|
padding-left: 2em;
|
||||||
}
|
}
|
||||||
[data-indent='3'] {
|
[data-indent='3'] {
|
||||||
padding-left: 60px;
|
padding-left: 3em;
|
||||||
}
|
}
|
||||||
[data-indent='4'] {
|
[data-indent='4'] {
|
||||||
padding-left: 80px;
|
padding-left: 4em;
|
||||||
}
|
}
|
||||||
[data-indent='5'] {
|
[data-indent='5'] {
|
||||||
padding-left: 100px;
|
padding-left: 5em;
|
||||||
}
|
}
|
||||||
[data-indent='6'] {
|
[data-indent='6'] {
|
||||||
padding-left: 120px;
|
padding-left: 6em;
|
||||||
}
|
}
|
||||||
[data-indent='7'] {
|
[data-indent='7'] {
|
||||||
padding-left: 140px;
|
padding-left: 7em;
|
||||||
}
|
}
|
||||||
[data-indent='8'] {
|
[data-indent='8'] {
|
||||||
padding-left: 160px;
|
padding-left: 8em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -203,12 +203,12 @@ export default () => {
|
|||||||
if (styleObj['href']) options.hyperlink = { url: styleObj['href'] }
|
if (styleObj['href']) options.hyperlink = { url: styleObj['href'] }
|
||||||
|
|
||||||
if (bulletFlag && styleObj['list-type'] === 'ol') {
|
if (bulletFlag && styleObj['list-type'] === 'ol') {
|
||||||
options.bullet = { type: 'number', indent: (options.fontSize || 20) * 1.25 }
|
options.bullet = { type: 'number', indent: (options.fontSize || 16) * 1.25 }
|
||||||
options.paraSpaceBefore = 0.1
|
options.paraSpaceBefore = 0.1
|
||||||
bulletFlag = false
|
bulletFlag = false
|
||||||
}
|
}
|
||||||
if (bulletFlag && styleObj['list-type'] === 'ul') {
|
if (bulletFlag && styleObj['list-type'] === 'ul') {
|
||||||
options.bullet = { indent: (options.fontSize || 20) * 1.25 }
|
options.bullet = { indent: (options.fontSize || 16) * 1.25 }
|
||||||
options.paraSpaceBefore = 0.1
|
options.paraSpaceBefore = 0.1
|
||||||
bulletFlag = false
|
bulletFlag = false
|
||||||
}
|
}
|
||||||
|
@ -139,7 +139,7 @@ interface PPTBaseElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export type TextType = 'title' | 'subtitle' | 'content' | 'item' | 'notes' | 'header' | 'footer'
|
export type TextType = 'title' | 'subtitle' | 'content' | 'item' | 'itemTitle' | 'notes' | 'header' | 'footer' | 'partNumber'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 文本元素
|
* 文本元素
|
||||||
|
@ -129,7 +129,7 @@ const paragraph: NodeSpec = {
|
|||||||
textIndentLevel = parseInt(textIndent)
|
textIndentLevel = parseInt(textIndent)
|
||||||
}
|
}
|
||||||
else if (/px/.test(textIndent)) {
|
else if (/px/.test(textIndent)) {
|
||||||
textIndentLevel = Math.floor(parseInt(textIndent) / 20)
|
textIndentLevel = Math.floor(parseInt(textIndent) / 16)
|
||||||
if (!textIndentLevel) textIndentLevel = 1
|
if (!textIndentLevel) textIndentLevel = 1
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -152,7 +152,7 @@ const paragraph: NodeSpec = {
|
|||||||
const { align, indent, textIndent } = node.attrs
|
const { align, indent, textIndent } = node.attrs
|
||||||
let style = ''
|
let style = ''
|
||||||
if (align && align !== 'left') style += `text-align: ${align};`
|
if (align && align !== 'left') style += `text-align: ${align};`
|
||||||
if (textIndent) style += `text-indent: ${textIndent * 20}px;`
|
if (textIndent) style += `text-indent: ${textIndent}em;`
|
||||||
|
|
||||||
const attr: Attr = { style }
|
const attr: Attr = { style }
|
||||||
if (indent) attr['data-indent'] = indent
|
if (indent) attr['data-indent'] = indent
|
||||||
|
@ -184,9 +184,9 @@ interface DefaultAttrs {
|
|||||||
align: Align
|
align: Align
|
||||||
}
|
}
|
||||||
const _defaultAttrs: DefaultAttrs = {
|
const _defaultAttrs: DefaultAttrs = {
|
||||||
color: '#000',
|
color: '#000000',
|
||||||
backcolor: '',
|
backcolor: '',
|
||||||
fontsize: '20px',
|
fontsize: '16px',
|
||||||
fontname: '微软雅黑',
|
fontname: '微软雅黑',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
}
|
}
|
||||||
@ -248,9 +248,9 @@ export const defaultRichTextAttrs: TextAttrs = {
|
|||||||
superscript: false,
|
superscript: false,
|
||||||
subscript: false,
|
subscript: false,
|
||||||
code: false,
|
code: false,
|
||||||
color: '#000',
|
color: '#000000',
|
||||||
backcolor: '',
|
backcolor: '',
|
||||||
fontsize: '20px',
|
fontsize: '16px',
|
||||||
fontname: '微软雅黑',
|
fontname: '微软雅黑',
|
||||||
link: '',
|
link: '',
|
||||||
align: 'left',
|
align: 'left',
|
||||||
|
@ -61,9 +61,11 @@ const textTypeOptions = ref<{ label: string; value: TextType | '' }[]>([
|
|||||||
{ label: '副标题', value: 'subtitle' },
|
{ label: '副标题', value: 'subtitle' },
|
||||||
{ label: '正文', value: 'content' },
|
{ label: '正文', value: 'content' },
|
||||||
{ label: '列表项目', value: 'item' },
|
{ label: '列表项目', value: 'item' },
|
||||||
|
{ label: '列表项标题', value: 'itemTitle' },
|
||||||
{ label: '注释', value: 'notes' },
|
{ label: '注释', value: 'notes' },
|
||||||
{ label: '页眉', value: 'header' },
|
{ label: '页眉', value: 'header' },
|
||||||
{ label: '页脚', value: 'footer' },
|
{ label: '页脚', value: 'footer' },
|
||||||
|
{ label: '节编号', value: 'partNumber' },
|
||||||
])
|
])
|
||||||
|
|
||||||
const slideType = computed(() => currentSlide.value?.type || '')
|
const slideType = computed(() => currentSlide.value?.type || '')
|
||||||
|
Loading…
x
Reference in New Issue
Block a user