%20(2).svg)
项目简介
这是一个基于React框架的轻量级Markdown编辑器，压缩后代码仅20KB。该编辑器支持TypeScript，可使用自定义Markdown解析器，具备常用的Markdown编辑功能，还支持插件化的功能键、界面配置、图片上传或拖拽，以及编辑区和预览区同步滚动。
项目的主要特性和功能
- 轻量化：压缩后代码仅20KB。
- 支持TypeScript：便于在TypeScript项目中使用。
- 自定义Markdown解析器：可使用自定义的Markdown解析器。
- 常用Markdown编辑功能：支持加粗、斜体等常用Markdown语法。
- 插件化的功能键：能通过插件扩展编辑器功能。
- 界面可配置：可配置只显示编辑区或预览区。
- 图片上传或拖拽：支持通过上传或拖拽方式插入图片。
- 同步滚动：编辑区和预览区支持同步滚动。
安装使用步骤
假设用户已经下载了本项目的源码文件，可按以下步骤安装使用：
1. 通过npm或yarn安装react-markdown-editor-lite：
shell
npm install react-markdown-editor-lite --save
yarn add react-markdown-editor-lite
2. 引入所需的库和样式：
javascript
import React from 'react';
import MarkdownIt from 'markdown-it';
import MdEditor from 'react-markdown-editor-lite';
import 'react-markdown-editor-lite/lib/index.css';
3. 初始化Markdown解析器并注册任何需要的插件。
4. 使用MdEditor组件，传入必要的属性如value（编辑器内容）、style、renderHTML（渲染HTML的函数）、onChange（内容变化时的回调函数）等。基本使用示例：
javascript
function handleEditorChange({html, text}) {
console.log('handleEditorChange', html, text);
}
export default () => {
return (
<MdEditor
value=""
style={{ height: "500px" }}
renderHTML={(text) => new MarkdownIt().render(text)}
onChange={handleEditorChange}
/>
)
}
更多信息： - 配置项目详情：请查看这里。 - API详情：请查看这里。 - 插件开发详情：请查看这里。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】