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

});

總結

以上是生活随笔為你收集整理的markdown html vue,vue项目引入markdown的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。