vue项目引入markdown

git地址：https://github.com/showdownjs/showdown
其实引入markdown挺简单的：

npm install showdown

接下来是用法：

<template>
  <div style="width:100%;min-width:1200px">
      <div style="display:inline-block;width:50%;">
            <!-- textarea之间不要有空格 -->
            <textarea v-model='content'></textarea>
      </div>
      <div style="display:inline-block;width:50%;">
            <div id="show-content"></div>
      </div>
  </div>
</template>
<script>
export default {

    data () {
        return {
            'content':'',
            'converter':null
        }
    },
    watch:{
        'content':'contentChanged'
    },
    mounted(){ this.init(); },
    methods: {
        init(){
            var showdown  = require('showdown');
            var converter = new showdown.Converter();
            this.converter = converter;
        },
        contentChanged(){ 
           var html = this.converter.makeHtml(this.content);
           document.getElementById('show-content').innerHTML = html;
        }
    }
}
</script>
<style>
#show-content{
  padding:25px;
}
</style>

于是，一个简单的markdown编辑器就完成了，接下来，上图：

简单markdown编辑器.png

由于我用的是elementUI，所以样式可能会有些许不一样的地方，其中不一样的地方：

<template>
  <div >
      <el-row>
          <el-col :span="12" >
              <el-input type="textarea" v-model="content" :autosize="{ minRows: 20, maxRows: 80}" placeholder="请输入内容" >
              </el-input>
          </el-col>
          <el-col :span="12" >
              <div id="show-content" class="text-left">

              </div>
          </el-col>
      </el-row>
  </div>
</template>

好了，到此处，一个简单的markdown编辑器就已经做完了。

---

接下来的是扩展与优化，后期会持续更新：

1. 快捷键的监听

目前为止，按tab键textaera会失去焦点，那么要怎么做呢。

参考：JavaScript让Textarea支持tab按键的方法

代码做部分修改：
首先，assets/js目录下创建textarea_extend.js文件，然后将上面参考网站的代码复制进去，然后将var textarea = document.getElementsByTagName('textarea')[0];及以下代码写在一个函数里面，具体如下：

export function surpportTab(id){
    // var textarea = document.getElementsByTagName('textarea')[0]; 
    var textarea = document.getElementById(id);
    textarea.onkeydown = function(event) {
        //support tab on textarea
        if (event.keyCode == 9) { //tab was pressed
            var newCaretPosition;
            newCaretPosition = textarea.getCaretPosition() + " ".length;
            textarea.value = textarea.value.substring(0, textarea.getCaretPosition()) + " " + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
            textarea.setCaretPosition(newCaretPosition);
            return false;
        }
        if(event.keyCode == 8){
            //backspace
            if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") {
                //it's a tab space
                var newCaretPosition;
                newCaretPosition = textarea.getCaretPosition() - 3;
                textarea.value = textarea.value.substring(0, textarea.getCaretPosition() - 3) + textarea.value.substring(textarea.getCaretPosition(), textarea.value.length);
                textarea.setCaretPosition(newCaretPosition);
            }
        }
        if(event.keyCode == 37){ //left arrow
            var newCaretPosition;
            if (textarea.value.substring(textarea.getCaretPosition() - 4, textarea.getCaretPosition()) == " ") {
                //it's a tab space
                newCaretPosition = textarea.getCaretPosition() - 3;
                textarea.setCaretPosition(newCaretPosition);
            } 
        }
        if(event.keyCode == 39){
            //right arrow
            var newCaretPosition;
            if (textarea.value.substring(textarea.getCaretPosition() + 4, textarea.getCaretPosition()) == " ") {
                //it's a tab space
                newCaretPosition = textarea.getCaretPosition() + 3;
                textarea.setCaretPosition(newCaretPosition);
            }
        } 
    }
}

调用该方法：

在textarea控件上加上id：

...
<el-input id="markdown-editor" type="textarea" ...
...

引入函数：

import {surpportTab} from '@/assets/js/textarea_extend.js'

然后在init函数里面初始化textaera:

...
surpportTab('markdown-editor');
...

2. ctrl+S进行保存

同样可以写在textarea_extend.js中：

export function surpportSave(id,callbak){
    var textarea = document.getElementById(id);
      textarea.addEventListener('keydown', function(e) {
        if (e.keyCode == 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey))      {
            e.preventDefault();
            callbak && callbak();
      }
  });
}

调用：

import {surpportTab,surpportSave} from '@/assets/js/textarea_extend.js'
...
surpportSave('markdown-editor',function(){
    alert('已保存！');
});