Electron实现你自己的Markdown编辑软件

在上一期我们已经实现了文件管理的功能，这篇文章主要会介绍文件顶部栏实现、Markdown编辑器的主体接入以及图床实现。

顶部栏

我们会实现一个顶部栏去管理当前打开的文件，这里主要用到的是antd的Tabs组件。整体的交互如下：

• 点击左侧树的文件时：
  • 当前文件不在顶部栏内，打开比聚焦该文件
  • 如果已经存在，聚焦该文件
• 点击顶部栏的tab，切换到改文件进行编辑
• 点击关闭按钮，关闭对应的tab

点击左侧树的时候，可以如下实现：

这样点击的时候，对应的文件就会出现在顶部tab中，然后我们需要根据tab对应的文件路径去读取相应的文件内容。此时渲染进程可以向主进程发送一个事件，主进程读取到文件内容之后返回给渲染进程，渲染进程再交给编辑器处理。

监听到当前活跃的tab变更之后，向主进程发送事件，主进程接收到事件之后，就可以进行如下的读取文件操作：

这样渲染进程就可以获取到打开的文件内容。

然后来看一下移除标签页的逻辑，根据标签对应的key，从标签页数组中找到对应的项，检查是否要移除的标签页是当前活动标签页（activeKey），如果是的话，需要更新当前活跃的标签页。

如果移除的标签页不是最后一个标签页，就将当前活跃标签页设置为上一个标签页的key，否则设置为第一个标签页的key。最后，如果标签页数组为空，则把activeKey置空。

顶部栏标签管理就实现到这里，下面我们来接入Markdown编辑器的主体。

编辑器主体

因为之前一直写文章用的都是掘金的Markdown编辑器，所以这里我也是直接接入了它的开源版本，由于我使用的是React技术栈，所以需要用到的包是@bytemd/react。

然后还可以安装一些常用的插件，比如@bytemd/plugin-gfm，它是专门处理 GitHub 风格的 Markdown 扩展语法（GitHub Flavored Markdown，简称 GFM）的插件。GFM 是 GitHub 对标准 Markdown 扩展的一种，引入了一些额外的功能，比如说任务列表、删除线、表格等；还有@bytemd/plugin-highlight，这是一个代码高亮的插件。

安装完对应的依赖之后，就可以通过十分简单的代码来使用这个组件了。