我要入驻
powerNice——轻量级且灵活方便的文档编辑工具
发布自: lowcoder
时间: 2021-9-20
2647人围观
编辑器
文档编辑器

作为一名技术工作者, 我们经常会遇到编写技术文档, 技术分享等需求, 网上也有很多现成的文档管理工具, 出于好奇心, 我拉着朋友一起实现了一个, 用来自给自足. 接下来就来介绍一下轻量级且灵活方便的文档编辑工具—— 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. 文章管理
文章管理主要是管理用户编写的内容, 这里因为我们做的是线上工具, 用户识别主要采用浏览器指纹识别技术来区分用户, 用户可以轻松在编辑器文章列表中切换文章进行编辑, 效果如下:



点个赞支持一下?

评论
我要评论
评论