前言大家好，我是许小希，给大家分享一款在线文档编辑器PowerNice，它可以轻松帮我们编写文档和Key导出html等多种格式，pdf、md、png图片等，如下：最近为了让编辑器满足更多场景的需求，开发了一款桌面软件版本——powernice-electron，支持mac和window。下面介绍一下powernice的技术实现和功能。背景作为一名技术工作者，我们经常会遇到编写技术文档、技术分享等需求，网上也有很多现成的文档管理工具。出于好奇，我拉了一个朋友一起实现了一个，使用自给自足。下面给大家介绍一款轻巧、灵活、方便的文档编辑工具——“powerNice”。“powerNice”提供了两种写文章/文档的方式，即程序员最喜欢的markdown，也可以使用非技术人员最容易上手的富文本编辑器。demo演示技术选型实现“powerNice”在线文档编辑器我们使用了以下核心技术栈：ReactAntDesignDvaFor-editorBraft-editorNodejs浏览器指纹识别技术功能盘点1.多模式编辑多模式编辑主要是指我们可以使用富文本和md编辑器来编辑我们的文章。我们使用大家最熟悉的React来实现效果如下：2.多主题目前支持浅色和深色2套主题，主要是从用户体验的角度出发，方便用户在晚上写作。效果如下：(1)颜色深。(2)浅色。3.支持一键导入导出为了提高我们的写作效率和文章的复用性，我们提供了文件一键导入导出等功能，具体如下：导出Markdown。导出为PDF。根据文章导出海报图像。导入Markdown文件。下载文章html内容。截图如下：下载的html内容预览如下：还原度还是很高的。4.多模式预览多模式预览主要是右边的预览区域。我们支持手机预览和PC预览，如下图：5.字数和行数字数和行数统计主要是帮助作者做内容统计。这部分实现起来并不难，先来看看预览效果：6.文章管理文章管理主要是对用户写的内容进行管理。这里因为我们做的是在线工具，用户识别主要是利用浏览器指纹识别技术来区分用户，用户可以方便的在编辑器文章列表中切换文章进行编辑，效果如下：核心技术实现1.导入导出多-typefiles"importmd/htmlfiles"导入md文件我们主要使用ant的upload组件和FileReaderAPI，具体实现如下：{name:'file',showUploadList:false,beforeUpload(file:any):any{constreader=newFileReader()reader.onload=function(e:Event){constdata=(easany).target.resultif(editor==='richText'){//...}else{//...}}reader.readAsText(file)},}"下载html"下载html的原理也很简单，我们获取渲染后的html字符串，使用html模板将其打包成完整的html，最后存储为一个File对象，使用file-saver进行下载。思路如下：核心代码如下：constdoc=document.querySelector('.for-markdown-preview')asHTMLElementconsthtml=createMDHtml(doc.innerHTML,article)file=newFile([html],`${moment().format('YYYYMMDDHHmmss')}.html`,{type:'text/html;charset=utf-8'})//下载文件saveAs(file)2.用户识别浏览器指纹知识基于浏览器指纹识别技术涉及的点很多。在这里，笔者简单介绍一下canvas指纹。“画布指纹”是利用系统间字体渲染引擎、抗锯齿、亚像素渲染等处理方式的差异而实现的指纹识别技术。我们使用canvas将相同的文字转换成图片，即使使用Canvas绘制相同的元素，也会因为以上的差异导致结果不同。所以我们可以利用以上技术来识别不同的用户浏览器，从而区分用户（虽然存在概率事件），达到无需登录保存相应内容的目的。基本实现代码如下：createFingerprint=()=>{constcanvas=document.getElementById('anchor-uuid')asHTMLCanvasElementconstcontext=canvas.getContext('2d')asCanvasRenderingContext2Dcontext.font='18ptArial'context.textBaseline='top'context.fillText('你好，用户。',2,2)constfingerprint=canvas.toDataURL('image/jpeg')//hashconstsecret='nice'consthash=crypto.createHmac('sha256',secret).update(fingerprint).digest('hex')返回散列}
