0.1.2 • Published 5 years ago
@pencil/m-editor v0.1.2
Markdown Editor
基于 React 的一款支持 Markdown 语法的编辑器
使用方法
- 添加依赖到到 React 项目中:
npm i @pencil/m-editor --save- 在需要添加编辑器的文件中import markdown-editor
import MarkdownEditor from '@pencil/m-editor'- 使用 Markdown-Editor
<MarkdownEditor
value={}
config={}
onChange={} />- Props 说明
| Name | Type | Default | Description |
|---|---|---|---|
| value | string | {} | 在编辑器第一次被 mount 时使用，只用于编辑器的初始化 |
| config | json | {} | 上传文件相关配置信息，需包含三个字段信息：{fieldName: 'image', // 上传图片字段名supportedTypes: 'image/jpg', 'image/jpeg', 'image/png', // 支持上传的文件格式uploadUrl: 'http://localhost:8000/upload' // 上传图片服务器地址} |
| onChange | function | 当编辑器内容改变时此方法将被调用function(html) => voidhtml: 编辑器当前内容的html代码 |
效果图
开发说明
第一次运行需要在全局注册该包:
# 在项目根目录运行
npm link
# 在 playground 运行
npm link @pencil/m-editor开始开发
# 对组件代码进行 babel 转译
npm run dev
# 测试组件
npm run play待实现功能
- 支持双向同步滚动
- 性能优化
- 状态检测优化
- markdown => html 优化
- 使用体验优化
- 冗余代码优化