前言

大家好, 我是徐小夕, 之前和大家分享了一個(gè)在線文檔編輯器PowerNice, 它可以輕松幫我們編寫(xiě)文檔并一鍵導(dǎo)出多種格式比如html,pdf, md, png圖片等, 如下:

最近為了讓編輯器滿足更多場(chǎng)景需求, 我開(kāi)發(fā)了桌面端軟件版本——powernice-electron, 支持mac 和 window。

接下來(lái)我來(lái)對(duì)powernice 技術(shù)實(shí)現(xiàn)和功能做一個(gè)介紹。

背景

作為一名技術(shù)工作者, 我們經(jīng)常會(huì)遇到編寫(xiě)技術(shù)文檔, 技術(shù)分享等需求, 網(wǎng)上也有很多現(xiàn)成的文檔管理工具, 出于好奇心, 我拉著朋友一起實(shí)現(xiàn)了一個(gè), 用來(lái)自給自足. 接下來(lái)就來(lái)介紹一下輕量級(jí)且靈活方便的文檔編輯工具—— 「powerNice」。

「powerNice」 提供兩種方式來(lái)編寫(xiě)文章/文檔, 即程序員最喜歡的 markdown, 也可以使用非技術(shù)人員最容易上手的富文本編輯器。

Demo演示

技術(shù)選型

實(shí)現(xiàn) 「powerNice」 在線文檔編輯器我們采用如下核心技術(shù)棧：

• React
• Ant Design
• Dva
• For-editor
• Braft-editor
• Nodejs
• 瀏覽器指紋識(shí)別技術(shù)

功能盤(pán)點(diǎn)

1、多模式編輯

多模式編輯主要是指我們可以用富文本和md編輯器來(lái)編輯我們的文章, 我們采用最熟悉的 React 來(lái)實(shí)現(xiàn), 效果如下:

2、多主題

目前支持2套主題, 淺色和深色, 主要從用戶體驗(yàn)的角度方便用戶夜間寫(xiě)作. 效果如下:

深色：

淺色：

3、支持一鍵導(dǎo)入導(dǎo)出

為了提高我們的寫(xiě)作效率以及對(duì)文章的多路復(fù)用, 我們提供了一鍵導(dǎo)入導(dǎo)出文件等功能, 具體如下:

• 導(dǎo)出 Markdown
• 導(dǎo)出 PDF
• 基于文章導(dǎo)出海報(bào)圖
• 導(dǎo)入 Markdown 文件
• 下載文章 html 內(nèi)容

使用截圖如下:

下載的html內(nèi)容預(yù)覽如下：

還原度還是非常高的~

4、多模式預(yù)覽

多模式預(yù)覽主要是右側(cè)的預(yù)覽區(qū), 我們支持手機(jī)端預(yù)覽和pc端預(yù)覽, 如下圖:

5、字?jǐn)?shù)行數(shù)統(tǒng)計(jì)

字?jǐn)?shù)行數(shù)統(tǒng)計(jì)主要是幫助作者做內(nèi)容統(tǒng)計(jì), 這塊實(shí)現(xiàn)不是很難, 我們看看預(yù)覽效果:

6、文章管理

文章管理主要是管理用戶編寫(xiě)的內(nèi)容, 這里因?yàn)槲覀冏龅氖蔷€上工具, 用戶識(shí)別主要采用瀏覽器指紋識(shí)別技術(shù)來(lái)區(qū)分用戶, 用戶可以輕松在編輯器文章列表中切換文章進(jìn)行編輯, 效果如下:

核心技術(shù)實(shí)現(xiàn)

1、導(dǎo)入導(dǎo)出多類(lèi)型文件

「導(dǎo)入md/html文件」導(dǎo)入md文件我們主要利用ant的upload組件和FileReader API, 具體實(shí)現(xiàn)如下:

{
  name: 'file',
  showUploadList: false,
  beforeUpload(file: any): any {
    const reader = new FileReader()
    reader.onload = function(e: Event) {
      const data = (e as any).target.result
      if (editor === 'richText') {
        // ...
      } else {
        // ...
      }
    }
    reader.readAsText(file)
  },
}

「下載html」下載html的原理也很簡(jiǎn)單, 我們拿到渲染后的html字符串, 利用html模版將其包裝成完整的html, 最后再存儲(chǔ)為File對(duì)象, 利用file-saver實(shí)現(xiàn)下載.  思路如下:

核心代碼如下:

const doc = document.querySelector('.for-markdown-preview') as HTMLElement
const html = createMDHtml(doc.innerHTML, article)
file = new File([html], `${moment().format('YYYYMMDDHHmmss')}.html`, { type: 'text/html;charset=utf-8' })
// 下載文件
saveAs(file)

2、基于瀏覽器指紋識(shí)別技術(shù)的用戶識(shí)別

瀏覽器指紋這塊知識(shí)點(diǎn)涉及的比較多, 筆者這里簡(jiǎn)單介紹一下canvas指紋。

「Canvas指紋」是利用系統(tǒng)之間, 字體渲染引擎, 抗鋸齒、次像素渲染等處理方式的差異而實(shí)現(xiàn)的一種指紋識(shí)別技術(shù). 我們使用canvas將同樣的文字轉(zhuǎn)成圖片, 即便使用Canvas繪制相同的元素，但由于上述的差別得到的結(jié)果也是不同的。

所以我們可以利用以上技術(shù), 對(duì)不同用戶瀏覽器進(jìn)行識(shí)別, 從而區(qū)分用戶(雖然存在概率事件), 實(shí)現(xiàn)無(wú)需登錄就能保存對(duì)應(yīng)內(nèi)容的目的. 基本實(shí)現(xiàn)代碼如下:

createFingerprint = () => {
  const canvas = document.getElementById('anchor-uuid') as HTMLCanvasElement
  const context = canvas.getContext('2d') as CanvasRenderingContext2D
  context.font = '18pt Arial'
  context.textBaseline = 'top'
  context.fillText('hello, user.', 2, 2)
  const fingerprint = canvas.toDataURL('image/jpeg')

  // hash
  const secret = 'nice'
  const hash = crypto.createHmac('sha256', secret)
    .update(fingerprint)
    .digest('hex')

  return hash
}

大家也可以參考此方法來(lái)設(shè)計(jì)自己的指紋識(shí)別方案。