close

Markdown 算是小有名氣的標記語言,可以用來編輯文件,之前工作時所撰寫的文件,也都是用 Markdown 維護。只是文件都是放在網站上,要用電腦的軟體去編輯總是有些不便,如果有個線上編輯介面,就會方便許多。因此我尋找可用的元件來達到目的,後來找到了 MarkdownDeep。

http://www.toptensoftware.com/markdowndeep/api

要在 ASP.NET 的網站上使用 MarkdownDeep,只要利用NuGet搜尋 markdowndeep 即可,記得要安裝 .NET and JavaScript 這個版本。

2014-04-22_163045

 

接下來新增一個共用的 View,命名為 _MarkdownView,原始碼如下,注意到裡面會引用到mdd_styles.css以及 MarkdownDeepLib.min.js 這些必要的檔案。

2014-04-22_200958

 

接下來在 Controller 新增 TestInpu 這個 Action,而 View 如下。

2014-04-22_201042

 

然後新增以下 JavaScript,這是用來顯示編輯介面。

2014-04-22_201714

 

最後,從 Scripts 資料夾移動 MarkdownDeep 的相關檔案到 Content。

2014-04-22_201722

 

最後啟動網站,就可以看到以下介面,輸入 Markdown 語法,底下會顯示預覽結果。

2014-04-22_201805

 

接下來修改 View,將輸入的文字傳回後端然後轉譯為真正的 Html。

2014-04-22_202722

 

修改 Action,注意到 API 的用法相當簡單,只有一行而已,Action 最後會將結果傳到 MarkdownView。

2014-04-22_203449

 

最後新增 MarkdownView,用來顯示轉譯後的結果。

2014-04-22_203504

 

執行結果

2014-04-22_205019

arrow
arrow
    全站熱搜

    卑微研究生 發表在 痞客邦 留言(0) 人氣()