README.md 1.7 KB
Newer Older
璃白.'s avatar
璃白. 已提交
1
# About
璃白.'s avatar
璃白. 已提交
2
一款Markdown编辑器组件,支持使用markodwn语法来编写文档,同时支持图片上传等功能(当前版本仅支持单文件上传)
璃白.'s avatar
璃白. 已提交
3 4 5 6 7 8 9

# 使用

1. 通过script标签引入
```html
<script src="./markdown-editor.js"></script>
```
璃白.'s avatar
璃白. 已提交
10
2. 指定需要渲染的容器
璃白.'s avatar
璃白. 已提交
11 12 13 14 15 16 17 18
```html
<div id="app"></div>
```
3. 初始化实例
```js
new MdEditor({
    ...options
})
璃白.'s avatar
璃白. 已提交
19
```
璃白.'s avatar
璃白. 已提交
20 21 22 23 24 25

# options

| 属性 | 说明 | 类型 | 默认值 |
| ------ | ------ | ------ | ------ |
| el | 编辑器渲染的容器 | String | "#app"
璃白.'s avatar
璃白. 已提交
26
| themeOptions | 主题颜色配置 | Object | [themeOptions](#themeoptions)
璃白.'s avatar
璃白. 已提交
27 28
| canAttachFile | 是否可以上传图片 | Boolean | true
| placeholder | placeholder | String | "请输入内容"
璃白.'s avatar
璃白. 已提交
29 30
| onChange | 获取编辑器内容 | Function | function(res) {} [示例](#onchange)
| onUpload | 上传文件钩子函数 | Function | function(file, callback) {} [示例](#onupload)
璃白.'s avatar
璃白. 已提交
31 32 33 34 35 36 37 38 39

# themeOptions

| 属性 | 说明 | 类型 | 默认值 |
| ------ | ------ | ------ | ------ |
| borderColor | 编辑器边框默认颜色 | String | "#dbdbdb"
| borderColorActive | 编辑器边框激活颜色 | String | "#409eff"
| textColor | 编辑器文字默认颜色 | String | "#303030"
| textColorActive | 编辑器文字激活颜色 | String | "#000"
璃白.'s avatar
璃白. 已提交
40 41 42 43 44 45 46 47 48 49 50 51

# onChange

```js
new MdEditor({
    ...,
    onChange: function(res) {
        console.log(res) // { text: "...", html: "..." }
    }
})
```

璃白.'s avatar
璃白. 已提交
52
# onUpload
璃白.'s avatar
璃白. 已提交
53 54 55 56 57

```js
new MdEditor({
    ...,
    onUpload: function(file, callback) {
璃白.'s avatar
璃白. 已提交
58
        // do something with file
璃白.'s avatar
璃白. 已提交
59 60 61 62 63 64 65
        // ajax
        // ...
        // 得到图片的url
        callback(url)
    }
})
```
璃白.'s avatar
璃白. 已提交
66 67

# License
璃白.'s avatar
璃白. 已提交
68 69

[MIT](https://codechina.csdn.net/codechina_dev/markdown-editor/-/blob/master/LICENSE)