Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ant-design/md-editor
https://github.com/ant-design/md-editor
Last synced: 2 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/ant-design/md-editor
- Owner: ant-design
- License: mit
- Created: 2024-04-09T05:49:06.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-01-21T16:48:17.000Z (5 days ago)
- Last Synced: 2025-01-21T17:39:38.723Z (5 days ago)
- Language: TypeScript
- Homepage: https://md-to-json-schema.antdigital.dev/
- Size: 4.15 MB
- Stars: 32
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-web-editor - md-editor - The YuQue editor supports markdown rendering and editing. (Markdown editor)
README
# @ant-design/md-editor
[](https://npmjs.org/package/@ant-design/md-editor)
[](https://npmjs.org/package/@ant-design/md-editor)
一个使用 dumi 开发的 React 库
## 用法
```tsx
import React from 'react';
import { MarkdownEditor } from '@ant-design/md-editor';
export default () => {
return (
);
};
```
## 选项
### MarkdownEditor
| 属性 | 类型 | 描述 |
| ----------------------- | -------------------------------------------------------------------------- | --------------------------- |
| className | `string` | 自定义类名 |
| width | `string \| number` | 编辑器宽度 |
| height | `string \| number` | 编辑器高度 |
| codeProps | `{ Languages?: string[] }` | 代码高亮配置 |
| image | `{ upload?: (file: File[] \| string[]) => Promise }` | 图片上传配置 |
| initValue | `string` | 初始内容 |
| readonly | `boolean` | 是否为只读模式 |
| style | `React.CSSProperties` | 容器样式 |
| contentStyle | `React.CSSProperties` | 内容区域样式 |
| editorStyle | `React.CSSProperties` | 编辑器样式 |
| toc | `boolean` | 是否显示目录 |
| toolBar | `ToolBarProps` | 工具栏配置 |
| rootContainer | `React.MutableRefObject` | markdown 编辑器的根容器引用 |
| fncProps | `fnProps` | 功能属性配置 |
| editorRef | `React.MutableRefObject` | 编辑器实例引用 |
| eleItemRender | `(props: ElementProps, defaultDom: React.ReactNode) => React.ReactElement` | 自定义渲染元素 |
| initSchemaValue | `Elements[]` | 初始结构数据 |
| onChange | `(value: string, schema: Elements[]) => void` | 内容变化回调 |
| reportMode | `boolean` | 是否开启报告模式 |
| slideMode | `boolean` | 是否开启 PPT 模式 |
| typewriter | `boolean` | 是否开启打字机模式 |
| insertAutocompleteProps | `InsertAutocompleteProps` | 自动补全配置 |
| titlePlaceholderContent | `string` | 标题占位符内容 |
| comment | `Comment` | 评论功能配置 |
### ToolBarProps
| 属性 | 类型 | 描述 |
| --------- | ----------------- | ------------------------ |
| min | boolean | 控制是否启用最小化模式 |
| enable | boolean | 控制是否启用工具栏 |
| extra | React.ReactNode[] | 额外的自定义工具栏项目 |
| hideTools | ToolsKeyType[] | 指定需要隐藏的工具栏选项 |
### fnProps
| 属性 | 类型 | 描述 |
| ------ | ------------------------------------------------------------------------------- | -------------- |
| render | `(props: { children: string }, defaultDom: React.ReactNode) => React.ReactNode` | 自定义渲染元素 |
### CommentProps
| Property | Type | Description |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
| enable | `boolean` | Flag to enable/disable the component |
| onSubmit | `(id: string, comment: CommentDataType) => void` | Callback when comment is submitted |
| commentList | `CommentDataType[]` | Array of comments to display |
| deleteConfirmText | `string` | Text shown in delete confirmation dialog |
| loadMentions | `(keyword: string) => Promise<{ name: string; avatar?: string }[]>` | Function to load mention suggestions based on keyword |
| mentionsPlaceholder | `string` | Placeholder text for mentions input |
| editorRender | `(defaultDom: ReactNode) => ReactNode` | Custom render function for editor |
| previewRender | `(props: { comment: CommentDataType[] }, defaultDom: ReactNode) => React.ReactElement` | Custom render function for preview |
| onDelete | `(id: string \| number, item: CommentDataType) => void` | Callback when comment is deleted |
| listItemRender | `(doms: { checkbox: React.ReactNode; mentionsUser: React.ReactNode; children: React.ReactNode }, props: ElementProps) => React.ReactNode` | Custom render function for list items |
## 开发
```bash
# 安装依赖
$ pnpm install
# 通过文档示例开发库
$ pnpm start
# 构建库源代码
$ pnpm run build
# 以监视模式构建库源代码
$ pnpm run build:watch
# 构建文档
$ pnpm run docs:build
# 检查项目中的潜在问题
$ pnpm run doctor
```