看了10款文檔編輯器以後, 我決定...

做爲一名技術工做者, 咱們常常會遇到編寫技術文檔, 技術分享等需求, 網上也有不少現成的文檔管理工具, 出於好奇心, 我拉着朋友一塊兒實現了一個, 用來自給自足. 接下來就來介紹一下輕量級且靈活方便的文檔編輯工具—— powerNice.javascript

powerNice 提供兩種方式來編寫文章/文檔, 即程序員最喜歡的 markdown, 也可使用非技術人員最容易上手的富文本編輯器.css

demo演示

技術選型

實現 powerNice 在線文檔編輯器咱們採用以下核心技術棧:html

React
Ant Design
Dva
For-editor
Braft-editor
Nodejs
瀏覽器指紋識別技術

功能盤點

1.多模式編輯

多模式編輯主要是指咱們能夠用富文本和md編輯器來編輯咱們的文章, 咱們採用最熟悉的 React 來實現, 效果以下:前端

2. 多主題

目前支持2套主題, 淺色和深色, 主要從用戶體驗的角度方便用戶夜間寫做. 效果以下:java

深色

2. 淺色node

3. 支持一鍵導入導出

爲了提升咱們的寫做效率以及對文章的多路複用, 咱們提供了一鍵導入導出文件等功能, 具體以下:webpack

導出 Markdown
導出 PDF
基於文章導出海報圖
導入 Markdown 文件
下載文章 html 內容

使用截圖以下:css3

下載的html內容預覽以下: 還原度仍是很是高的~git

4. 多模式預覽

多模式預覽主要是右側的預覽區, 咱們支持手機端預覽和pc端預覽, 以下圖: 程序員

5. 字數行數統計

字數行數統計主要是幫助做者作內容統計, 這塊實現不是很難, 咱們看看預覽效果:

6. 文章管理

文章管理主要是管理用戶編寫的內容, 這裏由於咱們作的是線上工具, 用戶識別主要採用瀏覽器指紋識別技術來區分用戶, 用戶能夠輕鬆在編輯器文章列表中切換文章進行編輯, 效果以下:

核心技術實現

1. 導入導出多類型文件

導入md/html文件

導入md文件咱們主要利用ant的upload組件和FileReader API, 具體實現以下:

{
  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的原理也很簡單, 咱們拿到渲染後的html字符串, 利用html模版將其包裝成完整的html, 最後再存儲爲File對象, 利用file-saver實現下載. 思路以下:

核心代碼以下:

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. 基於瀏覽器指紋識別技術的用戶識別

瀏覽器指紋這塊知識點涉及的比較多, 筆者這裏簡單介紹一下canvas指紋.

Canvas指紋是利用系統之間, 字體渲染引擎, 抗鋸齒、次像素渲染等處理方式的差別而實現的一種指紋識別技術. 咱們使用canvas將一樣的文字轉成圖片, 即使使用Canvas繪製相同的元素，但因爲上述的差異獲得的結果也是不一樣的。

因此咱們能夠利用以上技術, 對不一樣用戶瀏覽器進行識別, 從而區分用戶(雖然存在機率事件), 實現無需登陸就能保存對應內容的目的. 基本實現代碼以下:

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
}
複製代碼

你們也能夠參考此方法來設計本身的指紋識別方案.

在線體驗: 傳送門

最後

目前筆者也在持續更新H5編輯器 H5-Dooring, 近期更新以下:

修復圖片庫選擇bug
添加省市級聯組件
添加批量導入 excel 數據的能力
添加表單自定義校驗
音頻組件添加自動播放控制, 循環播放等配置項
添加橫向滑動組件

以爲有用？喜歡就收藏，順便點個贊吧，你的支持是我最大的鼓勵！微信搜「趣談前端」，發現更多有趣的H5遊戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數據可視化等前端知識和實戰.