基于nodejs+electron+react+slatejs开发的一款带有plugin系统的富文本应用
发布于 5 年前 作者 giddens9527 4018 次浏览 来自 分享

我和好基友一起开发了Tea,一款带有plugin系统的富文本应用,可以想象成是给程序员用的笔记应用,基于nodejs+electron+react+slatejs(一款富文本编辑器框架)。

alt text

技术栈

  1. electron:桌面多平台web开发框架
  2. nodejs:electron里自带,跟操作系统、文件系统交互需要
  3. react:前端框架
  4. material-ui:基于react的material UI框架
  5. slate.js: 这是一个革命性的富文本框架,基于react
  6. Webpack:构建工具
  7. babel:转译工具
  8. 阿里云:自动更新

废话不多说,功能上图:

1. 所见即所得的 Markdown

alt text

2. 各种高效的快捷键

  • 图片、标题等对象的插入,可以通过在段首打 @ 呼出

alt text

  • 通过 ⌘ + / (Windows 下是Ctrl + /) ,可以查看所有的快捷键,和 Markdown 格式

alt text

3. 插件

目前我们自己开发的插件有:

  • Vim 模式
  • 公式编辑——支持 Latex 公式输入
  • Markdown 编辑——没错,上面说的所见即所得的 Markdown,其实是一个插件😎
  • 炸裂模式——见下图,Atom 用户,让我看到你们的双手🤘🤘

alt text

4. 速记

一个即时贴功能,我们称为小窗口。按下快捷键,Ctrl + Shift + 空格,弹出;再按一次快捷键,关闭。

alt text

5. 极简的界面

alt text

未来

alt text

目前在我们 backlog 里的功能有:

  1. Command ( Ctrl ) + Shift + P 命令面板
  2. 代码片段中代码直接运行
  3. 内置 Terminal
  4. Solarized、Dracula 等各种主题
  5. 分屏
  6. GitHub Gist 整合
  7. Presentation 模式
  8. 类似 Sublime 的 Minimap
  9. 自定义快捷键
  10. 流程图、思维导图等图表插入
  11. 。。。

欢迎大家给我们提出你想要的功能建议。

enjoy

6 回复

开源吗,我也想开发个这个

我也打算开发的

@cllgeek 抱歉回晚啦 欢迎下载试用哈 目前我们的目标是一切皆可插件化,以后会把插件API开放

@afacode 可以加我们公众号交流一下 富文本编辑器的坑神马的哈哈

回到顶部