vue项目引入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>

<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>

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);
            }
        } 
    }
}

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

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

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

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('已保存！');
});