看了10款文檔編輯器之后...
暖春臨近
作為一名技術(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ù)選型
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套主題, 淺色和深色, 主要從用戶(hù)體驗(yàn)的角度方便用戶(hù)夜間寫(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. 文章管理
文章管理主要是管理用戶(hù)編寫(xiě)的內(nèi)容, 這里因?yàn)槲覀冏龅氖蔷€上工具, 用戶(hù)識(shí)別主要采用瀏覽器指紋識(shí)別技術(shù)來(lái)區(qū)分用戶(hù), 用戶(hù)可以輕松在編輯器文章列表中切換文章進(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ù)的用戶(hù)識(shí)別
瀏覽器指紋這塊知識(shí)點(diǎn)涉及的比較多, 筆者這里簡(jiǎn)單介紹一下canvas指紋.
Canvas指紋是利用系統(tǒng)之間, 字體渲染引擎, 抗鋸齒、次像素渲染等處理方式的差異而實(shí)現(xiàn)的一種指紋識(shí)別技術(shù). 我們使用canvas將同樣的文字轉(zhuǎn)成圖片, 即便使用Canvas繪制相同的元素，但由于上述的差別得到的結(jié)果也是不同的。
所以我們可以利用以上技術(shù), 對(duì)不同用戶(hù)瀏覽器進(jìn)行識(shí)別, 從而區(qū)分用戶(hù)(雖然存在概率事件), 實(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
}
最后
目前筆者也在持續(xù)更新H5編輯器?H5-Dooring, 近期更新如下:
修復(fù)圖片庫(kù)選擇bug
添加省市級(jí)聯(lián)組件
添加批量導(dǎo)入 excel 數(shù)據(jù)的能力
添加表單自定義校驗(yàn)
音頻組件添加自動(dòng)播放控制, 循環(huán)播放等配置項(xiàng)
添加橫向滑動(dòng)組件
覺(jué)得有用 ？喜歡就收藏，順便點(diǎn)個(gè)贊吧，你的支持是我最大的鼓勵(lì)！微信搜 “趣談前端”，發(fā)現(xiàn)更多有趣的H5游戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數(shù)據(jù)可視化等前端知識(shí)和實(shí)戰(zhàn).