fireairforce/markdown-editor

Markdown Editor based on React and Electron.

Introduction

一个基于electron和react开发的桌面端应用程序

样式库使用bootstrap来简化操作,图标库由svg来做的.

hooks 目录下为一些自定义的 hooks

使用prop-types来完成类型检测

使用classnames来完成className的属性拼接

根据文档可以为cra添加sass文件的的解析功能

使用uuid提供创建文件时的唯一 id 值

flattern state:使用索引值，来把对象打平来设计一个效率更高的state

如果要使用electron里面的node模块，按照下面方法引用即可:

const fs = window.require("fs");

makrkown 库的选择

• 支持预览模式
• 支持高亮显示不同的内容
• 自定义工具栏

选用esaymde 来作为本次开发的md文本编辑器。

当然这个库有react版本的，因此可以直接考虑去使用react提供的: react-simplemde-editor

state 设计原则

• 最小化(应用的最小可变状态集)
• 不要重复
• 有些数据可以根据已有的State计算出来
• 使用多个State变量

持久化保存数据(解决方案)

• 数据库软件的方案
• 浏览器相关的解决方案
• 使用Electron Strore(文件保存方式)

这里使用electron store来提供解决方案 地址:https://github.com/sindresorhus/electron-store

const Store = window.require("electron-store");

const store = new Store();
store.set("name", "zoomdong");

console.log(store.get("name"));

导入文件

使用dialog模块来完成导入的功能。

文档地址

这里可以直接在app.js里面使用remote.dialog.showDialog()来打开对话框。

html5-custom-data

适应 html5 里面的data-*属性来使用 dom 获取到对应节点的一些信息。(具体代码参考filelist获取子菜单那部分代码，然后用 useRef 去保存一个 dom 节点值)

菜单

• 原生应用菜单(就是电脑上面的tab栏目)
• 上下文菜单(点击右键弹出来的菜单)

文档地址

应用菜单

代码位于menuTemplate.js目录下面,可以参考官网的模板去进行一个修改。利用shell模块进行开发。这里的menu使用的是主进程里面的事件(使用ipcrenderer来完成快捷键事件的绑定以及添加)。

弹出窗口替代路由模式

一些新的配置窗口使用electron的弹出窗口(渲染进程)来完成，而不去使用react-router-dom去做，这样可以使其更简单。

• 不用增加复杂度，相对独立(同样使用ipcrenderer来使用)
• 配置相对简单，不需要使用框架
• 使用原生的js进行开发

Notice

• 不要过度思考去选择项目目录，直接开干

electron 里面打开控制台调试应用程序的方法有:

mainWindow.webContents.openDevTools();