gravity-ui/markdown-editor
GitHub: gravity-ui/markdown-editor
一个支持WYSIWYG和标记模式的Markdown编辑器React组件，用于在网页应用中集成灵活的内容编辑功能。
Stars: 398 | Forks: 42
# @gravity-ui/markdown-editor · [](https://www.npmjs.com/package/@gravity-ui/markdown-editor) [](https://github.com/gravity-ui/markdown-editor/actions/workflows/ci.yml?query=branch:main) [](https://github.com/gravity-ui/markdown-editor/actions/workflows/release.yml?query=branch:main) [](https://preview.gravity-ui.com/md-editor/)
## 所见即所得和标记模式的Markdown编辑器
MarkdownEditor 是一个处理 Markdown 的强大工具，它结合了 WYSIWYG（所见即所得）和标记模式。这意味着您可以在便捷的可视化模式下创建和编辑内容，同时也能完全控制标记。
### 🔧 主要功能
- 支持基础的 Markdown 和 [YFM](https://ydocs.tech) 语法。
- 通过 ProseMirror 和 CodeMirror 引擎实现可扩展性。
- 支持在 WYSIWYG 和标记模式下工作，以获得最大灵活性。
## 安装
```
npm install @gravity-ui/markdown-editor
```
### 必需依赖
请注意，要开始使用此包，您的项目还必须安装以下依赖：`@diplodoc/transform`、`react`、`react-dom`、`@gravity-ui/uikit`、`@gravity-ui/components` 以及其他一些。请查阅 `package.json` 的 `peerDependencies` 部分以获取准确信息。
## 快速入门
Markdown编辑器以一个React钩子（用于创建编辑器实例）和一个渲染视图的组件的形式提供。\
要设置样式和主题，请参阅 [UIKit文档](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles)。
```
import React from 'react';
import {useMarkdownEditor, MarkdownEditorView} from '@gravity-ui/markdown-editor';
function Editor({onSubmit}) {
const editor = useMarkdownEditor({allowHTML: false});
React.useEffect(() => {
function submitHandler() {
// Serialize current content to markdown markup
const value = editor.getValue();
onSubmit(value);
}
editor.on('submit', submitHandler);
return () => {
editor.off('submit', submitHandler);
};
}, [onSubmit]);
return
标签：CodeMirror, Markdown编辑器, Markdown语法支持, npm包, ProseMirror, React组件, SOC Prime, 代码编辑器, 前端库, 前端开发工具, 可扩展编辑器, 可视化编辑, 实时预览, 开发工具, 所见即所得编辑器, 文本编辑器, 暗色界面, 标记语言编辑器, 编辑器组件, 自动化攻击