feat:字体选择

index.html

@@ -27,6 +27,19 @@
       </div>
       <div class="menu-divider"></div>
       <div class="menu-item">
+        <div class="menu-item__font">
+          <span class="select">微软雅黑</span>
+          <div class="options">
+            <ul>
+              <li data-family='Yahei'>微软雅黑</li>
+              <li data-family="宋体">宋体</li>
+              <li data-family="黑体">黑体</li>
+              <li data-family="Arial">Arial</li>
+              <li data-family="Fantasy">Fantasy</li>
+            </ul>
+          </div>
+        </div>
+
         <div class="menu-item__size-add">
           <i></i>
         </div>

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()
   }

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

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,

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;

src/main.ts

@@ -78,7 +78,18 @@ window.onload = function () {
     instance.command.executeFormat()
   }
 
-  // 字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色
+  // 字体、字体变大、字体变小、加粗、斜体、下划线、删除线、字体颜色、背景色
+  const fontDom = document.querySelector<HTMLDivElement>('.menu-item__font')!
+  const fontSelectDom = fontDom.querySelector<HTMLDivElement>('.select')!
+  const fontOptionDom = fontDom.querySelector<HTMLDivElement>('.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<HTMLDivElement>('.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<HTMLLIElement>(`[data-family=${payload.font}]`)!
+    fontSelectDom.innerText = curFontDom.innerText
+    fontOptionDom.querySelectorAll<HTMLLIElement>('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')

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;