https://www.einsition.com/demos/yt-simplemde-editor
- 支持粘贴和拖拽上传图片。
- 支持自定义预览渲染
- 支持emoji表情
npm install -S yt-simplemde-editor
您可以在 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
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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 | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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 | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| enabled | 是否开启 | boolean | false |
| autoComplete | 是否开启 shortname 自动补全 | boolean | false |
| insertConvertTo | 插值转换,可选值 shortname,unicode |
string | shortname |
| emojiToolkit | emoji-toolkit配置 | object | - |
| categories | 类别设置 | { [key: string]: { title: string; emoji: string; } } | 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', }, };