## 安装


通过 npm 安装 wk_md：


```
npm i wk_md --save
```

----

## 使用方式

```
<template>
    <div class="container">
          <wk_md
                v-model="val"
                ref="md"
                @on-ready="onReady"
                @on-upload-image="onUpladImage"
                @on-save="onSave"
                :height="800"
        ></wk_md>
    </div>
</template>

<script>
   import wk_md from 'wk_md';
   export default {
        components: {
            wike_md
        },
        mounted() {

        },
        data: function () {
            return {
                val: '',
                vm:null
            }
        },
        methods: {
            onReady({vm}) {
               this.vm=vm

            },
            onUpladImage(file) {
                this.vm.instance.insertImage("http://csdn.52wike.com/wike.jpeg");
            },
            onSave({value,html}) {
               //value 为md编辑器的内容
               //html 为md内容解析成的html
            },
        }
    }
</script>
```

----

## 编辑器基本属性

### value

- Type: String/Number

- Default: ''

编辑器输入的文本，支持通过v-dodel数据双向绑定设置编辑器内容和获取编辑器的值。

### width

- Type: String/Number

- Default: auto

编辑器的初始化宽度。


### height

- Type: Number

- Default: 600

编辑器的初始化高度。


### bordered

- Type: Boolean

- Default: true

编辑器是否含有边框。


### autoSave

- Type: Boolean

- Default: false

是否开启自动保存，设置为开启时可通过绑定on-save事件获取编辑器内的值和代码块主题。

```
<wk_md @on-save="handleOnSave"/>
```


```
 handleOnSave({value,html}){
 		//value md编辑器的内容 
        //html  md编辑器解析成的html
        console.log(value,html);
 }
```


### interval

- Type: Number

- Default: 10000

自动保存间隔时间，单位：mm，默认10000mm，需要autoSave = true时才有效


### exportFileName

- Type: String

- Default: 我的文档

导出的md文件名称，默认 我的文档.md。

### markedOptions

- Type: Object

- Default: {}

marked配置项,可以根据需求自定义。


```
<wk_md :markedOptions="{baseUrl:'http://***.oss-cn-shanghai.aliyuncs.com/'}"/>

```

### toolbars

 - Type: Object

 - Default: 参见下表

   

 头部菜单按钮，通过设置true or false控制决定是否显示，目前配置支持持控制按钮显示隐藏，后续将支持根据配置显示排列顺序。



| 名称       | 说明             | 默认是否显示 |
| ---------- | ---------------- | ------------ |
| strong     | 粗体             | 是           |
| italic     | 斜体             | 是           |
| overline   | 删除线           | 是           |
| h1         | 标题1            | 是           |
| h2         | 标题2            | 是           |
| h3         | 标题3            | 是           |
| h4         | 标题4            | 是           |
| h5         | 标题5            | 是           |
| h6         | 标题6            | 是          |
| hr         | 分割线           | 是           |
| quote      | 引用             | 是           |
| ul         | 无序列表         | 是           |
| ol         | 有序列表         | 是           |
| code       | 代码块           | 是           |
| link       | 链接             | 是           |
| image      | image            | 是           |
| table      | 表格             | 是           |
| checked    | 已完成列表       | 是           |
| notChecked | 未完成列表       | 是           |
| preview    | 预览             | 是           |
| fullscreen | 全屏             | 是           |
| exportmd   | 导出为*.md文件   | 是           |
| importmd   | 导入本地*.md文件 | 是           |
| save       | 保存按钮         | 是           |
| clear      | 清空内容         | 是           |
| sql      |  解析sql         | 是           |
| html      |  解析html         | 是           |
| importword      |  导入word         | 是           |

----


### copyCode

Type: Boolean

Default: true

是否支持复制代码块内的内容。


### copyBtnText

Type: String

Default: 复制代码

复制代码按钮显示文字。

## 编辑器事件

### on-ready

编辑器初始化完成时触发，返回值为Object，包含组件本身和insertContent方法。


```
onReady({vm,insertContent}) {
   //vm为组件对象
   //insertContent插入内容函数
},
```


### on-save
编辑器保存事件，自动保存或者手动保存时触发，支持ctrl+s或command+s触发保存，返回值类型为Object，包含当前输入值value和md渲染成的html。


```
onSave({value,html}) {
   //value 为md编辑器的内容
   //html 为md内容解析成的html
},

```




### on-upload-image
图片上传事件，用户自定义上传图片，复制粘贴图片截图、文件和点开菜单栏上传按钮时式触发，返回file文件，上传文件后可结合insertImage插入图片。

```
onUpladImage(file) {
	let formData = new FormData()
    formData.append('file', file, file.name)
    //将formdata发送到后台即可
    axios.post('服务器地址', formData).then((data) => {
       console.log(data)
       this.$refs.md.insertImage(data.data.url);
    })
}
```