📝 Lianshu Markdown 编辑器

基于 Milkdown 和 Vue 3 构建的现代化 Markdown 编辑器，适用于嵌入到各种应用中。

✨ 功能特性

• 🎯 完整的 Markdown 支持 - 基于 CommonMark 规范
• 🎨 自定义工具栏 - 使用 Vue 组件实现的美观工具栏
• 🤖 AI 智能润色 - 集成 AI 功能，一键优化文本
• ↩️ 撤销/重做 - 完整的历史记录支持
• 🎭 实时状态高亮 - 格式按钮根据光标位置智能高亮
• 📱 响应式设计 - 适配各种屏幕尺寸
• 🎪 现代化 UI - 精美的界面设计和流畅的动画效果

🛠️ 技术栈

• Vue 3 (Composition API + <script setup>)
• TypeScript - 类型安全
• Milkdown - 强大的 Markdown 编辑器框架
• Vite - 快速的构建工具
• ProseMirror - 底层编辑器内核

📦 安装和使用

Web 项目中使用

npm install @lianshu/editor

<template>
  <MilkdownEditor v-model="content" />
</template>

<script setup>
import { ref } from 'vue'
import { MilkdownEditor } from '@lianshu/editor'
import '@lianshu/editor/dist/style.css'

const content = ref('# Hello World')
</script>

原生应用（macOS/iOS）中使用

从 Releases 下载 lianshu-editor-dist-vX.X.X.zip，详见 MACOS_INTEGRATION.md

完整使用文档

查看 DISTRIBUTION.md 了解所有使用方式。

🛠️ 本地开发

安装依赖

npm install

启动开发服务器

npm run dev

浏览器访问：http://localhost:5173

构建

# 构建 Web 应用（生成 dist/）
npm run build

# 构建 NPM 包（生成 lib/）
npm run build:lib

# 构建所有
npm run build:all

📁 项目结构

lianshu-editor/
├── src/
│   ├── App.vue                    # 应用入口组件
│   ├── main.ts                    # Vue 应用启动入口
│   ├── components/
│   │   ├── MilkdownEditor.vue     # Milkdown 编辑器核心组件
│   │   └── Toolbar.vue            # 自定义工具栏组件
│   ├── plugins/
│   │   └── AiPlugin.ts            # AI 润色插件
│   └── styles/
│       └── editor.css             # 全局样式和编辑器样式
├── index.html                     # HTML 入口
├── vite.config.ts                 # Vite 配置
├── tsconfig.json                  # TypeScript 配置
└── package.json                   # 项目依赖

🎯 核心功能说明

1. 基础 Markdown 编辑

支持所有标准 Markdown 语法：

• 标题 (# H1, ## H2, etc.)
• 列表 (有序/无序)
• 粗体 和 斜体
• 引用块
• 代码块
• 链接和图片
• 分割线

2. 工具栏功能

• 撤销/重做 - 完整的编辑历史管理
• 加粗 - 带状态高亮的格式按钮
• 无序列表 - 快速创建列表
• AI 润色 - 选中文本后点击即可体验

3. AI 插件

自定义的 Milkdown 插件，实现：

• 获取用户选中的文本
• 异步调用 AI 接口（当前为模拟实现）
• 事务式替换原文本
• 无缝集成到编辑器命令系统

4. 状态管理

工具栏按钮会根据光标位置实时更新状态：

• 光标在粗体文本上时，加粗按钮会高亮
• 可扩展到其他格式按钮

🔧 自定义和扩展

添加新的工具栏按钮

在 Toolbar.vue 中添加新按钮并绑定 Milkdown 命令：

<button @click="handleYourCommand">
  Your Button
</button>

const handleYourCommand = () => {
  executeCommand(yourCommand.key)
}

修改编辑器样式

编辑 src/styles/editor.css 文件，可以自定义：

• Markdown 元素样式
• 工具栏外观
• 编辑器容器样式

集成真实的 AI API

修改 src/plugins/AiPlugin.ts 中的 mockAICall 函数：

async function realAICall(text: string): Promise<string> {
  const response = await fetch('your-ai-api-endpoint', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text })
  })
  const data = await response.json()
  return data.polishedText
}

💡 使用建议

1. 作为独立应用 - 直接运行并使用
2. 嵌入到现有项目 - 将 MilkdownEditor.vue 作为组件引入
3. 自定义主题 - 修改 CSS 变量和样式
4. 扩展插件 - 参考 AiPlugin.ts 创建更多插件

📝 代码风格

• 使用 Vue 3 Composition API
• <script setup> 语法
• TypeScript 类型注解
• 详细的注释说明

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可

MIT License

Made with ❤️ using Vue 3 and Milkdown