editormd使用教程

對於現在的程序員來說，都需要一個快速寫文章的語言，那么無非就是markdown了，市面上markdown編輯器並不多，而且也不怎么好用，現在推薦國內的比較牛逼的。

入門

1. 建議先到官方看下如何使用，避免少走彎路。
2. 官方地址 https://pandao.github.io/editor.md/examples/index.html

下載安裝

1. 下載地址 https://pandao.github.io/editor.md/

開始集成

將editormd拷貝到你的項目

css代碼

 <link href="/Content/editormd/css/editormd.min.css" rel="stylesheet" />

html代碼

js代碼

<script src="/Content/editormd/editormd.min.js"></script>
<script type="text/javascript">
	//初始化編輯器
	var testEditor;
	$(function () {
		testEditor = editormd("txtblogcontent", {
			width: "100%",
			height: 740,
			path: '/Content/editormd/lib/',
			theme: "dark",
			previewTheme: "dark",
			editorTheme: "pastel-on-dark",
			markdown: "",
			codeFold: true,
			//syncScrolling : false,
			saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
			searchReplace: true,
			//watch : false,                // 關閉實時預覽
			htmlDecode: "style,script,iframe|on*",            // 開啟 HTML 標簽解析，為了安全性，默認不開啟    
			//toolbar  : false,             //關閉工具欄
			//previewCodeHighlight : false, // 關閉預覽 HTML 的代碼塊高亮，默認開啟
			emoji: true,
			taskList: true,
			tocm: true,         // Using [TOCM]
			tex: true,                   // 開啟科學公式TeX語言支持，默認關閉
			flowChart: true,             // 開啟流程圖支持，默認關閉
			sequenceDiagram: true,       // 開啟時序/序列圖支持，默認關閉,
			//dialogLockScreen : false,   // 設置彈出層對話框不鎖屏，全局通用，默認為true
			//dialogShowMask : false,     // 設置彈出層對話框顯示透明遮罩層，全局通用，默認為true
			//dialogDraggable : false,    // 設置彈出層對話框不可拖動，全局通用，默認為true
			//dialogMaskOpacity : 0.4,    // 設置透明遮罩層的透明度，全局通用，默認值為0.1
			//dialogMaskBgColor : "#000", // 設置透明遮罩層的背景顏色，全局通用，默認為#fff
			imageUpload: true,
			imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
			imageUploadURL: "/Center/RichTextUpload",
			onload: function () {
				//console.log('onload', this);
				//this.fullscreen();
				//this.unwatch();
				//this.watch().fullscreen();

				//this.setMarkdown("#PHP");
				//this.width("100%");
				//this.height(480);
				//this.resize("100%", 640);
			}
		});
	});

	//獲取編輯器內容
	var blogcontent = encodeURIComponent(testEditor.getMarkdown());
</script>

---

將markdown轉換成html

css代碼

  <link href="/Content/editormd/css/editormd.min.css" rel="stylesheet" />

html代碼

js代碼

 <script src="/Content/editormd/lib/marked.min.js"></script>
 <script src="/Content/editormd/lib/prettify.min.js"></script>
 <script src="/Content/editormd/lib/raphael.min.js"></script>
 <script src="/Content/editormd/lib/underscore.min.js"></script>
 <script src="/Content/editormd/lib/sequence-diagram.min.js"></script>
 <script src="/Content/editormd/lib/flowchart.min.js"></script>
 <script src="/Content/editormd/lib/jquery.flowchart.min.js"></script>
 <script src="/Content/editormd/editormd.min.js"></script>
 <script type="text/javascript">
	var testEditor;
	$(function () {
		testEditor = editormd.markdownToHTML("txtblogcontent", {
			htmlDecode: "style,script,iframe",  // you can filter tags decode
			emoji: true,
			taskList: true,
			tex: true,  // 默認不解析
			flowChart: true,  // 默認不解析
			sequenceDiagram: true,  // 默認不解析
			codeFold: true,
	});
 </script>

完善

到這里基本已經完成了，上傳圖片的自己后台處理下即可，還有一些彈出框，例如彈出上傳圖片時樣式會影響，根據自己的需求改改即可，另外還有表情里的github-emoji會沒有顯示出來，需要改幾個地方。

1. 將emoji表情下載下來上傳到服務器。
2. 修改emoji-dialog.js文件

第一個箭頭表示存放表情包的文件夾

js修改代碼

將路徑改為自己上傳的表情表路徑即可

展示表情

將這四個js文件中的路徑替換成你表情包的路徑，原來路徑 http://www.emoji-cheat-sheet.com/graphics/emojis/

表情包下載地址 http://obgwarx9r.bkt.clouddn.com/emoji.zip