12行代碼實現一個Web版Markdown編輯器: 實時預覽

makeFoxPlay 發布于2019-08-01 16:31 / 2606人閱讀

摘要：首先，我承認標題黨的嫌疑是逃不掉的了但是，諸君請繼續看下去，就會發現還是有干貨的源碼寫這個編輯器的難點有兩個對文本進行語法的解析實時檢測頁面文本變化針對，我在上找到了，看就能很快地上手針對，我選擇的是，因為我看中了她的雙向綁定特性當然數據和

首先，我承認標題黨的嫌疑是逃不掉的了．．．但是，諸君請繼續看下去，就會發現還是有干貨的

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

寫這個Markdown編輯器的難點有兩個：

１．對文本進行Markdown語法的解析

２．實時檢測頁面文本變化．

針對１，我在Gayhub上找到了markedJS，看README就能很快地上手．
針對２，我選擇的是VueJS，因為我看中了她的雙向綁定特性（當然數據和視圖間的單向綁定就夠了）．而且VueJS非常輕量，簡單容易上手不說，中文文檔簡直業界良心．
注：代碼高亮部分我用的是highlight.js

index.html

main.js

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

核心部分就是這些了．再自定義下相關CSS,一個支持實時預覽的Markdown編輯器就搞定了．

這么簡單？當然不能這么說．因為最難的markdown語法解析和實時預覽部分引用了別處的代碼．如果都是自己實現的話，夠喝一壺的了．

既然說到這里，那就聊聊MD語法解析和數據的雙向綁定的實現．

MD語法解析：簡單實現玩玩的話，基本的HTML/CSS/JS，主要正則玩的溜就夠了．

實時預覽的重點在于數據和視圖間的單向綁定．進一步介紹看這里

GPU云服務器云服務器 web實現實時通訊 markdown在線編輯器 webrtc 實時預覽 java文檔預覽實現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50576.html

12行代碼實現一個Web版Markdown編輯器: 實時預覽

摘要：首先，我承認標題黨的嫌疑是逃不掉的了但是，諸君請繼續看下去，就會發現還是有干貨的源碼寫這個編輯器的難點有兩個對文本進行語法的解析實時檢測頁面文本變化針對，我在上找到了，看就能很快地上手針對，我選擇的是，因為我看中了她的雙向綁定特性當然數據和首先，我承認標題黨的嫌疑是逃不掉的了．．．但是，諸君請繼續看下去，就會發現還是有干貨的源碼：https://github.com/shuiRo...

Mertens 2019-08-20 15:10 評論0 收藏0
Top 10 JavaScript編輯器，你在用哪個？

摘要：在這個編輯器中，和是其中排名靠前的兩個。是一個免費的輕量級編輯器和，用于和開發。對于免費的代碼編輯器來說，是一個很好的選擇。可以安裝兩個命令行實用程序，用于從啟動編輯器，用于管理的軟件包。對于JavaScript程序員來說，目前有很多很棒的工具可供選擇。本文將會討論10個優秀的支持javascript，HTML5和CSS開發，并且可以使用Markdown進行文檔編寫的文本編輯器。為什...

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

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

roland_reed 2019-06-28 10:21 評論0 收藏0
[原]深入對比數據科學工具箱：Python和R 的 Web 編輯器

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

RobinQu 2019-07-25 10:40 評論0 收藏0
【效率專精系列】善用API統一描述語言提升RestAPI開發效率

摘要：其標準為前身是，提供強大的在線編輯功能，包括語法高亮錯誤提示自動完成實時預覽，并且支持用戶以格式撰寫導入導出轉換文檔。團隊內部RestAPI開發采用設計驅動開發的模式，即使用API設計文檔解耦前端和后端的開發過程，雙方只在聯調與測試時耦合。在實際開發和與前端合作的過程中，受限于眾多因素的影響，開發效率還有進一步提高的空間。本文的目的是優化工具鏈支持，減少一部分重復和枯燥的勞動。現狀...

tianyu 2019-08-16 10:42 評論0 收藏0