0.4.2 • Published 3 years ago

dd-rc-mdeditor v0.4.2

Weekly downloads
3
License
-
Repository
-
Last release
3 years ago

dd-rc-mdEditor

简单的 markdown 编辑器,类似于 github 的 issues 评论模块。

  • 支持简单的工具栏
  • 支持粘贴上传图片
  • 支持拖拽上传文件

Install

package.json
#tag 对应https://git.xiaojukeji.com/ops-fe/dd-rc-mdEditor/tags

"dependencies": {
  "dd-rc-mdEditor": "git+ssh://git@git.xiaojukeji.com:ops-fe/dd-rc-mdEditor.git#tag",
}

Example

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>
    );
  }
});

Props

参数说明类型默认值
value初始值String''
placeholder占位符String'Leave a comment'
uploadEnabled是否启用上传功能Booleanfalse
uploadApi上传接口String'/upload'
fileUrlPathres中提取fileUrl数据的路径String'url'
fileSize上传文件大小上限(byte)Number10485760
fileTypes上传文件类型限制Array'PNG', 'GIF', 'JPG', 'DOCX', 'PPTX', 'XLSX', 'TXT', 'PDF', 'ZIP', 'MD', 'JSON'

Methods

  • getValue 获取 textarea 的 value
  • setValue(val) 设置 textarea 的 value
  • getMarkedValue 获取 marked 解析后的 value

Marked

MarkdownEditor.Marked
在组件静态方法上挂载了Marked,用来解析md数据。
建议数据库存md数据,不要存解析后的html数据。