markdown在前端的简单使用
目錄
前言
一、引用editor.md進(jìn)行markdown編輯器使用
介紹
使用準(zhǔn)備
二、開始使用
創(chuàng)建
查看
修改編輯
三、總結(jié)與感悟
四、最后
前言
最近女朋友在做一個(gè)項(xiàng)目，她想使用markdown來進(jìn)行博客文章的編輯，她問我該怎樣實(shí)現(xiàn)對(duì)博客的創(chuàng)建、編輯、瀏覽。其實(shí)使用markdown對(duì)博客的編寫，我也是第一次。男人嘛不行也得行，隨后我就研究了一手，順便寫下這篇文章（其實(shí)在寫博客上我還是比較偷懶的），文章內(nèi)容將描述如何簡(jiǎn)單的使用markdow的。
一、引用editor.md進(jìn)行markdown編輯器使用
介紹
editor.md可以被引用來對(duì)markdown文本進(jìn)行編輯，具體使用樣例可以查看csdn的文章編寫或editor官網(wǎng)（Editor.md - 開源在線 Markdown 編輯器 (ipandao.com)）,這里將不再詳細(xì)介紹editor.md。
使用準(zhǔn)備
下載editor.md，editor的下載有多種，這里說兩種：1.使用github進(jìn)行下載，2.使用npm進(jìn)行下載。如果你沒有安裝npm或不會(huì)使用，這里建議你使用github進(jìn)行下載。
window下npm命令下載-》win+r鍵輸入cmd調(diào)出黑框口-》輸入npm i editor.md -g進(jìn)行全局安裝；此段的第二張圖為點(diǎn)擊github下載后彈出的下載框。
我們?cè)诓榭垂倬W(wǎng)時(shí)會(huì)發(fā)現(xiàn)editor依賴于jQuery、CodeMirror、marked、FontAwesome、github-markdown.css、KaTeX、Rephael.js、prettify.js、flowchart.js、sequence-diagram.js、Prefixes.scss的。Jquery我在此列在第一，使用editor時(shí)jquery是必不可少的，所以我們還需下載jquery，(jquery官網(wǎng)--jQuery)；
二、開始使用
?
會(huì)不多說，我們先來一個(gè)創(chuàng)建案列
創(chuàng)建
<!DOCTYPE html> <html> <head><title>markdown編輯器的使用--創(chuàng)建文檔</title><link rel="stylesheet" href="static/editormd/css/editormd.css" /> </head> <body><div id="articleContainer"><textarea class="editormd-markdown-textarea" name="markdownText" id="origin">### 關(guān)于 Editor.md**Editor.md** 是一款開源的、可嵌入的 Markdown 在線編輯器（組件），基于 CodeMirror、jQuery 和 Marked 構(gòu)建。</textarea><textarea class="editormd-html-textarea" name="htmlText" id="message"></textarea></div><div ><button id="mybtn">獲取</button></div><script src="static/jquery-1.11.3/jquery.min.js"></script><script src="static/editormd/editormd.min.js"></script><script type="text/javascript">$(function() {var editor = editormd("articleContainer", {width : "100%",height : "500",//不能使用百分比，使用后，將根據(jù)內(nèi)容自動(dòng)收放watch : false,//是否開啟預(yù)覽markdown: "",//markdown文本內(nèi)容saveHTMLToTextarea: true, // 是否將文本保存 HTML 到 Textareapath : "static/editormd/lib/"//lib的路徑/*//下面三個(gè)屬性，當(dāng)文章需要包含圖片時(shí)添加imageUpload : true,//是否開啟圖片自動(dòng)上傳imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//可上傳的圖片格式imageUploadURL : "網(wǎng)絡(luò)地址/項(xiàng)目名/上傳路徑"//圖片上傳地址，如: http:localhost:8080/mylove/imageUpload.do*/});//由于editot.md是懶加載setTimeout(function(){//獲取編輯器內(nèi)容console.log(editor.getMarkdown());},500);//綁定點(diǎn)擊事件$("#mybtn").click(function(){//這里沒有去寫后端接口了，將內(nèi)容存至瀏覽器存儲(chǔ)以便查看和編輯window.localStorage.setItem("data",JSON.stringify(editor.getMarkdown()));});});</script></body> </html>代碼實(shí)現(xiàn)效果
?
?
查看
<!DOCTYPE html> <html> <head><title>查看markdown生成的文檔</title><link rel="stylesheet" href="static/editormd/css/editormd.css" /> </head> <body><div id="articleContainer"><textarea class="editormd-html-textarea" name="message" id="message"></textarea></div><script src="static/jquery-1.11.3/jquery.min.js"></script><script src="static/editormd/editormd.min.js"></script><!-- 一下是將mark轉(zhuǎn)html需要的js --><script src="static/editormd/lib/marked.min.js"></script><script src="static/editormd/lib/prettify.min.js"></script><script type="text/javascript">var testEditor;$(function(){//將json格式的字符串轉(zhuǎn)化為一個(gè)javaScript對(duì)象//var myhtml = JSON.parse(window.localStorage.getItem("data"));//$("#message").html(myhtml);//這里使用將markdown文本先html進(jìn)document再轉(zhuǎn)也可以var md = JSON.parse(window.localStorage.getItem("data"));//使用editor.md的markToHMLT將markdown文本轉(zhuǎn)成htmltestEditor = editormd.markdownToHTML("articleContainer",{htmlDecode: "style,script,iframe",emoji: true,taskList: true,tocm: true,tex: true, // 開啟科學(xué)公式TeX語言解析支持,默認(rèn)不解析//flowChart: true, // // 開啟流程圖解析支持,默認(rèn)不解析//sequenceDiagram: true,// 開啟時(shí)序圖(序列圖)解析支持,默認(rèn)不解析watch:true, //開啟實(shí)時(shí)預(yù)覽,查看時(shí)開不開都一樣codeFold: false,//代碼是否堆疊editor:false,//是否可編輯markdown: md,//將markdown文本加入編輯器});});</script> </body> </html>實(shí)現(xiàn)情況
修改編輯
<!DOCTYPE html> <html> <head><title>編輯文檔</title><link rel="stylesheet" href="static/editormd/css/editormd.css" /><style type="text/css">#articleContainer{width: 100%;height: 500px}</style> </head> <body><div id="articleContainer"><textarea class="editormd-markdown-textarea" name="markdownText" id="origin"></textarea><textarea class="editormd-html-textarea" name="htmlText" id="message"></textarea></div><script src="static/jquery-1.11.3/jquery.min.js"></script><script src="static/editormd/editormd.min.js"></script><script src="static/editormd/lib/marked.min.js"></script><script src="static/editormd/lib/prettify.min.js"></script><script type="text/javascript">var testEditor;$(function(){//將json格式的字符串轉(zhuǎn)化為一個(gè)javaScript對(duì)象var myhtml = JSON.parse(window.localStorage.getItem("data"));$("#origin").html(myhtml);var editor = editormd("articleContainer", {width : "100%",height : "500",watch : true,markdown: "",saveHTMLToTextarea: true, // 保存 HTML 到 Textareapath : "static/editormd/lib/"});});</script> </body> </html>修改這里和創(chuàng)建其實(shí)在前端顯示區(qū)別不大，就不再上圖了。
三、總結(jié)與感悟
在我們?nèi)未a做完后，我們不妨打開瀏覽器看看源碼，創(chuàng)建代碼中，我給出了兩個(gè)textarea，并分別給予它們id和name，為什么我要多此一舉呢?? 我們不妨假設(shè)這兩個(gè)文本域分別會(huì)包含不同的東西，見下圖，id="origin"的textarea中含有markdown文本內(nèi)容,id="message"的textarea中含有html文本內(nèi)容。
那知道有這兩種文本內(nèi)容有什么用呢？這個(gè)問題涉及到后端存儲(chǔ)。我們可以將博客的具體內(nèi)容存入數(shù)據(jù)庫，也可將博客的內(nèi)容按照預(yù)先制定好的模板生成靜態(tài)(.html)或偽靜態(tài)文件存入文件夾。既然說到將具體內(nèi)容存到數(shù)據(jù)庫，這里建議在mysql數(shù)據(jù)庫中將博客的內(nèi)容字段設(shè)置為text。
四、最后
感謝我的女友，感謝csdn,讓我又有了一次學(xué)習(xí)成長的機(jī)會(huì)。如果有問題的小伙伴可以留言聯(lián)系我，當(dāng)然有些問題我也可能解答不了。后期若發(fā)現(xiàn)此篇文章還有不足，請(qǐng)及時(shí)聯(lián)系我，我將會(huì)進(jìn)行修改。
?
?
總結(jié)
以上是生活随笔為你收集整理的markdown在前端的简单使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WEB2.0商业模式才刚开始
- 下一篇： HTML div设置菜鸟教程