# notepad

**Repository Path**: mingyangde/notepad

## Basic Information

- **Project Name**: notepad
- **Description**: 使用 Electron 实现的一个类似 EditPlus 的简易记事本代码编辑器
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-09-23
- **Last Updated**: 2022-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 运行项目

- 先将项目下载到本地
- `npm i` 安装依赖
- `npm start` 启动项目
- `npm run make` 打包项目（经尝试 npm 打包报错，换用 cnpm 打包成功）

# 开发步骤

- `npx create-electron-app notepad` 使用 electron-forge 创建项目

## 集成 codemirror 编辑器插件

1. 下载 codemirror 包

- `npm i -S codemirror`

2. 在 index.html 中引入 codemirror 主文件

- `<link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css" />`
- `<script src="../node_modules/codemirror/lib/codemirror.js"></script>`

3. 引入主题样式

- `<link rel="stylesheet" href="../node_modules/codemirror/theme/monokai.css" />`

4. 引入对应编辑器语言的 js（下面以 html 语言为例）

- 打开 `node_modules/codemirror/mode/htmlmixed/htmlmixed.js` 查看依赖文件有 codemirror xml javascript css 四个
- codemirror.js 主文件在上一步已引入
- 下面先引入其它依赖
- `<script src="../node_modules/codemirror/mode/xml/xml.js"></script>`
- `<script src="../node_modules/codemirror/mode/javascript/javascript.js"></script>`
- `<script src="../node_modules/codemirror/mode/css/css.js"></script>`
- 最后引入 htmlmixed.js
- `<script src="../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>`

5. 编辑代码

```javascript
let editor = CodeMirror.fromTextArea(document.getElementById("textarea"), {
  mode: "htmlmixed", // 编辑器语言
  theme: "monokai", // 编辑器主题
  lineNumbers: true, // 显示行号
});

// 新建和打开文件时通过 editor.setValue() 设置编辑器的内容
editor.setValue();
```

# 注

- 由于集成了 codemirror 编辑器插件，故 textarea 的 oninput 事件失效

# 附录

- [electron-forge](https://www.electronforge.io/)
- [codemirror npm 地址](https://www.npmjs.com/package/codemirror)
- [codemirror 官方文档](https://codemirror.net/)
- [codemirror 使用参考文档](https://blog.csdn.net/qq_39670012/article/details/108062240)