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