12行代碼實(shí)現(xiàn)一個(gè)Web版Markdown編輯器: 實(shí)時(shí)預(yù)覽

Mertens 發(fā)布于2019-08-20 15:10 / 3790人閱讀

摘要：首先，我承認(rèn)標(biāo)題黨的嫌疑是逃不掉的了但是，諸君請(qǐng)繼續(xù)看下去，就會(huì)發(fā)現(xiàn)還是有干貨的源碼寫(xiě)這個(gè)編輯器的難點(diǎn)有兩個(gè)對(duì)文本進(jìn)行語(yǔ)法的解析實(shí)時(shí)檢測(cè)頁(yè)面文本變化針對(duì)，我在上找到了，看就能很快地上手針對(duì)，我選擇的是，因?yàn)槲铱粗辛怂碾p向綁定特性當(dāng)然數(shù)據(jù)和

首先，我承認(rèn)標(biāo)題黨的嫌疑是逃不掉的了．．．但是，諸君請(qǐng)繼續(xù)看下去，就會(huì)發(fā)現(xiàn)還是有干貨的

源碼：https://github.com/shuiRong/m...
Demo：https://shuirong.github.io/src/

寫(xiě)這個(gè)Markdown編輯器的難點(diǎn)有兩個(gè)：

１．對(duì)文本進(jìn)行Markdown語(yǔ)法的解析

２．實(shí)時(shí)檢測(cè)頁(yè)面文本變化．

針對(duì)１，我在Gayhub上找到了markedJS，看README就能很快地上手．
針對(duì)２，我選擇的是VueJS，因?yàn)槲铱粗辛怂碾p向綁定特性（當(dāng)然數(shù)據(jù)和視圖間的單向綁定就夠了）．而且VueJS非常輕量，簡(jiǎn)單容易上手不說(shuō)，中文文檔簡(jiǎn)直業(yè)界良心．
注：代碼高亮部分我用的是highlight.js

index.html

main.js

var vm = new Vue({
    el: "#container",
    data: {
        text: ""
    },
    computed: {
        markedText: function(){
            return marked(this.text);
        }
    }
});

核心部分就是這些了．再自定義下相關(guān)CSS,一個(gè)支持實(shí)時(shí)預(yù)覽的Markdown編輯器就搞定了．

這么簡(jiǎn)單？當(dāng)然不能這么說(shuō)．因?yàn)樽铍y的markdown語(yǔ)法解析和實(shí)時(shí)預(yù)覽部分引用了別處的代碼．如果都是自己實(shí)現(xiàn)的話(huà)，夠喝一壺的了．

既然說(shuō)到這里，那就聊聊MD語(yǔ)法解析和數(shù)據(jù)的雙向綁定的實(shí)現(xiàn)．

MD語(yǔ)法解析：簡(jiǎn)單實(shí)現(xiàn)玩玩的話(huà)，基本的HTML/CSS/JS，主要正則玩的溜就夠了．

實(shí)時(shí)預(yù)覽的重點(diǎn)在于數(shù)據(jù)和視圖間的單向綁定．進(jìn)一步介紹看這里

云服務(wù)器 GPU云服務(wù)器 web實(shí)現(xiàn)實(shí)時(shí)通訊 markdown在線編輯器 webrtc 實(shí)時(shí)預(yù)覽 java文檔預(yù)覽實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82053.html

相關(guān)文章

12行代碼實(shí)現(xiàn)一個(gè)Web版Markdown編輯器: 實(shí)時(shí)預(yù)覽

摘要：首先，我承認(rèn)標(biāo)題黨的嫌疑是逃不掉的了但是，諸君請(qǐng)繼續(xù)看下去，就會(huì)發(fā)現(xiàn)還是有干貨的源碼寫(xiě)這個(gè)編輯器的難點(diǎn)有兩個(gè)對(duì)文本進(jìn)行語(yǔ)法的解析實(shí)時(shí)檢測(cè)頁(yè)面文本變化針對(duì)，我在上找到了，看就能很快地上手針對(duì)，我選擇的是，因?yàn)槲铱粗辛怂碾p向綁定特性當(dāng)然數(shù)據(jù)和首先，我承認(rèn)標(biāo)題黨的嫌疑是逃不掉的了．．．但是，諸君請(qǐng)繼續(xù)看下去，就會(huì)發(fā)現(xiàn)還是有干貨的源碼：https://github.com/shuiRo...

makeFoxPlay 2019-08-01 16:31 評(píng)論0 收藏0
Top 10 JavaScript編輯器，你在用哪個(gè)？

摘要：在這個(gè)編輯器中，和是其中排名靠前的兩個(gè)。是一個(gè)免費(fèi)的輕量級(jí)編輯器和，用于和開(kāi)發(fā)。對(duì)于免費(fèi)的代碼編輯器來(lái)說(shuō)，是一個(gè)很好的選擇。可以安裝兩個(gè)命令行實(shí)用程序，用于從啟動(dòng)編輯器，用于管理的軟件包。對(duì)于JavaScript程序員來(lái)說(shuō)，目前有很多很棒的工具可供選擇。本文將會(huì)討論10個(gè)優(yōu)秀的支持javascript，HTML5和CSS開(kāi)發(fā)，并且可以使用Markdown進(jìn)行文檔編寫(xiě)的文本編輯器。為什...

zombieda 2019-08-21 11:45 評(píng)論0 收藏0
靡不有初，鮮克有終——寫(xiě)在VNote半周歲

摘要：舒適的編輯體驗(yàn)通過(guò)語(yǔ)法高亮，最大地消除與生俱來(lái)的編輯和閱讀的割裂感。所以，是不是又少了一個(gè)回到閱讀模式的借口代碼塊語(yǔ)法高亮通過(guò)插件可以支持代碼塊里面的代碼語(yǔ)法高亮，其他的編輯器好像沒(méi)有支持。首發(fā)于簡(jiǎn)書(shū). showImg(https://segmentfault.com/img/remote/1460000009164987); 從去年的十一開(kāi)始到今天，VNote已經(jīng)半周歲了，也迭代到...

roland_reed 2019-06-28 10:21 評(píng)論0 收藏0
[原]深入對(duì)比數(shù)據(jù)科學(xué)工具箱：Python和R 的 Web 編輯器

摘要：概述工欲善其事必先利其器，如果現(xiàn)在要評(píng)選數(shù)據(jù)科學(xué)中最好用的編輯器注意一定是可以通過(guò)訪問(wèn)的，和一定是角逐的最大熱門(mén)，正確使用編輯器可以很大地提升我們的工作效率。概述 showImg(https://segmentfault.com/img/bVAdol); 工欲善其事必先利其器，如果現(xiàn)在要評(píng)選數(shù)據(jù)科學(xué)中最好用的Web 編輯器（注意一定是可以通過(guò)Web訪問(wèn)的），RStudio和Jupyt...

RobinQu 2019-07-25 10:40 評(píng)論0 收藏0
【效率專(zhuān)精系列】善用API統(tǒng)一描述語(yǔ)言提升RestAPI開(kāi)發(fā)效率

摘要：其標(biāo)準(zhǔn)為前身是，提供強(qiáng)大的在線編輯功能，包括語(yǔ)法高亮錯(cuò)誤提示自動(dòng)完成實(shí)時(shí)預(yù)覽，并且支持用戶(hù)以格式撰寫(xiě)導(dǎo)入導(dǎo)出轉(zhuǎn)換文檔。團(tuán)隊(duì)內(nèi)部RestAPI開(kāi)發(fā)采用設(shè)計(jì)驅(qū)動(dòng)開(kāi)發(fā)的模式，即使用API設(shè)計(jì)文檔解耦前端和后端的開(kāi)發(fā)過(guò)程，雙方只在聯(lián)調(diào)與測(cè)試時(shí)耦合。在實(shí)際開(kāi)發(fā)和與前端合作的過(guò)程中，受限于眾多因素的影響，開(kāi)發(fā)效率還有進(jìn)一步提高的空間。本文的目的是優(yōu)化工具鏈支持，減少一部分重復(fù)和枯燥的勞動(dòng)。現(xiàn)狀...

tianyu 2019-08-16 10:42 評(píng)論0 收藏0