diff --git a/cypress/integration/menus/text.spec.ts b/cypress/integration/menus/text.spec.ts
index 12aa394..bc49eed 100644
--- a/cypress/integration/menus/text.spec.ts
+++ b/cypress/integration/menus/text.spec.ts
@@ -37,6 +37,32 @@ describe('菜单-文本处理', () => {
})
})
+ it('字号设置', () => {
+ cy.getEditor().then((editor: Editor) => {
+ editor.command.executeSelectAll()
+
+ editor.command.executeBackspace()
+
+ editor.command.executeInsertElementList([{
+ value: text
+ }])
+
+ editor.command.executeSetRange(0, textLength)
+
+ cy.get('.menu-item__size').as('size').click()
+
+ cy.get('@size')
+ .find('li')
+ .eq(0)
+ .click()
+ .then(() => {
+ const data = editor.command.getValue().data.main
+
+ expect(data[0].size).to.eq(56)
+ })
+ })
+ })
+
it('字体增大', () => {
cy.getEditor().then((editor: Editor) => {
editor.command.executeSelectAll()
diff --git a/docs/guide/command-execute.md b/docs/guide/command-execute.md
index b2149be..13bb0d2 100644
--- a/docs/guide/command-execute.md
+++ b/docs/guide/command-execute.md
@@ -113,6 +113,14 @@ instance.command.executeFormat()
instance.command.executeFont(font: string)
```
+## executeSize
+功能：设置字号
+
+用法：
+```javascript
+instance.command.executeSize(size: number)
+```
+
## executeSizeAdd
功能：增大字号
diff --git a/docs/guide/option.md b/docs/guide/option.md
index 5cad94e..292e2d1 100644
--- a/docs/guide/option.md
+++ b/docs/guide/option.md
@@ -18,6 +18,8 @@ interface IEditorOption {
defaultType?: string; // 默认元素类型。默认：TEXT
defaultFont?: string; // 默认字体。默认：Yahei
defaultSize?: number; // 默认字号。默认：16
+ minSize?: number; // 最小字号。默认：5
+ maxSize?: number; // 最大字号。默认：72
defaultBasicRowMarginHeight?: number; // 默认行高。默认：8
defaultRowMargin?: number; // 默认行间距。默认：1
defaultTabWidth?: number; // 默认tab宽度。默认：32
diff --git a/index.html b/index.html
index 16f2573..088f783 100644
--- a/index.html
+++ b/index.html
@@ -51,6 +51,29 @@
+
diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts
index 09ab135..c5a3085 100644
--- a/src/editor/core/command/Command.ts
+++ b/src/editor/core/command/Command.ts
@@ -22,6 +22,7 @@ export class Command {
private static applyPainterStyle: CommandAdapt['applyPainterStyle']
private static format: CommandAdapt['format']
private static font: CommandAdapt['font']
+ private static size: CommandAdapt['size']
private static sizeAdd: CommandAdapt['sizeAdd']
private static sizeMinus: CommandAdapt['sizeMinus']
private static bold: CommandAdapt['bold']
@@ -96,6 +97,7 @@ export class Command {
Command.applyPainterStyle = adapt.applyPainterStyle.bind(adapt)
Command.format = adapt.format.bind(adapt)
Command.font = adapt.font.bind(adapt)
+ Command.size = adapt.size.bind(adapt)
Command.sizeAdd = adapt.sizeAdd.bind(adapt)
Command.sizeMinus = adapt.sizeMinus.bind(adapt)
Command.bold = adapt.bold.bind(adapt)
@@ -207,11 +209,15 @@ export class Command {
return Command.format()
}
- // 字体、字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色
+ // 字体、字体大小、字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色
public executeFont(payload: string) {
return Command.font(payload)
}
+ public executeSize(payload: number) {
+ return Command.size(payload)
+ }
+
public executeSizeAdd() {
return Command.sizeAdd()
}
diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts
index 663b5f0..5add48e 100644
--- a/src/editor/core/command/CommandAdapt.ts
+++ b/src/editor/core/command/CommandAdapt.ts
@@ -186,40 +186,70 @@ export class CommandAdapt {
this.draw.render({ isSetCursor: false })
}
+ public size(payload: number) {
+ const { minSize, maxSize, defaultSize } = this.options
+ if (payload < minSize || payload > maxSize) return
+ const isReadonly = this.draw.isReadonly()
+ if (isReadonly) return
+ const selection = this.range.getTextLikeSelection()
+ if (!selection || !selection.length) return
+ let isExistUpdate = false
+ selection.forEach(el => {
+ if ((!el.size && payload === defaultSize) || (el.size && el.size === payload)) return
+ el.size = payload
+ isExistUpdate = true
+ })
+ if (isExistUpdate) {
+ this.draw.render({ isSetCursor: false })
+ }
+ }
+
public sizeAdd() {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
- const selection = this.range.getSelection()
- if (!selection) return
- const lessThanMaxSizeIndex = selection.findIndex(s => !s.size || s.size + 2 <= 72)
- const { defaultSize } = this.options
- if (!~lessThanMaxSizeIndex) return
+ const selection = this.range.getTextLikeSelection()
+ if (!selection || !selection.length) return
+ const { defaultSize, maxSize } = this.options
+ let isExistUpdate = false
selection.forEach(el => {
if (!el.size) {
el.size = defaultSize
}
- if (el.size + 2 > 72) return
- el.size += 2
+ if (el.size >= maxSize) return
+ if (el.size + 2 > maxSize) {
+ el.size = maxSize
+ } else {
+ el.size += 2
+ }
+ isExistUpdate = true
})
- this.draw.render({ isSetCursor: false })
+ if (isExistUpdate) {
+ this.draw.render({ isSetCursor: false })
+ }
}
public sizeMinus() {
const isReadonly = this.draw.isReadonly()
if (isReadonly) return
- const selection = this.range.getSelection()
- if (!selection) return
- const greaterThanMaxSizeIndex = selection.findIndex(s => !s.size || s.size - 2 >= 8)
- if (!~greaterThanMaxSizeIndex) return
- const { defaultSize } = this.options
+ const selection = this.range.getTextLikeSelection()
+ if (!selection || !selection.length) return
+ const { defaultSize, minSize } = this.options
+ let isExistUpdate = false
selection.forEach(el => {
if (!el.size) {
el.size = defaultSize
}
- if (el.size - 2 < 8) return
- el.size -= 2
+ if (el.size <= minSize) return
+ if (el.size - 2 < minSize) {
+ el.size = minSize
+ } else {
+ el.size -= 2
+ }
+ isExistUpdate = true
})
- this.draw.render({ isSetCursor: false })
+ if (isExistUpdate) {
+ this.draw.render({ isSetCursor: false })
+ }
}
public bold() {
diff --git a/src/editor/core/range/RangeManager.ts b/src/editor/core/range/RangeManager.ts
index 15da647..2dd7d71 100644
--- a/src/editor/core/range/RangeManager.ts
+++ b/src/editor/core/range/RangeManager.ts
@@ -1,5 +1,6 @@
import { ElementType } from '../..'
import { ZERO } from '../../dataset/constant/Common'
+import { TEXTLIKE_ELEMENT_TYPE } from '../../dataset/constant/Element'
import { ControlComponent } from '../../dataset/enum/Control'
import { IEditorOption } from '../../interface/Editor'
import { IElement } from '../../interface/Element'
@@ -45,6 +46,12 @@ export class RangeManager {
return elementList.slice(startIndex + 1, endIndex + 1)
}
+ public getTextLikeSelection(): IElement[] | null {
+ const selection = this.getSelection()
+ if (!selection) return null
+ return selection.filter(s => !s.type || TEXTLIKE_ELEMENT_TYPE.includes(s.type))
+ }
+
// 获取光标所选位置行信息
public getRangeRow(): RangeRowMap | null {
const { startIndex, endIndex } = this.range
@@ -135,6 +142,7 @@ export class RangeManager {
const type = curElement.type || ElementType.TEXT
// 富文本
const font = curElement.font || this.options.defaultFont
+ const size = curElement.size || this.options.defaultSize
const bold = !~curElementList.findIndex(el => !el.bold)
const italic = !~curElementList.findIndex(el => !el.italic)
const underline = !~curElementList.findIndex(el => !el.underline)
@@ -154,6 +162,7 @@ export class RangeManager {
redo,
painter,
font,
+ size,
bold,
italic,
underline,
@@ -169,6 +178,7 @@ export class RangeManager {
public recoveryRangeStyle() {
if (!this.listener.rangeStyleChange) return
const font = this.options.defaultFont
+ const size = this.options.defaultSize
const rowMargin = this.options.defaultRowMargin
const painter = !!this.draw.getPainterStyle()
const undo = this.historyManager.isCanUndo()
@@ -179,6 +189,7 @@ export class RangeManager {
redo,
painter,
font,
+ size,
bold: false,
italic: false,
underline: false,
diff --git a/src/editor/index.ts b/src/editor/index.ts
index e8515ab..e7ee43a 100644
--- a/src/editor/index.ts
+++ b/src/editor/index.ts
@@ -73,6 +73,8 @@ export default class Editor {
defaultType: 'TEXT',
defaultFont: 'Yahei',
defaultSize: 16,
+ minSize: 5,
+ maxSize: 72,
defaultRowMargin: 1,
defaultBasicRowMarginHeight: 8,
defaultTabWidth: 32,
diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts
index 6eafd6b..624b793 100644
--- a/src/editor/interface/Editor.ts
+++ b/src/editor/interface/Editor.ts
@@ -19,6 +19,8 @@ export interface IEditorOption {
defaultType?: string;
defaultFont?: string;
defaultSize?: number;
+ minSize?: number;
+ maxSize?: number;
defaultBasicRowMarginHeight?: number;
defaultRowMargin?: number;
defaultTabWidth?: number;
diff --git a/src/editor/interface/Listener.ts b/src/editor/interface/Listener.ts
index f822a85..f8f1af2 100644
--- a/src/editor/interface/Listener.ts
+++ b/src/editor/interface/Listener.ts
@@ -9,6 +9,7 @@ export interface IRangeStyle {
redo: boolean;
painter: boolean;
font: string;
+ size: number;
bold: boolean;
italic: boolean;
underline: boolean;
diff --git a/src/main.ts b/src/main.ts
index 5f9e2fb..6eed966 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -81,6 +81,19 @@ window.onload = function () {
instance.command.executeFont(li.dataset.family!)
}
+ const sizeSetDom = document.querySelector('.menu-item__size')!
+ const sizeSelectDom = sizeSetDom.querySelector('.select')!
+ const sizeOptionDom = sizeSetDom.querySelector('.options')!
+ sizeSetDom.title = `设置字号`
+ sizeSetDom.onclick = function () {
+ console.log('size')
+ sizeOptionDom.classList.toggle('visible')
+ }
+ sizeOptionDom.onclick = function (evt) {
+ const li = evt.target as HTMLLIElement
+ instance.command.executeSize(Number(li.dataset.size!))
+ }
+
const sizeAddDom = document.querySelector('.menu-item__size-add')!
sizeAddDom.title = `增大字号(${isApple ? '⌘' : 'Ctrl'}+[)`
sizeAddDom.onclick = function () {
@@ -984,6 +997,14 @@ window.onload = function () {
fontSelectDom.style.fontFamily = payload.font
curFontDom.classList.add('active')
}
+ sizeOptionDom.querySelectorAll('li').forEach(li => li.classList.remove('active'))
+ const curSizeDom = sizeOptionDom.querySelector(`[data-size='${payload.size}']`)
+ if (curSizeDom) {
+ sizeSelectDom.innerText = curSizeDom.innerText
+ curSizeDom.classList.add('active')
+ } else {
+ sizeSelectDom.innerText = `${payload.size}`
+ }
payload.bold ? boldDom.classList.add('active') : boldDom.classList.remove('active')
payload.italic ? italicDom.classList.add('active') : italicDom.classList.remove('active')
payload.underline ? underlineDom.classList.add('active') : underlineDom.classList.remove('active')
diff --git a/src/style.css b/src/style.css
index 0843b68..ac6d4f6 100644
--- a/src/style.css
+++ b/src/style.css
@@ -161,7 +161,14 @@ ul {
position: relative;
}
-.menu-item__font .select {
+.menu-item .menu-item__size {
+ width: 50px;
+ text-align: center;
+ position: relative;
+}
+
+.menu-item__font .select,
+.menu-item__size .select {
width: 100%;
height: 100%;
}