找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 7|回复: 0

用 vditor 做了一个桌面 markdown 编辑器,开源,三平台,小

[复制链接]

3

主题

0

回帖

9

积分

新手上路

积分
9
发表于 昨天 10:33 | 显示全部楼层 |阅读模式
mdPad Readme
项目地址 mdPad


mdPad 是一款基于 Wails 框架开发的桌面 Markdown 笔记应用。它结合了 Go 语言的强大后端能力和现代 Web 前端技术,提供流畅、高效的 Markdown 编辑体验。


主要功能:
即时渲染: 采用 Vditor Markdown 编辑器,实现输入即时渲染,所见即所得,无需手动切换预览。


丰富的 Markdown 语法支持: Vditor 支持标准 Markdown 语法,并提供多种扩展语法,例如:


GFM (GitHub Flavored Markdown)
数学公式: 支持 KaTeX 和 MathJax 两种数学公式渲染引擎。
流程图、时序图、甘特图: 使用 mermaid 语法绘制流程图。
脑图: 使用 markmap 语法绘制脑图。
图表: 支持 ECharts 图表库。
五线谱: 支持 ABC.js 渲染五线谱。
桌面应用体验: 基于 Wails 构建,提供原生桌面应用的性能和体验,体积小巧,启动速度快。


跨平台支持: Wails 支持跨平台构建,mdPad 可以在 Windows、macOS 和 Linux 等操作系统上运行。


使用方法:


下载安装: 从发布页面下载对应操作系统的安装包并安装。
启动 mdPad: 运行应用程序。
编辑 Markdown: 在编辑器区域输入 Markdown 文本,会即时显示渲染后的效果。
保存/打开: 使用提供的保存和打开功能管理笔记。
mdPad 开发说明
mdPad 基于 Wails 框架构建,前端使用 Vditor Markdown 编辑器,后端使用 Go 语言。


技术栈:


前端: HTML、CSS、JavaScript、vditor
后端: Go 语言
框架: Wails v2
构建工具: (根据项目实际情况,通常 Wails 项目使用 Go 的构建工具)
开发环境搭建:


安装 Go 环境: 确保已安装 Go 语言环境。
安装 Bun: 按照官方网站(https://bun.sh/)的指引安装 Bun。
安装 Wails CLI:go install github.com/wailsapp/wails/v2/cmd/wails@latest
克隆代码库:
Bash
git clone https://github.com/stxh/mdPad.git
cd mdPad

初始化 Wails 项目(如果需要): 如果是从零开始,可以使用 wails init 创建项目。
安装前端依赖(使用 Bun):
Bash
cd frontend
bun install

运行开发服务器:
Bash
wails dev

代码结构:


(根据项目实际情况进行描述,以下是一个示例)
  1. mdPad/
  2. ├── wails.json         // Wails 配置文件
  3. ├── frontend/          // 前端代码
  4. │   ├── index.html
  5. │   ├── src/           // JavaScript/TypeScript 源代码
  6. │   │   ├── main.js      // 或 main.ts
  7. │   │   └── components/  // 组件
  8. │   │       └── ...
  9. │   ├── package.json
  10. │   └── ...
  11. ├── app.go             // Go 后端代码
  12. ├── main.go            // 程序入口
  13. └── ...


复制代码
关键代码片段:

前端 Vditor 集成:

vidtor

JavaScript
  1. import Vditor from 'vditor'

  2. const vditor = new Vditor('vditor', {
  3.     // Vditor 配置项,例如:
  4.     mode: 'ir', // 即时渲染模式
  5.     height: '100%',
  6.     // ...其他配置
  7. })

复制代码
Go 后端与前端交互: (使用 Wails 提供的绑定机制)
Go
  1. // Go 代码
  2. type App struct {
  3.         runtime *wails.Runtime
  4. }

  5. func (a *App) Greet(name string) string {
  6.         return "Hello " + name + ", from Go!"
  7. }

  8. // 在 main.go 中绑定
  9. app := NewApp()
  10. err := wails.CreateApp(&wails.AppConfig{
  11.         // ...
  12.         Bind: []interface{}{
  13.                 app,
  14.         },
  15.         // ...
  16. })

  17. // 前端 JavaScript 调用 Go 函数
  18. window.backend.App.Greet("World").then(result => {
  19.         console.log(result) // 输出 "Hello World, from Go!"
  20. })
复制代码
贡献代码、构建、其他说明 与之前的版本类似,请参考之前的回复。
重要变更和说明:
所有 npm install 命令都替换为 bun install。
如果需要添加新的包,使用 bun add <package-name> 代替 npm install <package-name>。devDependencies 使用 bun add -d <package-name>。
运行脚本时,使用 bun run <script> 代替 npm run <script>。
通过以上修改,您现在可以使用 Bun 来管理 mdPad 项目的前端依赖,享受 Bun 带来的速度优势。请确保您的开发环境中已正确安装 Bun。

作者:stxh
链接:https://ld246.com/article/1736046563253
来源:链滴
协议:CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/
作者:stxh
链接:https://ld246.com/article/1736046563253
来源:链滴
协议:CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|一起港湾 ( 青ICP备2025004122号-1 )

GMT+8, 2025-4-4 19:49 , Processed in 0.089639 second(s), 20 queries .

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表