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

徐小夕 等级 391 0 0

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

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

demo演示

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

技术选型

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

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

功能盘点

1.多模式编辑

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

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

2. 多主题

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

  1. 深色 看了10款文档编辑器之后, 我决定...

  2. 浅色

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

3. 支持一键导入导出

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

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

使用截图如下:

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

下载的html内容预览如下: 看了10款文档编辑器之后, 我决定... 还原度还是非常高的~

4. 多模式预览

多模式预览主要是右侧的预览区, 我们支持手机端预览和pc端预览, 如下图: 看了10款文档编辑器之后, 我决定...

5. 字数行数统计

字数行数统计主要是帮助作者做内容统计, 这块实现不是很难, 我们看看预览效果: 看了10款文档编辑器之后, 我决定...

6. 文章管理

文章管理主要是管理用户编写的内容, 这里因为我们做的是线上工具, 用户识别主要采用浏览器指纹识别技术来区分用户, 用户可以轻松在编辑器文章列表中切换文章进行编辑, 效果如下:

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

核心技术实现

1. 导入导出多类型文件

  • 导入md/html文件 导入md文件我们主要利用antupload组件和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实现下载. 思路如下: 看了10款文档编辑器之后, 我决定...

核心代码如下:

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

收藏
评论区

相关推荐

一个爬虫的故事:这是人干的事儿?
本文转载自 轩辕之风的文章,链接 https://mp.weixin.qq.com/s/YygbUWpa2mbPZPuPNhdt2w 爬虫原理 我是一个爬虫,每天穿行于互联网之上,爬取我需要的一切。 image.png(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/656d
我是Redis,MySQL大哥被我害惨了!
本文转自 轩辕之风 ,链接如下 https://mp.weixin.qq.com/s?__bizMzIyNjMxOTY0NA&mid2247486528&idx1&sn3f7b09eb21969fdb16f5b0805ff69fed&scene21wechat_redirect 我是Redis 你好,我是Redis,一个叫Antirez的
【Golang】Golang + jwt 实现简易用户认证
<p本文已同步发布到我的个人博客:<a href"https://links.jianshu.com/go?tohttps%3A%2F%2Fglorin.xyz%2F2019%2F11%2F23%2FGolangjwtsimpleauth%2F" target"_blank"https://glorin.xyz/2019/11/23/Golang
轻松教你使用纯css实现水波动画
css3给我们前端开发带来了很便利, 我们可以使用css3 的新特新实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5Dooring编辑器(https://github.com/MrXujiang/h5Dooring) 中的水波动画. (https://imghelloworld.osscnbeijing.aliy
轻松教你使用纯css实现H5-Doorin编辑器中的水波动画
css3给我们前端开发带来了很便利, 我们可以使用css3 的新特性实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5Dooring编辑器(https://github.com/MrXujiang/h5Dooring) 中的水波动画. (https://imghelloworld.osscnbeijing.aliy
《Google SRE》读后感
注:从我的知乎搬移过来,方便管理,link:《Google SRE》读后感(https://link.jianshu.com/?thttps://zhuanlan.zhihu.com/p/22912741?group_id815131133242134528) (https://imghelloworld.osscnbeijing.a
一文搞懂什么是HTTP与HTTPS
(https://blog.csdn.net/petterp/article/details/102779257)Http与Https的区别。 在最近的开发中,深感网络相关基础知识薄弱,于是趁周末好好总结一
20 张图彻底弄懂 HTTPS 的原理
前言 近年来各大公司对信息安全传输越来越重视,也逐步把网站升级到 HTTPS 了,那么大家知道 HTTPS 的原理是怎样的吗,到底是它是如何确保信息安全传输的?网上挺多介绍 HTTPS,但我发现总是或多或少有些点有些遗漏,没有讲全,今天试图由浅入深地把 HTTPS 讲明白,相信大家看完一定能掌握 HTTPS 的原理,本文大纲如下: HTTP 为什么不安全
Pandas案例精进 | 结构化数据非等值范围查找 ③
(https://imghelloworld.osscnbeijing.aliyuncs.com/e6c2856ad5883bc1c88c2f0737ef232e.png) 大家好,我是小五🐶 欢迎来到👉「Pandas案例精进」专栏(https://mp.weixin.qq.com/mp/appmsgalbum?__bizMz
Pandas案例精进 | 结构化数据非等值范围查找 ①
(https://imghelloworld.osscnbeijing.aliyuncs.com/dac5483b3517ff8a0968fc75987d12ad.png) 大家好,我是小五🐶 欢迎来到「Pandas案例精进(https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzU5Nzg5
Pandas案例精进 | 结构化数据非等值范围查找 ②
(https://imghelloworld.osscnbeijing.aliyuncs.com/4971fbce1ecb759123ecc666f3af2c31.png) 大家好,我是小五🐶 欢迎来到「Pandas案例精进」专栏(https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzU5Nzg
被“词云”包围的冰冰会更好看吗?安排
(https://imghelloworld.osscnbeijing.aliyuncs.com/b299933deefc692934e8cc6141ab3894.png) 大家好,我是小五🐶 昨天「凹凸数据」发了一篇张同学投稿的文章《用Python爬取王冰冰vlog弹幕并制作词云(https://mp.weixin.qq.com/
基于Vue.js的Web视频播放器插件vue-vam-video@1.3.6 今日正式发布
前言今日正式发布一款基于Vue.js的Web视频播放器插件。可配置,操作灵活。跟我一起来体验吧!线上地址体验基于vue3.0和vuevamvideo,我开发了一款在线视频播放器。网址:https://www.maomin.club/site/videoplayer/ 源代码:https://github.com/maomincoding/videoplay
3分钟快速搭建web服务器,这一篇你值得收藏
前言今日正式发布一款基于Vue.js的Web视频播放器插件。可配置,操作灵活。跟我一起来体验吧!线上地址体验基于vue3.0和vuevamvideo,我开发了一款在线视频播放器。网址:https://www.maomin.club/site/videoplayer/ 源代码:https://github.com/maomincoding/videoplay
https://cloud.tencent.com/developer/article/write/1830331
一、目标今天的目标是这个sign和appcode 二、步骤 Jadx没法上了app加了某梆的企业版,Jadx表示无能为力了。 FRIDADEXDumpDexDump出来,木有找到有效的信息。 Wallbreaker葫芦娃的Wallbreaker可以做些带壳分析,不过这个样本,用Frida的Spawn模式可以载入,Attach模式会失败。而直接用Objecti