lsadmin/canvas-editor_fex765
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat:add font selection and font wysiwyg

Browse Source
This commit is contained in:
Hufe921
2022-12-29 15:54:12 +08:00
parent ca13a3b268
commit 72d6174d7b
2 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+17 -5
View File
@@ -31,11 +31,23 @@
<span class="select" title="字体">微软雅黑</span> <span class="select" title="字体">微软雅黑</span>
<div class="options"> <div class="options">
<ul> <ul>
<li data-family='Yahei'>微软雅黑</li> <li data-family="Yahei" style="font-family:'Yahei';">微软雅黑</li>
<li data-family="宋体">宋体</li> <li data-family="宋体" style="font-family:'宋体';">宋体</li>
<li data-family="黑体">黑体</li> <li data-family="黑体" style="font-family:'黑体';">黑体</li>
<li data-family="Arial">Arial</li> <li data-family="仿宋" style="font-family:'仿宋';">仿宋</li>
<li data-family="Fantasy">Fantasy</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> </ul>
</div> </div>
</div> </div>
src/main.ts
+2 -1
View File
@@ -925,9 +925,10 @@ window.onload = function () {
// 富文本 // 富文本
fontOptionDom.querySelectorAll<HTMLLIElement>('li').forEach(li => li.classList.remove('active')) 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) { if (curFontDom) {
fontSelectDom.innerText = curFontDom.innerText fontSelectDom.innerText = curFontDom.innerText
fontSelectDom.style.fontFamily = payload.font
curFontDom.classList.add('active') curFontDom.classList.add('active')
} }
payload.bold ? boldDom.classList.add('active') : boldDom.classList.remove('active') payload.bold ? boldDom.classList.add('active') : boldDom.classList.remove('active')