react-simplemde-editor
react-simplemde-editor copied to clipboard
Published
20 hours ago •
yanthink
yanthink
React SimpleMDE Markdown Editor
React SimpleMDE Markdown Editor
演示地址
https://www.einsition.com/demos/yt-simplemde-editor
更新日志
CHANGELOG.md
特性
- 支持粘贴和拖拽上传图片。
- 支持自定义预览渲染
- 支持emoji表情
安装
npm install -S yt-simplemde-editor
使用
您可以在 demo 中查看基本用法。
Demo
git clone https://github.com/yanthink/react-simplemde-editor
cd react-simplemde-editor
npm install
npm run build
npm link
cd demo
npm install
npm link yt-simplemde-editor
npm start
API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| id | 编辑器id | string | - |
| className | 根元素的类名称 | string | - |
| label | label | string | - |
| uploadOptions | 上传附件参数 | UploadOptions | - |
| theme | 主题设置 | string | - |
| getMdeInstance | 获取编辑器实例方法 | simplemde => void | - |
| extraKeys | 快捷键设置，详见 extraKeys | object | - |
| value | 初始化内容 | string | - |
| onChange | 内容发生改变时触发 | value => void | - |
| options | SimpleMDE选项 | object | - |
| emoji | emoji参数 | Emoji | - |
UploadOptions
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| action | 上传的地址 | string | 无 |
| name | 发到后台的文件参数名 | string | file |
| jsonName | 后台响应的文件地址名称 | string | fileUrl |
| allowedTypes | 接受上传的文件类型 | string | array | image/* |
| progressText | 上传中显示内容 | string | ![Uploading file...]() |
| data | 上传所需参数 | object | file => object | - |
| headers | 设置上传的请求头部 | object | - |
| withCredentials | 上传请求时是否携带 cookie | boolean | false |
| beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传 | (file) => boolean | Promise | - |
| onSuccess | 上传成功事件 | (response, file) => any | - |
| onError | 上传失败事件 | (err, response, file) => any | - |
Emoji
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| enabled | 是否开启 | boolean | false |
| autoComplete | 是否开启 shortname 自动补全 | boolean | false |
| insertConvertTo | 插值转换，可选值 shortname，unicode |
string | shortname |
| emojiToolkit | emoji-toolkit配置 | object | - |
| categories | 类别设置 | { [key: string]: { title: string; emoji: string; } } | defaultCategories |
defaultCategories
const defaultCategories: CategoriesType = {
recent: {
title: '常用',
emoji: 'clock3',
},
people: {
title: '表情符号与人物',
emoji: 'smile',
},
nature: {
title: '动物与自然',
emoji: 'hamster',
},
food: {
title: '食物与饮料',
emoji: 'pizza',
},
activity: {
title: '活动',
emoji: 'soccer',
},
travel: {
title: '旅行与地点',
emoji: 'earth_americas',
},
objects: {
title: '物体',
emoji: 'bulb',
},
symbols: {
title: '符号',
emoji: 'symbols',
},
flags: {
title: '旗帜',
emoji: 'flag_cn',
},
};
yanthink