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