From c44d1734526d46db829a091afeb92b4555240893 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Thu, 18 Nov 2021 22:36:35 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=AD=97=E4=BD=93=E9=80=89=E6=8B=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 13 +++++ src/editor/core/command/Command.ts | 8 ++- src/editor/core/command/CommandAdapt.ts | 9 ++++ src/editor/core/range/RangeManager.ts | 4 ++ src/editor/interface/Listener.ts | 1 + src/main.ts | 17 ++++++- src/style.css | 65 +++++++++++++++++++++++++ 7 files changed, 115 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 0f14722..dcd4e3a 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,19 @@
+
+ 微软雅黑 +
+
    +
  • 微软雅黑
    • +
  • 宋体
    • +
  • 黑体
    • +
  • Arial
    • +
  • Fantasy
    • +
+
+
+
diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 7801381..1ca9c19 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -6,6 +6,7 @@ export class Command { private static redo: Function private static painter: Function private static format: Function + private static font: Function private static sizeAdd: Function private static sizeMinus: Function private static bold: Function @@ -22,6 +23,7 @@ export class Command { Command.redo = adapt.redo.bind(adapt) Command.painter = adapt.painter.bind(adapt) Command.format = adapt.format.bind(adapt) + Command.font = adapt.font.bind(adapt) Command.sizeAdd = adapt.sizeAdd.bind(adapt) Command.sizeMinus = adapt.sizeMinus.bind(adapt) Command.bold = adapt.bold.bind(adapt) @@ -51,7 +53,11 @@ export class Command { return Command.format() } - // 字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色 + // 字体、字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色 + public executeFont(payload: string) { + return Command.font(payload) + } + public executeSizeAdd() { return Command.sizeAdd() } diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 231baba..a58dff6 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -58,6 +58,15 @@ export class CommandAdapt { this.draw.render({ isSetCursor: false }) } + public font(payload: string) { + const selection = this.range.getSelection() + if (!selection) return + selection.forEach(el => { + el.font = payload + }) + this.draw.render({ isSetCursor: false }) + } + public sizeAdd() { const selection = this.range.getSelection() if (!selection) return diff --git a/src/editor/core/range/RangeManager.ts b/src/editor/core/range/RangeManager.ts index a7bafd8..5e8264d 100644 --- a/src/editor/core/range/RangeManager.ts +++ b/src/editor/core/range/RangeManager.ts @@ -52,6 +52,7 @@ export class RangeManager { } const curElement = curElementList[curElementList.length - 1] // 富文本 + const font = curElement.font || this.options.defaultFont let bold = !~curElementList.findIndex(el => !el.bold) let italic = !~curElementList.findIndex(el => !el.italic) let underline = !~curElementList.findIndex(el => !el.underline) @@ -66,6 +67,7 @@ export class RangeManager { undo, redo, painter, + font, bold, italic, underline, @@ -77,6 +79,7 @@ export class RangeManager { public recoveryRangeStyle() { if (!this.listener.rangeStyleChange) return + const font = this.options.defaultFont const painter = !!this.draw.getPainterStyle() const undo = this.historyManager.isCanUndo() const redo = this.historyManager.isCanRedo() @@ -84,6 +87,7 @@ export class RangeManager { undo, redo, painter, + font, bold: false, italic: false, underline: false, diff --git a/src/editor/interface/Listener.ts b/src/editor/interface/Listener.ts index f3472e3..8efbb4b 100644 --- a/src/editor/interface/Listener.ts +++ b/src/editor/interface/Listener.ts @@ -2,6 +2,7 @@ export interface IRangeStype { undo: boolean; redo: boolean; painter: boolean; + font: string; bold: boolean; italic: boolean; underline: boolean; diff --git a/src/main.ts b/src/main.ts index b9fe1ac..44c812b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -78,7 +78,18 @@ window.onload = function () { instance.command.executeFormat() } - // 字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色 + // 字体、字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色 + const fontDom = document.querySelector('.menu-item__font')! + const fontSelectDom = fontDom.querySelector('.select')! + const fontOptionDom = fontDom.querySelector('.options')! + fontDom.onclick = function () { + console.log('font') + fontOptionDom.classList.toggle('visible') + } + fontOptionDom.onclick = function (evt) { + const li = evt.target as HTMLLIElement + instance.command.executeFont(li.dataset.family!) + } document.querySelector('.menu-item__size-add')!.onclick = function () { console.log('size-add') instance.command.executeSizeAdd() @@ -156,6 +167,10 @@ window.onload = function () { // 内部事件监听 instance.listener.rangeStyleChange = function (payload) { // 富文本 + const curFontDom = fontOptionDom.querySelector(`[data-family=${payload.font}]`)! + fontSelectDom.innerText = curFontDom.innerText + fontOptionDom.querySelectorAll('li').forEach(li => li.classList.remove('active')) + curFontDom.classList.add('active') 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 c1253c6..1edd009 100644 --- a/src/style.css +++ b/src/style.css @@ -7,6 +7,10 @@ body { background-color: #F2F4F7; } +ul { + list-style: none; +} + .menu { width: 100%; height: 60px; @@ -68,6 +72,67 @@ body { border: 1px solid #e2e6ed; } +.menu-item .select { + border: none; + font-size: 12px; + line-height: 24px; + user-select: none; +} + +.menu-item .select::after { + position: absolute; + content: ""; + top: 11px; + width: 0; + height: 0; + right: 2px; + border-color: #767c85 transparent transparent; + border-style: solid solid none; + border-width: 3px 3px 0; +} + +.menu-item .options { + width: 70px; + position: absolute; + left: 0; + top: 25px; + padding: 10px; + background: #fff; + font-size: 14px; + box-shadow: 0 2px 12px 0 rgb(56 56 56 / 20%); + border: 1px solid #e2e6ed; + border-radius: 2px; + display: none; +} + +.menu-item .options.visible { + display: block; +} + +.menu-item .options li { + padding: 5px; + margin: 5px 0; + transition: all .3s; +} + +.menu-item .options li:hover { + background-color: #ebecef; +} + +.menu-item .options li.active { + background-color: #e2e6ed; +} + +.menu-item .menu-item__font { + width: 65px; + position: relative; +} + +.menu-item__font .select { + width: 100%; + height: 100%; +} + .menu-item__undo.no-allow, .menu-item__redo.no-allow { color: #c0c4cc;