日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
我熬夜開發(fā)了一款簡(jiǎn)約實(shí)用、支持多平臺(tái)的Markdown在線編輯器（開源）

前言

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

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

完成項(xiàng)目一覽

調(diào)研Markdown編輯器

國(guó)內(nèi)、國(guó)外關(guān)于Markdown編輯器有很多。

editor.md

網(wǎng)址：https://pandao.github.io/editor.md/

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

typora

網(wǎng)址：https://www.typora.io/

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

tui-editor

網(wǎng)址：https://ui.toast.com/tui-editor

這是一款Markdown組件，通過調(diào)研決定用它。為什么?確認(rèn)過眼神~

技術(shù)棧

  • Vue.js
  • tui-editor

實(shí)戰(zhàn)

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

1. 搭建Vue腳手架

我們會(huì)使用VueCLI搭建一個(gè)最基礎(chǔ)的項(xiàng)目，這里暫時(shí)不需要Vue-router、Vuex這些插件，所以盡可能輕裝。

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

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

3. 配置編輯器組件

在配置編輯器時(shí)，有以下幾點(diǎn)使我非常困惑，以致于花費(fèi)了大量時(shí)間。

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

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

  1. 通過閱讀文檔：https://nhn.github.io/tui.editor/latest/
  2. 訪問Github網(wǎng)站：https://github.com/nhn/tui.editor

Editor.vue

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

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

增加功能

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

  1. 可復(fù)制HTML格式文本，方便復(fù)制到微信公眾號(hào)
  2. 可復(fù)制Markdown文本，方便可以復(fù)制到稀土掘金、csdn這些博客網(wǎng)站上發(fā)布
  3. 可下載Markdown文件，更加方便保存和移動(dòng)

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

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

downloadBlobAsFile.js

 
 
 
 
      
  
  
  
  1. export default function downloadBlobAsFile(data, filename) { 
    2.   
  
  
  
  2.     const contentType = 'application/octet-stream'; 
    3.   
  
  
  
  3.     if (!data) { 
    4.   
  
  
  
  4.         console.error(' No data'); 
    5.   
  
  
  
  5.         return; 
    6.   
  
  
  
  6.     } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.     if (!filename) { 
    9.   
  
  
  
  9.         filename = 'filetodonwload.txt'; 
    10.   
  
  
  
  10.     } 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.     if (typeof data === 'object') { 
    13.   
  
  
  
  13.         data = JSON.stringify(data, undefined, 4); 
    14.   
  
  
  
  14.     } 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16.     let blob = new Blob([data], {type: contentType}); 
    17.   
  
  
  
  17.     let e = document.createEvent('MouseEvents'); 
    18.   
  
  
  
  18.     let a = document.createElement('a'); 
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20.     a.download = filename; 
    21.   
  
  
  
  21.     a.href = URL.createObjectURL(blob); 
    22.   
  
  
  
  22.     a.dataset.downloadurl = [contentType, a.download, a.href].join(':'); 
    23.   
  
  
  
  23.     e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
    24.   
  
  
  
  24.     a.dispatchEvent(e); 
    25.   
  
  
  
  25. } 
    26.

Editor.vue

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

針對(duì)微信公眾號(hào)進(jìn)行樣式優(yōu)化

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

 
 
 
 
      
  
  
  
  1. ::v-deep ul li { 
    2.   
  
  
  
  2.   list-style-type: disc !important; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. ::v-deep ol li { 
    6.   
  
  
  
  6.   list-style-type: decimal !important; 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. ::v-deep ul li::before, ::v-deep ol li::before { 
    10.   
  
  
  
  10.   content: none; 
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12. ::v-deep .tui-editor-contents p>code{ 
    13.   
  
  
  
  13.   background-color: #fff5f5; 
    14.   
  
  
  
  14.   color: #ff502c; 
    15.   
  
  
  
  15. } 
    16.   
  
  
  
  16. ::v-deep .tui-editor-contents pre { 
    17.   
  
  
  
  17.   width: 100%; 
    18.   
  
  
  
  18.   overflow: auto; 
    19.   
  
  
  
  19. } 
    20.

線上體驗(yàn)

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

結(jié)語

謝謝閱讀，希望沒有浪費(fèi)你的時(shí)間。

源碼地址：

https://github.com/maomincoding/simpleMdEditor


本文題目：我熬夜開發(fā)了一款簡(jiǎn)約實(shí)用、支持多平臺(tái)的Markdown在線編輯器（開源）
鏈接URL：http://www.dlmjj.cn/article/cocgedo.html