npm install showdown

接下来是用法：

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;

}

}

}

#show-content{

padding:25px;

}

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

简单markdown编辑器.png

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

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

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

1. 快捷键的监听

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

代码做部分修改：

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

});