### xhEditor demo14 : Markdown可视化

# Markdown可视化演示 这个DEMO演示了如何基于xhEditor实现Markdown语法的可视化编辑。 初始化代码如下： var markdownCSS = '<style>*{margin:0;padding:0;}p {margin:1em 0;line-height:1.5em;}table {font-size:inherit;font:100%;margin:1em;}table th{border-bottom:1px solid #bbb;padding:.2em 1em;}table td{border-bottom:1px solid #ddd;padding:.2em 1em;}input[type=text],input[type=password],input[type=image],textarea{font:99% helvetica,arial,freesans,sans-serif;}select,option{padding:0 .25em;}optgroup{margin-top:.5em;}img{border:0;max-width:100%;}abbr{border-bottom:none;}a{color:#4183c4;text-decoration:none;}a:hover{text-decoration:underline;}a code,a:link code,a:visited code{color:#4183c4;}h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6{border:0;}h1{font-size:170%;border-bottom:4px solid #aaa;padding-bottom:.5em;margin-top:1.5em;}h1:first-child{margin-top:0;padding-top:.25em;border-top:none;}h2{font-size:150%;margin-top:1.5em;border-bottom:4px solid #e0e0e0;padding-bottom:.5em;}h3{margin-top:1em;}hr{border:1px solid #ddd;}ul{margin:1em 0 1em 2em;}ol{margin:1em 0 1em 2em;}ul li,ol li{margin-top:.5em;margin-bottom:.5em;}ul ul,ul ol,ol ol,ol ul{margin-top:0;margin-bottom:0;}blockquote{margin:1em 0;border-left:5px solid #ddd;padding-left:.6em;color:#555;}dt{font-weight:bold;margin-left:1em;}dd{margin-left:2em;margin-bottom:1em;}pre{margin-left:2em;border-left:3px solid #CCC;padding:0 1em;}</style>'; var plugins={ Code:{c:'btnCode',t:'插入代码',h:1,e:function(){ var _this=this; var htmlCode='<div><textarea id="xheCodeValue" wrap="soft" spellcheck="false" style="width:300px;height:100px;" /></div><div style="text-align:right;"><input type="button" id="xheSave" value="确定" /></div>'; var jCode=$(htmlCode), jValue=$('#xheCodeValue',jCode), jSave=$('#xheSave',jCode); jSave.click(function(){ _this.loadBookmark(); _this.pasteHTML('<pre>'+_this.domEncode(jValue.val())+'</pre>'); _this.hidePanel(); return false; }); _this.saveBookmark(); _this.showDialog(jCode); }}, map:{c:'btnMap',t:'插入Google地图',e:function(){ var _this=this; _this.saveBookmark(); _this.showIframeModal('Google 地图','googlemap/googlemap.html',function(v){ _this.loadBookmark(); _this.pasteHTML('<img src="'+v+'" />'); },538,404); }} }; $('#elm1').xheditor({ 'tools':'Cut,Copy,Paste,Pastetext,|,Blocktag,FontSize,Bold,Italic,SelectAll,Removeformat,|,List,Outdent,Indent,|,Link,Unlink,Img,Hr,Emot,Code,map,|,Source,Print,Fullscreen', 'listBlocktag': [{n:'h1'},{n:'h2'},{n:'h3'},{n:'h4'},{n:'h5'},{n:'h6'}], 'plugins': plugins, 'beforeSetSource': Md2HTML, 'beforeGetSource': HTML2Md, 'loadCSS': markdownCSS }); # 感谢 感谢以下两个开源组件提供HTML和Markdown语法之间的转换实现。 1. [https://github.com/kates/html2markdown](https://github.com/kates/html2markdown) 2. [https://github.com/coreyti/showdown](https://github.com/coreyti/showdown)