yt-simplemde-editor

React SimpleMDE Markdown Editor

Usage no npm install needed!

<script type="module">
  import ytSimplemdeEditor from 'https://cdn.skypack.dev/yt-simplemde-editor';
</script>

README

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 插值转换,可选值 shortnameunicode 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',
  },
};