### Use (如何引入)

#### 方法1
`index.js`:
```javascript
    // 全局注册
    // import with ES6
    import Vue from 'vue'

    import markdownEditorVue from 'markdown-editer-vue'
    import 'markdown-editer-vue/dist/css/index.css'
    
    // use
    Vue.use(markdownEditorVue)
    new Vue({
        'el': '#main',
        data() {
            return { value: '' }
        }
    })
```
`index.html`
```html
// 下同
<div id="main">
    <markdown-editor-vue v-model="value"/>
</div>
```

#### 方法2
`index.js`:
```javascript
    // 全局注册
    // require with Webpack/Node.js
    ...
    var markdownEditorVue = require('markdown-editor-vue')
    import 'markdown-editor-vue/dist/css/index.css'
    ...
```

#### 方法3
`editor.vue`:
```javascript
    <template>
        <div id="editor">
             <markdown-editor-vue @save="$save" @send="$send" :ishljs="ishljs" :toolbars="toolbars"
                       style="height: 100%"></markdown-editor-vue>
        </div>
    </template>
    <script>
    // Local Registration
    import { markdownEditorVue } from 'markdown-editor-vue'
    import 'markdown-editor-vue/dist/css/index.css'
    export default {
        name: 'editor',
        data() {
              return {
                ishljs:true,
                toolbars: {
                  bold: true, // 粗体
                  italic: true, // 斜体
                  header: true, // 标题
                  underline: true, // 下划线
                  strikethrough: true, // 中划线
                  mark: true, // 标记
                  superscript: true, // 上角标
                  subscript: true, // 下角标
                  quote: true, // 引用
                  ol: true, // 有序列表
                  ul: true, // 无序列表
                  link: true, // 链接
                  imagelink: true, // 图片链接
                  code: true, // code
                  table: true, // 表格
                  fullscreen: true, // 全屏编辑
                  readmodel: false, // 沉浸式阅读
        //          htmlcode: true, // 展示html源码
                  help: false, // 帮助
                  send:true, // 发布文章
                    /* 1.3.5 */
                  undo: true, // 上一步
                  redo: true, // 下一步
                  trash: false, // 清空
                  save: true, // 保存（触发events中的save事件）
                    /* 1.4.2 */
                  navigation: false, // 导航目录
                    /* 2.1.8 */
                  alignleft: true, // 左对齐
                  aligncenter: true, // 居中
                  alignright: true, // 右对齐
                    /* 2.2.1 */
                  subfield: true, // 单双栏模式
        //          preview: true, // 预览
                },
                value: {

                },
              }
            },
       methods: {
              // 转换成html页面
              $save(val,html) {
                console.log(val)
                console.log(html)
              },
              $send: function (markdown, html) {
                console.log(markdown)
                console.log(html)
              }
            },
        components: {
            markdownEditorVue
            // or 'markdown-editor-vue': markdownEditorVue
        }
    }
    </script>
    <style>
    #editor {
        margin: auto;
        width: 80%;
        height: 700px;
    }
    </style>
```
`index.js`:
```javascript
	// 下同
    import Vue from 'vue';
    var editor = require('./editor.vue');
    new Vue({
        el: '#main',
        render: h => h(editor)
    });
```
`index.html`:
```html
// 下同
<div id="main">
</div>
```

#### 方法4
`editor.vue`:
```javascript
    ...
    <script>
    // Local Registration
    // import markdownEditorVue from 'markdown-editor-vue'
    var markdownEditorVue = require('markdown-editor-vue')
    import 'markdown-editor-vue/dist/css/index.css'
    export default {
        name: 'editor',
        components: {
            'markdown-editor-vue': markdownEditorVue.markdownEditorVue
        }
    }
    </script>
    <style>
    #editor {
    ...
    </style>
```