xwb-react-markdown

react 集合 Markdown 编辑器

• 一款轻量的基于 React 的 Markdown 编辑器, 压缩后代码只有 72KB
• 支持 TypeScript
• 支持自定义 Markdown 解析器
• 界面可配置, 如只显示编辑区或预览区
• 支持常用的 markdown 编辑功能，如加粗，斜体等等...
• 支持图片上传(自定义服务器地址，基于 axios)
• 支持七牛云图片上传，文件直传，暂时不支持断点续传
• 支持编辑区和预览区同步滚动

Install

npm install xwb-react-markdown --save

show-how

• 网页演示 xwb-react-markdown

git clone

> git clone https://github.com/xwb007/xwb-react-markdown.git
> npm install
> npm run dev

config

| attribute | value | type | | --------- | ------------------ | ------ | | value | 默认值 default null | string | | height | height default 300 | number | | domian | 七牛云的资源域名 default null | string | | token | 七牛云 token default null | string | | uploadUrl | uploadUrl default null | string |

example

// example
class Example extends React.Component {
  handleEditorChange = (html, text) => {
    console.log(html);
  };
  render() {
    return <ReactMarkdown handleEditorChange={this.handleEditorChange} />;
  }
}

// attr example
// 当上传地址为空时，默认则时把图片转成base64
// 如果使用七牛云上传 则需要自己去获取token 且token和domian不能为空
// domian为你七牛云的资源域名
const config = {
    value:'',
    height: 300,
    domian: "",
    token: "",
    uploadUrl: 'http://0.0.0.0/upload' // 你自己的服务器地址
}
render() {
    return <ReactMarkdown config={config} handleEditorChange={this.handleEditorChange} />;
}