@antdigital/lui
v1.28.30
Published
类语雀的编辑器，支持 markdown 渲染和编辑
Downloads
5
Keywords
Readme
@ant-design/md-editor
基于 React + TypeScript 的现代化 Markdown 编辑器，提供丰富的编辑功能、实时预览、插件系统等特性。
✨ 特性
- 🎯 功能完整: 支持标准 Markdown 语法，提供实时预览、语法高亮等功能
- 🔧 高度可定制: 丰富的配置选项和插件机制，支持自定义渲染和行为扩展
- 🎨 现代化设计: 基于 Ant Design 设计语言，提供美观的用户界面
- ⚡ 高性能: 基于 Slate.js 核心，支持大文档编辑，性能优异
- 📱 响应式: 完美适配桌面端和移动端，提供一致的用户体验
- 🧩 插件化: 支持数学公式、图表、代码高亮等丰富插件扩展
- 🌍 国际化: 内置多语言支持，易于扩展其他语言
- 📦 开箱即用: 零配置快速接入，同时支持深度定制
🚀 快速开始
安装
npm install @ant-design/md-editor
# 或
yarn add @ant-design/md-editor
# 或
pnpm add @ant-design/md-editor基础用法
import React from 'react';
import { MarkdownEditor } from '@ant-design/md-editor';
export default () => {
return (
<MarkdownEditor
initValue={`# Hello World
欢迎使用 md-editor！这是一个功能强大的 Markdown 编辑器。
## 主要特性
- ✅ 支持标准 Markdown 语法
- ✅ 实时预览功能
- ✅ 语法高亮
- ✅ 数学公式渲染 $E=mc^2$
- ✅ 代码块高亮
\`\`\`javascript
function hello() {
console.log('Hello, md-editor!');
}
\`\`\`
## 表格支持
| 功能 | 支持 | 说明 |
|------|------|------|
| 基础编辑 | ✅ | 支持所有标准语法 |
| 实时预览 | ✅ | 所见即所得 |
| 插件系统 | ✅ | 可扩展架构 |
> 这只是一个简单的示例，更多功能等你探索！
`}
/>
);
};高级用法
import React, { useRef } from 'react';
import { MarkdownEditor, MarkdownEditorInstance } from '@ant-design/md-editor';
export default () => {
const editorRef = useRef<MarkdownEditorInstance>();
const handleSave = () => {
const content = editorRef.current?.getValue();
console.log('保存内容:', content);
};
return (
<MarkdownEditor
editorRef={editorRef}
height={600}
initValue={# Hello World
欢迎使用 md-editor！这是一个功能强大的 Markdown 编辑器。
## 主要特性
- ✅ 支持标准 Markdown 语法
- ✅ 实时预览功能
- ✅ 语法高亮
- ✅ 数学公式渲染 $E=mc^2$
- ✅ 代码块高亮
\`\`\`javascript
function hello() {
console.log('Hello, md-editor!');
}
\`\`\`
## 表格支持
| 功能 | 支持 | 说明 |
|------|------|------|
| 基础编辑 | ✅ | 支持所有标准语法 |
| 实时预览 | ✅ | 所见即所得 |
| 插件系统 | ✅ | 可扩展架构 |
> 这只是一个简单的示例，更多功能等你探索！
`}
toolBar={{
enable: true,
extra: [
<button key="save" onClick={handleSave}>
保存
</button>,
],
}}
onChange={(value, schema) => {
console.log('内容变化:', value);
}}
image={{
upload: async (files) => {
// 自定义图片上传逻辑
return ['https://example.com/uploaded-image.png'];
},
}}
/>
);
};📖 文档
🔗 相关链接
📋 API 文档
MarkdownEditor 属性
| 属性 | 类型 | 默认值 | 描述 |
| ----------------------- | -------------------------------------------------------------------------- | ------- | ------------------ |
| 基础配置 |
| className | string | - | 自定义类名 |
| width | string \| number | - | 编辑器宽度 |
| height | string \| number | - | 编辑器高度 |
| initValue | string | - | 初始内容 |
| readonly | boolean | false | 是否为只读模式 |
| 样式配置 |
| style | React.CSSProperties | - | 容器样式 |
| contentStyle | React.CSSProperties | - | 内容区域样式 |
| editorStyle | React.CSSProperties | - | 编辑器样式 |
| 功能配置 |
| toc | boolean | false | 是否显示目录 |
| toolBar | ToolBarProps | - | 工具栏配置 |
| typewriter | boolean | false | 是否开启打字机模式 |
| reportMode | boolean | false | 是否开启报告模式 |
| slideMode | boolean | false | 是否开启 PPT 模式 |
| 扩展配置 |
| codeProps | { Languages?: string[] } | - | 代码高亮配置 |
| image | ImageConfig | - | 图片上传配置 |
| comment | CommentProps | - | 评论功能配置 |
| fncProps | FnProps | - | 功能属性配置 |
| 高级配置 |
| rootContainer | React.MutableRefObject<HTMLDivElement> | - | 根容器引用 |
| editorRef | React.MutableRefObject<MarkdownEditorInstance> | - | 编辑器实例引用 |
| eleItemRender | (props: ElementProps, defaultDom: React.ReactNode) => React.ReactElement | - | 自定义元素渲染 |
| initSchemaValue | Elements[] | - | 初始结构数据 |
| insertAutocompleteProps | InsertAutocompleteProps | - | 自动补全配置 |
| titlePlaceholderContent | string | - | 标题占位符内容 |
| 事件回调 |
| onChange | (value: string, schema: Elements[]) => void | - | 内容变化回调 |
ToolBarProps
| 属性 | 类型 | 默认值 | 描述 |
| --------- | ------------------- | ------- | ---------------------- |
| min | boolean | false | 是否启用最小化模式 |
| enable | boolean | true | 是否启用工具栏 |
| extra | React.ReactNode[] | - | 额外的自定义工具栏项目 |
| hideTools | ToolsKeyType[] | - | 需要隐藏的工具栏选项 |
ImageConfig
| 属性 | 类型 | 描述 |
| ------ | ----------------------------------------------------------- | ------------------------- |
| upload | (file: File[] \| string[]) => Promise<string[] \| string> | 图片上传函数，返回图片URL |
CommentProps
| 属性 | 类型 | 描述 |
| ------------------- | ------------------------------------------------------------------- | ----------------- |
| enable | boolean | 是否启用评论功能 |
| onSubmit | (id: string, comment: CommentDataType) => void | 评论提交回调 |
| commentList | CommentDataType[] | 评论列表数据 |
| deleteConfirmText | string | 删除确认文本 |
| loadMentions | (keyword: string) => Promise<{ name: string; avatar?: string }[]> | 加载@提及用户列表 |
| mentionsPlaceholder | string | @提及输入框占位符 |
| onDelete | (id: string \| number, item: CommentDataType) => void | 评论删除回调 |
MarkdownEditorInstance
编辑器实例提供以下方法：
| 方法 | 类型 | 描述 |
| ---------- | ------------------------- | ------------------ |
| getValue | () => string | 获取当前编辑器内容 |
| setValue | (value: string) => void | 设置编辑器内容 |
| getSchema | () => Elements[] | 获取当前文档结构 |
| insertText | (text: string) => void | 在光标位置插入文本 |
| focus | () => void | 聚焦编辑器 |
| blur | () => void | 失焦编辑器 |
🛠️ 开发
：
环境要求
- Node.js >= 16.0.0
- npm >= 8.0.0 或 pnpm >= 7.0.0
本地开发
# 克隆项目
git clone https://github.com/ant-design/md-editor.git
cd md-editor
# 安装依赖
pnpm install
# 启动开发服务器
pnpm start
# 在浏览器中打开 http://localhost:8000可用脚本
# 启动开发服务器（带热重载）
pnpm start
# 构建库文件
pnpm run build
# 监听模式构建
pnpm run build:watch
# 构建文档站点
pnpm run docs:build
# 运行测试
pnpm run test
# 测试覆盖率
pnpm run test:coverage
# 代码检查
pnpm run lint
# 格式化代码
pnpm run prettier
# 类型检查
pnpm run tsc
# 项目健康检查
pnpm run doctor项目结构
md-editor/
├── src/ # 源代码
│ ├── MarkdownEditor/ # 核心编辑器
│ ├── MarkdownInputField/ # 输入组件
│ ├── History/ # 历史记录
│ ├── Bubble/ # 气泡组件
│ ├── Workspace/ # 工作空间
│ ├── plugins/ # 插件系统
│ ├── hooks/ # 自定义 Hooks
│ ├── utils/ # 工具函数
│ └── types/ # 类型定义
├── docs/ # 文档和示例
├── tests/ # 测试文件
└── scripts/ # 构建脚本贡献指南
- Fork 本仓库
- 创建特性分支:
git checkout -b feature/amazing-feature - 提交更改:
git commit -m 'Add amazing feature' - 推送分支:
git push origin feature/amazing-feature - 提交 Pull Request
更多详细信息请查看 贡献指南。
🤝 社区
📄 许可证
本项目基于 MIT 许可证 开源。
🙏 致谢
感谢所有为该项目做出贡献的开发者！