利用Vue實現(xiàn)一個markdown編輯器實例代碼

更新時間：2019年05月19日 09:33:21 作者：九路313

這篇文章主要給大家介紹了關于如何利用Vue實現(xiàn)一個markdown編輯器的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

前言

前段時間做項目的時候，需要一個Markdown編輯器，在網(wǎng)上找了一些開源的實現(xiàn)，但是都不滿足需求

說實話，這些開源項目也很難滿足需求公司項目的需求，與其實現(xiàn)一個大而全的項目，倒不如實現(xiàn)一個簡單的，易于在源碼上修改的項目，核心功能都有的，以供修改使用

本文的源碼地址如下：https://github.com/jiulu313/HelloMarkDown（本地下載）

喜歡的朋友可以幫忙star一下，歡迎交流學習

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

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

話不多說，來看思路

1 markdown內容如何轉換成 html？

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

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

2 markdown內容轉換成了html，如何進行語法高亮？

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

我們可以使用這兩個庫

先把markdown內容解析成html內容

把html內容進行語法高亮

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

3 代碼實現(xià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組件

布局文件的代碼如下：

<template>
 <div class="md_root_content" v-bind:style="{width:this.width,height: this.height}">

 <!--功能按鈕區(qū)-->
 <div class="button_bar">
 <span v-on:click="addBold"><B>B</B></span>
 <span v-on:click="addUnderline"><B>U</B></span>
 <span v-on:click="addItalic"><B>I</B></span>
 </div>

 <!--主要內容區(qū)-->
 <div class="content_bar">

 <!--markdown編輯器區(qū)-->
 <div class="markdown_body">
 <textarea ref="ref_md_edit" class="md_textarea_content" v-model="markString">
 </textarea>
 </div>

 <!--解析成html區(qū)-->
 <div class="html_body">
 <p v-html="htmlString"></p>
 </div>

 </div>

 </div>
</template>

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

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

對應的樣式代碼如下：

<style scoped>

 .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;
 }
</style>

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

<script>
 import marked from 'marked' //解析mardown語法的庫
 import hljs from 'highlight.js' //對代碼進行語法高亮的庫


 import testData from '../testData' //測試數(shù)據(jù)


 export default {
 name: "HelloMarkDown",

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

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

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

 mounted(){
 this.markString = testData
 },

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

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

 addUnderline() {
 this.changeSelectedText("<u>","</u>")
 },

 changeSelectedText(startString,endString){
 let t = this.$refs.ref_md_edit
 if (window.getSelection) {
  if (t.selectionStart != undefined && t.selectionEnd != undefined) {

  let str1 = t.value.substring(0, t.selectionStart)
  let str2 = t.value.substring(t.selectionStart, t.selectionEnd)
  let str3 = t.value.substring(t.selectionEnd)

  let result = str1 + startString + str2 + endString + str3
  t.value = result
  this.markString = t.value
  }
 }
 }
 },

 watch: {

 //監(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)聽htmlString并對其高亮
 htmlString: function (value) {
 this.$nextTick(() => {
  const codes = document.querySelectorAll(".html_body pre code");

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

 }
</script>

script中的代碼解釋

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

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

width: 組件的寬度

height:組件的高度

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

markString：保存我們輸入的markdown內容

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

 mounted(){
  this.markString = testData
 },

顯示默認數(shù)據(jù)

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

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

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

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

主要是對鼠標選中的內容進行改變，比如加粗效果，是在選中文本的兩邊分別添加 **

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

比如

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

然后再把最新的內容賦值給 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的變化

然后調用marked函數(shù)進行轉換成html內容，并賦值給htmlString

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

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

   // elem 是一個 object
   codes.forEach(elem => {
   elem.innerHTML = "<ul><li>" + elem.innerHTML.replace(/\n/g, "\n</li><li>") + "\n</li></ul>"
   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

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

有興趣的可以查看一下

github.css文件的提交記錄

具體的思路就是這些，水平有限，難免有bug，如有發(fā)現(xiàn)，歡迎提出

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章:

vue2移動端使用vue-qrcode-reader實現(xiàn)掃一掃功能的步驟
最近在使用vue開發(fā)的h5移動端想要實現(xiàn)一個調用攝像頭掃描二維碼的功能,所以下面這篇文章主要給大家介紹了關于vue2移動端使用vue-qrcode-reader實現(xiàn)掃一掃功能的相關資料,需要的朋友可以參考下
2023-06-06
如何設置Vue全局公共方法
這篇文章主要介紹了如何設置Vue全局公共方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
Antd-vue Table組件添加Click事件,實現(xiàn)點擊某行數(shù)據(jù)教程
這篇文章主要介紹了Antd-vue Table組件添加Click事件,實現(xiàn)點擊某行數(shù)據(jù)教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue.js輪播圖組件使用方法詳解
這篇文章主要為大家詳細介紹了vue.js輪播圖組件使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-07-07
vue引用js文件的多種方式(推薦)
這篇文章主要介紹了vue引用js文件的多種方式,本文大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-05-05
Vue首屏時間指標采集最佳方式詳解
這篇文章主要為大家介紹了Vue首屏時間指標采集最佳方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
element-ui?table表格底部合計自定義配置過程
這篇文章主要介紹了element-ui?table表格底部合計自定義配置過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
一步步帶你用vite簡單搭建ts+vue3全家桶
Vue3與TS的聯(lián)合是大趨勢,下面這篇文章主要給大家介紹了關于用vite簡單搭建ts+vue3全家桶的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07
vue網(wǎng)站優(yōu)化實戰(zhàn)之秒開網(wǎng)頁
最近在搭建自己的博客,前端采用Vue技術,發(fā)現(xiàn)首頁加載速度非常之慢,常常達到10S左右,遂開始優(yōu)化之旅,這篇文章主要給大家介紹了關于vue網(wǎng)站優(yōu)化實戰(zhàn)之秒開網(wǎng)頁的相關資料,需要的朋友可以參考下
2022-08-08
講解vue-router之什么是嵌套路由
這篇文章主要介紹了講解vue-router之什么是嵌套路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05