feat:add font selection and font wysiwyg

Hufe921 · Dec 29, 2022 · 72d6174 · 72d6174
1 parent ca13a3b
commit 72d6174
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -31,11 +31,23 @@
           <span class="select" title="字体">微软雅黑</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>
+              <li data-family="Yahei" style="font-family:'Yahei';">微软雅黑</li>
+              <li data-family="宋体" style="font-family:'宋体';">宋体</li>
+              <li data-family="黑体" style="font-family:'黑体';">黑体</li>
+              <li data-family="仿宋" style="font-family:'仿宋';">仿宋</li>
+              <li data-family="楷体" style="font-family:'楷体';">楷体</li>
+              <li data-family="等线" style="font-family:'等线';">等线</li>
+              <li data-family="华文琥珀" style="font-family:'华文琥珀';">华文琥珀</li>
+              <li data-family="华文楷体" style="font-family:'华文楷体';">华文楷体</li>
+              <li data-family="华文隶书" style="font-family:'华文隶书';">华文隶书</li>
+              <li data-family="华文新魏" style="font-family:'华文新魏';">华文新魏</li>
+              <li data-family="华文行楷" style="font-family:'华文行楷';">华文行楷</li>
+              <li data-family="华文中宋" style="font-family:'华文中宋';">华文中宋</li>
+              <li data-family="华文彩云" style="font-family:'华文彩云';">华文彩云</li>
+              <li data-family="Arial" style="font-family:'Arial';">Arial</li>
+              <li data-family="Segoe UI" style="font-family:'Segoe UI';">Segoe UI</li>
+              <li data-family="Ink Free" style="font-family:'Ink Free';">Ink Free</li>
+              <li data-family="Fantasy" style="font-family:'Fantasy';">Fantasy</li>
             </ul>
           </div>
         </div>

diff --git a/src/main.ts b/src/main.ts
@@ -925,9 +925,10 @@ window.onload = function () {
 
     // 富文本
     fontOptionDom.querySelectorAll<HTMLLIElement>('li').forEach(li => li.classList.remove('active'))
-    const curFontDom = fontOptionDom.querySelector<HTMLLIElement>(`[data-family=${payload.font}]`)
+    const curFontDom = fontOptionDom.querySelector<HTMLLIElement>(`[data-family='${payload.font}']`)
     if (curFontDom) {
       fontSelectDom.innerText = curFontDom.innerText
+      fontSelectDom.style.fontFamily = payload.font
       curFontDom.classList.add('active')
     }
     payload.bold ? boldDom.classList.add('active') : boldDom.classList.remove('active')