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',
  },
};