# mohen-editor

**Repository Path**: yulece-application/mohen-editor

## Basic Information

- **Project Name**: mohen-editor
- **Description**: 个人博客编辑器windows版本。可以同步到个人博客
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-29
- **Last Updated**: 2026-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 墨痕编辑器 (mohen-editor)

离线优先的本地 Markdown 编辑器，可选同步到「墨痕博客」后端。

- 本地文件优先：`localDir` 存 `.md`，断网也能写。
- 可选同步：填 `backendUrl` 后，文章可推送到线上博客（`/api` 接口）。
- 实时协作：同一篇文章在别处被保存时，通过 WebSocket 收到提醒，避免互相覆盖。

## 技术栈

| 层 | 技术 |
|---|---|
| 前端 | Vue 3 + Vite |
| 桌面壳 | Electron（主进程 `electron/main.cjs` + 预加载 `electron/preload.cjs`） |
| 渲染 | `marked` 渲染 Markdown，`DOMPurify` 清洗 |
| 通信 | `axios` 调后端 REST；WebSocket `/ws/article/{id}` 订阅文章变更 |

## 目录结构

```
mohen-editor/
├── index.html                 # 入口 HTML
├── vite.config.js             # 构建配置（含 stripCrossorigin 插件）
├── package.json
├── src/
│   ├── main.js                # 挂载 Vue
│   ├── App.vue
│   ├── views/
│   │   └── LocalEditor.vue    # 主编辑界面
│   ├── api/                   # http.js / index.js（REST 封装）
│   ├── composables/
│   │   ├── useArticleWebSocket.js   # 按文章订阅 WS
│   │   ├── useEditorConfig.js       # 后端地址 / 本地目录配置
│   │   ├── useDraftStore.js         # 草稿本地存储
│   │   └── useToast.js
│   ├── lib/
│   │   ├── markdown.js         # 渲染
│   └── mdEditorTools.js     # 编辑器工具栏操作
│   └── assets/tokens.css
├── electron/
│   ├── main.cjs              # 主进程（IPC：本地文件读写、目录选择、配置）
│   └── preload.cjs
├── dist/                     # 构建产物（gitignore）
└── desktop-app/              # 打包后的 Electron 应用（gitignore）
    ├── 墨痕博客编辑器.exe
    ├── resources/app/dist/   # 复制自上面的 dist/
    └── resources/app/electron/  # 复制自上面的 electron/
```

> `node_modules` 是软链，指向 `blog/frontend/node_modules`，不要单独安装。

## 快速开始（开发）

```bash
# 依赖已通过软链共享，无需单独安装；若首次使用先确保 blog/frontend 装过依赖
npm run dev
```

- Web 模式：浏览器打开 `http://localhost:5173`。
- 桌面模式：`electron .`（需先 `npm run build`，见下）。

## 构建

```bash
npm run build      # 产物输出到 dist/
```

构建会执行 `stripCrossorigin` 插件：**必须**。Electron 用 `file://` 加载本地 `index.html`，而 Vite 默认给 `<script>/<link>` 加 `crossorigin`，会触发 CORS 拒绝加载，导致桌面端白屏。该插件在生成 HTML 后去掉该属性。

## 打包为桌面应用

`desktop-app/` 是组装产物，构建步骤：

```
npm run build
# 将 dist/ 复制进桌面壳
rm -rf desktop-app/resources/app/dist
cp -r dist/* desktop-app/resources/app/dist
```

- `desktop-app/` 内置了 Electron 运行时二进制；`resources/app/electron/*` 复制自仓库 `electron/`，`resources/app/package.json` 复制自仓库根 `package.json`。
- 双击 `desktop-app/墨痕博客编辑器.exe` 即可启动（生产模式 `loadFile` 读 `resources/app/dist/index.html`）。

## 配置

首次运行会引导配置，存到：

- 桌面端：`app.getPath('userData')/editor-config.json`
- 浏览器：`localStorage` 的 `mohen_editor_config`

| 字段 | 说明 |
|---|---|
| `backendUrl` | 后端地址。**开发态**可用相对路径 `/api`（走 Vite 代理）；**桌面 / 生产**需填完整地址，如 `http://localhost:8080/api`，会自动转 `ws://localhost:8080`。空着则纯本地写作，不连后端也不连 WS。 |
| `localDir` | 本地 `.md` 文章的保存目录（`dialog.showOpenDialog` 选择）。 |

## 实时协作（WebSocket）

- 订阅地址：`/ws/article/{id}`。连接建立后服务端回 `subscribed`；某处保存后服务端广播 `changed`，订阅方自行拉取最新版本。
- 桌面端若 `file://` 且未配置完整 `backendUrl`，则不建立 WS（避免 `file:// + /api` 异常）。
- 断线按 3s/6s/10s/10s/15s 退避重连，最多 5 次。

## 与 blog 后端的关系

- 后端事件链：保存文章 → 发布 `ArticleUpdatedEvent` → `ArticleUpdatedWebSocketBroadcaster` 向文章房间广播 `changed`。
- 后端 `/ws/` 转发需在网关配置 `Upgrade` 头（见 `blog/deploy/nginx.conf`），本地 `npm run dev` 已在 `frontend/vite.config.js` 配了 `/ws` 代理（`ws: true`）。

## 备注

- 当前目录尚未初始化 git；`.gitignore` 已就位，需要的话执行 `git init` 即可纳入版本控制。