github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 添加增大/减小字号按钮

Browse Source
This commit is contained in:
pipipi-pikachu 2022-05-14 17:01:02 +08:00
parent d5da6f3a37
commit 6fe17bc6d8
5 changed files with 120 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/utils/prosemirror/utils.ts
View File

@ -217,6 +217,12 @@ export const getTextAttrs = (view: EditorView, defaultAttrs: DefaultAttrs = {})
export type TextAttrs = ReturnType<typeof getTextAttrs>
export const getFontsize = (view: EditorView) => {
const marks = getMarkAttrs(view)
const fontsize = getAttrValue(marks, 'fontsize', 'fontsize') || _defaultAttrs.fontsize
return parseInt(fontsize)
}
export const defaultRichTextAttrs: TextAttrs = {
bold: false,
em: false,

45
src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
View File

@ -87,12 +87,40 @@
/>
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
<Button class="text-color-btn" style="flex: 1;">
<Button class="text-color-btn" style="flex: 3;">
<IconText />
<div class="text-color-block" :style="{ backgroundColor: richTextAttrs.color }"></div>
</Button>
</Tooltip>
</Popover>
<Popover trigger="click">
<template #content>
<ColorPicker
:modelValue="richTextAttrs.backcolor"
@update:modelValue="value => updateFontStyle('backcolor', value)"
/>
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字高亮">
<Button class="text-color-btn" style="flex: 3;">
<IconHighLight />
<div class="text-color-block" :style="{ backgroundColor: richTextAttrs.backcolor }"></div>
</Button>
</Tooltip>
</Popover>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="增大字号">
<Button
class="font-size-btn"
style="flex: 2;"
@click="updateFontStyle('fontsize-add', '2')"
><IconFontSize />+</Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="减小字号">
<Button
class="font-size-btn"
style="flex: 2;"
@click="updateFontStyle('fontsize-reduce', '2')"
><IconFontSize />-</Button>
</Tooltip>
</ButtonGroup>
<RadioGroup
class="row"
@ -245,4 +273,19 @@ export default defineComponent({
align-items: center;
margin-bottom: 10px;
}
.text-color-btn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0;
}
.text-color-block {
width: 16px;
height: 3px;
margin-top: 1px;
}
.font-size-btn {
padding: 0;
}
</style>

34
src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
View File

@ -111,12 +111,40 @@
/>
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
<Button class="text-color-btn" style="flex: 1;">
<Button class="text-color-btn" style="flex: 3;">
<IconText />
<div class="text-color-block" :style="{ backgroundColor: richTextAttrs.color }"></div>
</Button>
</Tooltip>
</Popover>
<Popover trigger="click">
<template #content>
<ColorPicker
:modelValue="richTextAttrs.backcolor"
@update:modelValue="value => emitRichTextCommand('backcolor', value)"
/>
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字高亮">
<Button class="text-color-btn" style="flex: 3;">
<IconHighLight />
<div class="text-color-block" :style="{ backgroundColor: richTextAttrs.backcolor }"></div>
</Button>
</Tooltip>
</Popover>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="增大字号">
<Button
class="font-size-btn"
style="flex: 2;"
@click="emitRichTextCommand('fontsize-add')"
><IconFontSize />+</Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="减小字号">
<Button
class="font-size-btn"
style="flex: 2;"
@click="emitRichTextCommand('fontsize-reduce')"
><IconFontSize />-</Button>
</Tooltip>
</ButtonGroup>
<CheckboxButtonGroup class="row">
@ -325,12 +353,16 @@ export default defineComponent({
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0;
}
.text-color-block {
width: 16px;
height: 3px;
margin-top: 1px;
}
.font-size-btn {
padding: 0;
}
.slider {
flex: 3;
}

24
src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
View File

@ -51,7 +51,7 @@
/>
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
<Button class="text-color-btn" style="flex: 1;">
<Button class="text-color-btn" style="flex: 3;">
<IconText />
<div class="text-color-block" :style="{ backgroundColor: richTextAttrs.color }"></div>
</Button>
@ -65,12 +65,26 @@
/>
</template>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字高亮">
<Button class="text-color-btn" style="flex: 1;">
<IconBackgroundColor />
<Button class="text-color-btn" style="flex: 3;">
<IconHighLight />
<div class="text-color-block" :style="{ backgroundColor: richTextAttrs.backcolor }"></div>
</Button>
</Tooltip>
</Popover>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="增大字号">
<Button
class="font-size-btn"
style="flex: 2;"
@click="emitRichTextCommand('fontsize-add')"
><IconFontSize />+</Button>
</Tooltip>
<Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="减小字号">
<Button
class="font-size-btn"
style="flex: 2;"
@click="emitRichTextCommand('fontsize-reduce')"
><IconFontSize />-</Button>
</Tooltip>
</ButtonGroup>
<CheckboxButtonGroup class="row">
@ -476,12 +490,16 @@ export default defineComponent({
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0;
}
.text-color-block {
width: 16px;
height: 3px;
margin-top: 1px;
}
.font-size-btn {
padding: 0;
}
.link-popover {
width: 240px;

17
src/views/components/element/ProsemirrorEditor.vue
View File

@ -13,7 +13,7 @@ import { useMainStore } from '@/store'
import { EditorView } from 'prosemirror-view'
import { toggleMark, wrapIn, selectAll } from 'prosemirror-commands'
import { initProsemirrorEditor, createDocument } from '@/utils/prosemirror'
import { findNodesWithSameMark, getTextAttrs, autoSelectAll, addMark, markActive } from '@/utils/prosemirror/utils'
import { findNodesWithSameMark, getTextAttrs, autoSelectAll, addMark, markActive, getFontsize } from '@/utils/prosemirror/utils'
import emitter, { EmitterEvents, RichTextCommand } from '@/utils/emitter'
import { alignmentCommand } from '@/utils/prosemirror/commands/setTextAlign'
import { toggleList } from '@/utils/prosemirror/commands/toggleList'
@ -141,6 +141,21 @@ export default defineComponent({
autoSelectAll(editorView)
addMark(editorView, mark)
}
else if (item.command === 'fontsize-add') {
const step = item.value ? +item.value : 2
autoSelectAll(editorView)
const fontsize = getFontsize(editorView) + step + 'px'
const mark = editorView.state.schema.marks.fontsize.create({ fontsize })
addMark(editorView, mark)
}
else if (item.command === 'fontsize-reduce') {
const step = item.value ? +item.value : 2
autoSelectAll(editorView)
let fontsize = getFontsize(editorView) - step
if (fontsize < 12) fontsize = 12
const mark = editorView.state.schema.marks.fontsize.create({ fontsize: fontsize + 'px' })
addMark(editorView, mark)
}
else if (item.command === 'color' && item.value) {
const mark = editorView.state.schema.marks.forecolor.create({ color: item.value })
autoSelectAll(editorView)