看了10款文档编辑器以后, 我决定...

做为一名技术工做者, 咱们常常会遇到编写技术文档, 技术分享等需求, 网上也有不少现成的文档管理工具, 出于好奇心, 我拉着朋友一块儿实现了一个, 用来自给自足. 接下来就来介绍一下轻量级且灵活方便的文档编辑工具—— powerNice.

powerNice 提供两种方式来编写文章/文档, 即程序员最喜欢的 markdown, 也可使用非技术人员最容易上手的富文本编辑器.

demo演示

技术选型

实现 powerNice 在线文档编辑器咱们采用以下核心技术栈:

• React
• Ant Design
• Dva
• For-editor
• Braft-editor
• Nodejs
• 浏览器指纹识别技术

功能盘点

1.多模式编辑

多模式编辑主要是指咱们能够用富文本和md编辑器来编辑咱们的文章, 咱们采用最熟悉的 React 来实现, 效果以下:

2. 多主题

目前支持2套主题, 浅色和深色, 主要从用户体验的角度方便用户夜间写做. 效果以下:

1. 深色

2. 浅色

3. 支持一键导入导出

为了提升咱们的写做效率以及对文章的多路复用, 咱们提供了一键导入导出文件等功能, 具体以下:

• 导出 Markdown
• 导出 PDF
• 基于文章导出海报图
• 导入 Markdown 文件
• 下载文章 html 内容

使用截图以下:

下载的html内容预览以下: 还原度仍是很是高的~

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数据可视化等前端知识和实战.