這篇文章主要介紹如何使用Vue實現(xiàn)一個markdown編輯器，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

網(wǎng)站的建設(shè)創(chuàng)新互聯(lián)專注網(wǎng)站定制,經(jīng)驗豐富,不做模板,主營網(wǎng)站定制開發(fā).小程序定制開發(fā),H5頁面制作!給你煥然一新的設(shè)計體驗!已為成都白烏魚等企業(yè)提供專業(yè)服務(wù)。

先看一下本項目的效果圖（圖片經(jīng)過壓縮）

本文的目的就是實現(xiàn)一個有核心功能的，簡單，易于修改的項目

思路

1 markdown內(nèi)容如何轉(zhuǎn)換成 html？

網(wǎng)上有一個開源的庫叫 marked，地址如下：https://github.com/markedjs/marked.git

我們可以安裝這個庫，使用很簡單，就一個函數(shù)，傳進去markdown內(nèi)容，就返回了html內(nèi)容

2 markdown內(nèi)容轉(zhuǎn)換成了html，如何進行語法高亮？

網(wǎng)上也有一個開源的庫，地址如下 ：https://highlightjs.org/

我們可以使用這兩個庫

先把markdown內(nèi)容解析成html內(nèi)容

把html內(nèi)容進行語法高亮

下面我們來一步一步實現(xiàn)代碼

3 代碼實現(xiàn)

默認(rèn)你已經(jīng)創(chuàng)建好了vue的項目 ， 創(chuàng)建vue項目 vue init webpack demo
這里面不多講。

3.1 安裝兩個庫，分別執(zhí)行下面兩條命令

npm install marked --save
npm install highlight.js --save

3.2 首先創(chuàng)建一個 HelloMarkDown 的 Vue組件

布局文件的代碼如下：

主要分為上下兩塊，上面是功能區(qū)的布局

下面一塊，分左右兩部分，左邊是markdown，右邊是顯示html部分

對應(yīng)的樣式代碼如下：

 .md_root_content {
 display: flex;
 display: -webkit-flex;
 flex-direction: column;
 }

 .button_bar {
 width: 100%;
 height: 40px;
 background-color: #d4d4d4;
 display: flex;
 display: -webkit-flex;
 align-items: center;
 }

 div.button_bar span {
 width: 30px;
 line-height: 40px;
 text-align: center;
 color: orange;
 cursor: pointer;
 }

 .content_bar {
 display: flex;
 display: -webkit-flex;
 width: 100%;
 height: 100%;
 }

 .markdown_body {
 width: 50%;
 height: 100%;
 display: flex;
 display: -webkit-flex;
 }

 .html_body {
 width: 50%;
 height: 100%;
 display: flex;
 display: -webkit-flex;
 background-color: #dfe9f1;
 }

 .md_textarea_content {
 flex: 1;
 height: 100%;
 padding: 12px;
 overflow: auto;
 box-sizing: border-box;
 resize: none;
 outline: none;
 border: none;
 background-color: #f4f4f4;
 font-size: 14px;
 color: #232323;
 line-height: 24px;
 }

業(yè)務(wù)邏輯部分的代碼如下：

script中的代碼解釋

 props: {
 width: {
 type: String,
 default: '1000px'
 },

 height: {
 type: String,
 default: '600px'
 }
 },

width: 組件的寬度

height:組件的高度

 data() {
 return {
 markString: '',
 htmlString: '',
 }
 },

markString：保存我們輸入的markdown內(nèi)容

htmlString：保存markdown內(nèi)容轉(zhuǎn)換成的html內(nèi)容，也就是通過marked函數(shù)轉(zhuǎn)換過來的

 mounted(){
  this.markString = testData
 },

顯示默認(rèn)數(shù)據(jù)

 //加粗
  addBold() {
  this.changeSelectedText("**","**")
  },

  //斜體
  addItalic() {
  this.changeSelectedText("***","***")
  },

  //加下劃線
  addUnderline() {
  this.changeSelectedText("","")
  },

這三個函數(shù)都是調(diào)用了 changeSelectedText 函數(shù)

主要是對鼠標(biāo)選中的內(nèi)容進行改變，比如加粗效果，是在選中文本的兩邊分別添加 **

所以changeSelectedText函數(shù)的作用就是在選中的文本兩邊添加不同的md的符號

比如

this.changeSelectedText("","") ，就是在選中的文本左邊和右邊都添加**

然后再把最新的內(nèi)容賦值給 this.$refs.ref_md_edit.value，同時也兩會給markString

這樣就可以做到選中文本加粗效果了

 //監(jiān)聽markString變化
  markString: function (value) {
  marked.setOptions({
   renderer: new marked.Renderer(),
   gfm: true,
   tables: true,
   breaks: true,
   pedantic: false,
   sanitize: false,
   smartLists: true,
   smartypants: false
  })

  this.htmlString = marked(value)
  },

此時是監(jiān)聽markString的變化

然后調(diào)用marked函數(shù)進行轉(zhuǎn)換成html內(nèi)容，并賦值給htmlString

marked.setOptions 是設(shè)置一些配置，有興趣的可以查一下這些配置的作用

 //監(jiān)聽htmlString并對其高亮
  htmlString: function (value) {
  this.$nextTick(() => {
   const codes = document.querySelectorAll(".html_body pre code");

   // elem 是一個 object
   codes.forEach(elem => {
   elem.innerHTML = "
" + elem.innerHTML.replace(/\n/g, "\n
") + "\n
"
   hljs.highlightBlock(elem);
   });
  });
  }

原本通過 highlight.js這個庫在顯示語法高亮的時候，是沒有行號的。這里我進行了擴展

通過 document.querySelectorAll(".html_body pre code") 找到nodeList

然后對其循環(huán)，動態(tài)添加 ul , li, 這樣就可以顯示行號了

不過這需要對 highlight的css文件添加幾個樣式

源碼里面我把highlight中的css文件全部copy到項目中了，使用的是github.css

具體位置是在項目中的 assets/markdown/styles/github.css

如果想使用其它的主題，可以自己修改其它的對應(yīng)的css文件，這里使用了github的主題，所以只修改了github.css這一個文件

以上是“如何使用Vue實現(xiàn)一個markdown編輯器”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：如何使用Vue實現(xiàn)一個markdown編輯器-創(chuàng)新互聯(lián)
URL鏈接：http://weahome.cn/article/eiejs.html