我們在一些網站中可以見到一款網頁編輯器——markdown; 這是一款功能強大的富文本編輯器,之前自己在網頁上使用的時候遇到了一點點的問題,現在跟大家分享下 在我們寫了文章之後是需要將內容保存到資料庫的,如果保存到資料庫中要方便以後需改的話,那麼需要保存成markdown語言,如果保存成html語言 ...
我們在一些網站中可以見到一款網頁編輯器——markdown;
這是一款功能強大的富文本編輯器,之前自己在網頁上使用的時候遇到了一點點的問題,現在跟大家分享下
在我們寫了文章之後是需要將內容保存到資料庫的,如果保存到資料庫中要方便以後需改的話,那麼需要保存成markdown語言,如果保存成html語言通過反向解析成markdown這個可能效果不是很好
如果保存成markdown就涉及到將資料庫中的數據取出後要解析成html,以下便是我的解決過程(我使用的是editormd):
首先需要初始化從markdown語言轉為html語言的解析器:
editormd.markdownToHTML("test-editormd", { htmlDecode : "style,script,iframe", emoji : true, taskList : true, tex : true, // 預設不解析 flowChart : true, // 預設不解析 sequenceDiagram : true // 預設不解析 });
其次就是js的引入
<script src="./examples/js/jquery.min.js"></script> <script src="lib/marked.min.js"></script> <script src="lib/prettify.min.js"></script> <script src="lib/raphael.min.js"></script> <script src="lib/underscore.min.js"></script> <script src="lib/sequence-diagram.min.js"></script> <script src="lib/flowchart.min.js"></script> <script src="lib/jquery.flowchart.min.js"></script> <script src="./editormd.js"></script>
引入的順序不能出錯否則可能有些js對象不能初始化,這些js在editor.md的lib包中已經存在。 還有就是上方中的"test-editormd",其實是html代碼中的一個id,這個是存放md內容的
<div style="margin-left: 100px"><div id="test-editormd"> <textarea style="display:none;" placeholder="markdown語言">#Editor.md</textarea> </div>至此,已經完成了所有的步驟,這可以使得資料庫中的md數據在頁面解析顯示