## 架构设计

 > wk_md 是一款使用marked和highlight.js开发的一款markdown编辑器，主要包括4个部分

1.  输入框使用codemirror实现

2. markdown预览组件

3. 工具栏

4. 弹框编辑

----

## 项目介绍

```
    ├── md/    ----- 组件目录
    │   ├── index.vue       ----- 编辑器主文件
    │   ├── utils/            ----- 工具函数
    │   ├── config/           ----- 配置信息
    │   │   └── tools.js/             ----- 工具栏配置信息
    │   │   └── marked.js/            ----- 编辑器配置信息
    |   │   └── alert.js/             ----- 弹窗配置信息
    |   │   └── event.js/             ----- 事件配置信息
    │   ├── components/         ----- 子组件
    │   │   └── dialog.vue           ----- 弹窗模板组件
    │   │   └── tools.vue            ----- 工具栏组件  
    │   │   └── alert.vue           -----  弹窗组件      
    │   ├── assets/              ----- 第三方,及项目资源文件
```
## 定制与扩展

### 为编辑器添加一个新插入功能

- 修改 config下面的 tools.js

```
    export default {
        undo:true,
        ...,
        newtools:true //添加一个工具栏
    }
```

-  修改 tools.vue 

```
    <template >
        <!-- 头部工具栏 -->
        <ul class="markdown-toolbars" v-show="!preview">
            <li>
                <slot name="title"/>
            </li>
            <li v-if="tools.undo" name="撤销">
                <span class="iconfont icon-undo" @click="editor.undo()"></span>
            </li>
            ...
            <li v-if="tools.newtools" name="新增的工具">
                        <span class="iconfont icon-undo" @click="doSomeThing()"></span>
            </li>
            ...
         </ul>
     </template>
 ```

-  tools.vue  添加处理功能函数

```
   methods: {
      ...
      doSomeThing() {// 插入分割线
         const {editor} = this; 
         const selection = editor.getSelection(); //得到选中的值
         ... //一系列操作
         this.insertContent('我要插入的内容');

     },
     ...
   }
```

### 为编辑器添加一个弹窗功能

-  修改 config下面的 tools.js

```
    export default {
        undo:true,
        ...,
        newalert:true //添加一个工具栏
    }
```

- 修改 config下面的 alert.js

```

export default {
    code:'code_dialog',
    ...,
    newalert:'newalert_dialog' //添加一个弹窗
}

```
- 修改 tools.vue 

```
    <template >
        <!-- 头部工具栏 -->
        <ul class="markdown-toolbars" v-show="!preview">
            <li>
                <slot name="title"/>
            </li>
            <li v-if="tools.undo" name="撤销">
                <span class="iconfont icon-undo" @click="editor.undo()"></span>
            </li>
            ...
            <li v-if="tools.newalert_dialog" name="新增的工具">
                        <span class="iconfont icon-undo" @click="doSomeThingAlert()"></span>
            </li>
            ...
         </ul>
     </template>
 ```
-  tools.vue  添加处理功能函数

```
   methods: {
      ...
      doSomeThingAlert() {
         const selection =this.editor.getSelection(); 
         this.vm.alert.show(alertConfig.newalert)//弹窗
         this.$nextTick(()=>{
             this.vm.alert.setValue('xxxx',selection); //设置alert组件数据，用于弹窗组件双向数据绑定
         })
     }
     ...
   }
```

-  修改 alert.vue 添加一个弹窗组件

```
    <wk_dialog :ref="alertConfig.newalert" title="新弹窗组件" @submit="newalert_submit"  dialog_content="{...}">
        <div>
            <div   class="href_dialog_item">
                <label>新弹窗组件</label>
                <input type="text" v-model="xxxx">
            </div>
        </div>
    </wk_dialog>
```

-  修改 alert.vue 组件的方法

```
   methods: {
      ...
            newalert_submit(){
                let data=this.xxx;
                ... 一系列操作
                this.insertContent(data);
                this.xxxx=''
            }
     ...
   }
```