欢乐颂第二季,盗墓笔记第二季,大主宰

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案

我熬夜開發(fā)了一款簡約實用、支持多平臺的Markdown在線編輯器（開源）

前言

成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供洛南網站建設、洛南做網站、洛南網站設計、洛南網站制作等企業(yè)網站建設、網頁設計與制作、洛南企業(yè)網站模板建站服務，10多年洛南做網站經驗，不只是建網站，更提供有價值的思路和整體網絡服務。

之前，一直想開發(fā)一款屬于自己的Markdown編輯器，主要是自己平常寫文章可以更加靈活操作，另外擴寬自己的視野也是非常不錯的選擇啊!所以在周末就決定玩耍一番。首先我調研了很多線上熱門的md編輯器，都很優(yōu)秀。不為超過他們，主要自己用著舒服點。這篇文章主要是記錄下我是如何從0到1是完成一款還算拿得出手的Markdown編輯器。

完成項目一覽

調研Markdown編輯器

國內、國外關于Markdown編輯器有很多。

editor.md

網址：https://pandao.github.io/editor.md/

是一款開源的、可嵌入的 Markdown 在線編輯器(組件)，基于 CodeMirror、jQuery 和 Marked 構建。這個組件好像是國內開發(fā)的，個人之前用著還可以。

typora

網址：https://www.typora.io/

Typora是一款免費的輕量級Markdown編輯器，它沒有Mou，Haroopad等Markdown編輯器那么大名鼎鼎，算是較為小眾的一款產品。憑良心說話，我用過的Markdown編輯器也有好幾款，其中包括：小書匠，Haroopad，Atom等，但Typora是最合我心意的一款編輯器了，其輕量、快速、易于上手，使用起來簡直不要太舒服!!

tui-editor

網址：https://ui.toast.com/tui-editor

這是一款Markdown組件，通過調研決定用它。為什么?確認過眼神~

技術棧

Vue.js
tui-editor

實戰(zhàn)

確定好技術棧之后，我們就得腳踏實地地干活了。

1. 搭建Vue腳手架

我們會使用VueCLI搭建一個最基礎的項目，這里暫時不需要Vue-router、Vuex這些插件，所以盡可能輕裝。

2. 創(chuàng)建編輯器組件

我們會在components文件目錄下創(chuàng)建一個Editor.vue文件，這個文件也就是我們的主戰(zhàn)場，大部分操作都會在這個文件。

3. 配置編輯器組件

在配置編輯器時，有以下幾點使我非常困惑，以致于花費了大量時間。

代碼沒有被高亮
語言不是中文
編輯器樣式有問題

以上這幾個問題通過以下措施才得以解決：

通過閱讀文檔：https://nhn.github.io/tui.editor/latest/
訪問Github網站：https://github.com/nhn/tui.editor

Editor.vue

看似上面幾行代碼，但是也是很費勁才得以完成。

增加功能

首先，我開發(fā)這個程序的初衷是更好地方便自己寫文章，所以，我定下了這幾個需求：

可復制HTML格式文本，方便復制到微信公眾號
可復制Markdown文本，方便可以復制到稀土掘金、csdn這些博客網站上發(fā)布
可下載Markdown文件，更加方便保存和移動

因篇幅原因，先奉上主要邏輯代碼。這里我使用了clipboard這個將文本復制到剪貼板的插件。網址：https://clipboardjs.com/。

另外，downloadBlobAsFile方法主要是創(chuàng)建Blob對象，然后通過a標簽的download屬性進行下載。

downloadBlobAsFile.js

 
 
 
   
  
  
  export default function downloadBlobAsFile(data, filename) {   
  
  
      const contentType = 'application/octet-stream';   
  
  
      if (!data) {   
  
  
          console.error(' No data');   
  
  
          return;   
  
  
      }   
  
  
     
  
  
      if (!filename) {   
  
  
          filename = 'filetodonwload.txt';   
  
  
      }   
  
  
     
  
  
      if (typeof data === 'object') {   
  
  
          data = JSON.stringify(data, undefined, 4);   
  
  
      }   
  
  
     
  
  
      let blob = new Blob([data], {type: contentType});   
  
  
      let e = document.createEvent('MouseEvents');   
  
  
      let a = document.createElement('a');   
  
  
     
  
  
      a.download = filename;   
  
  
      a.href = URL.createObjectURL(blob);   
  
  
      a.dataset.downloadurl = [contentType, a.download, a.href].join(':');   
  
  
      e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);   
  
  
      a.dispatchEvent(e);   
  
  
  }

Editor.vue

針對微信公眾號進行樣式優(yōu)化

::v-deep是深度作用選擇器，主要是為了覆蓋原有的樣式所用。

 
 
 
   
  
  
  ::v-deep ul li {   
  
  
    list-style-type: disc !important;   
  
  
  }   
  
  
     
  
  
  ::v-deep ol li {   
  
  
    list-style-type: decimal !important;   
  
  
  }   
  
  
     
  
  
  ::v-deep ul li::before, ::v-deep ol li::before {   
  
  
    content: none;   
  
  
  }   
  
  
  ::v-deep .tui-editor-contents p>code{   
  
  
    background-color: #fff5f5;   
  
  
    color: #ff502c;   
  
  
  }   
  
  
  ::v-deep .tui-editor-contents pre {   
  
  
    width: 100%;   
  
  
    overflow: auto;   
  
  
  }

線上體驗

https://www.maomin.club/site/mdeditor/

結語

謝謝閱讀，希望沒有浪費你的時間。

源碼地址：

https://github.com/maomincoding/simpleMdEditor

網站標題：我熬夜開發(fā)了一款簡約實用、支持多平臺的Markdown在線編輯器（開源）
網頁網址：http://fisionsoft.com.cn/article/cocgedo.html

新聞中心

Simple·MarkDown編輯器

作者

其他資訊