vue项目引入markdown

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

npm install showdown

接下来是用法：

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

简单markdown编辑器.png

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

好了，到此处，一个简单的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：

...

引入函数：

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