简单的 markdown 编辑器,类似于 github 的 issues 评论模块。
- 支持简单的工具栏
- 支持粘贴上传图片
- 支持拖拽上传文件
npm i fc-mdeditor
import MarkdownEditor, { marked } from '../src/index';
const Demo = React.createClass({
render() {
return (
<div >
<MarkdownEditor ref="markdownEditor" />
<div dangerouslySetInnerHTML={{
// 渲染html字符串需要通过这样的方式(当然我们也默认支持jquery,可以用jquery的方式渲染)
__html: marked(this.refs.markdownEditor.getValue())
}} />
</div>
);
}
});
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
value | 初始值 | String | '' |
placeholder | 占位符 | String | 'Leave a comment' |
uploadEnabled | 是否启用上传功能 | Boolean | false |
uploadApi | 上传接口 | String | '/upload' |
fileUrlPath | res 中提取 fileUrl 数据的路径 | String | 'url' |
fileSize | 上传文件大小上限(byte) | Number | 10485760 |
fileTypes | 上传文件类型限制 | Array | ['PNG', 'GIF', 'JPG', 'DOCX', 'PPTX', 'XLSX', 'TXT', 'PDF', 'ZIP', 'MD', 'JSON'] |
- getValue 获取 textarea 的 value
- setValue(val) 设置 textarea 的 value
- getMarkedValue 获取 marked 解析后的 value
MarkdownEditor.Marked
在组件静态方法上挂载了 Marked,用来解析 md 数据。
建议数据库存 md 数据,不要存解析后的 html 数据。