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