簡(jiǎn)介：
開源在線 Markdown 編輯器，推薦使用。
官網(wǎng)：https://pandao.github.io/editor.md/
下載安裝
https://github.com/pandao/editor.md/archive/master.zip
下載解壓下來的文件夾是:editor.md-master
截取的一部分
1.examples文件中是使用PHP做的所有示例(可以在文檔編輯器里打開，并查看源代碼)；
2.lib文件夾中是editor.md所依賴的第三方j(luò)s資源；
3.plugins文件夾中是如emoji表情支持、代碼格式化等插件；
在html頁面嵌入編輯器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--需要引入的css文件-->
<link rel="stylesheet" href="editor.md-master/css/editormd.min.css" />
</head>
<body>
<!--模擬表單傳輸數(shù)據(jù)到后臺(tái)-->
<form action="./add.php" method="post" enctype="multipart/form-data" accept-charset="UTF-8">
<div id="my-editormd">
<!--Editor.md可以自動(dòng)附加<textarea>標(biāo)簽-->
<textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea>
<!-- 注意：name屬性的值-->
<!--textarea中name屬性值，應(yīng)該跟著div的ID"my-editormd"值來定，即(div的id值+)-markdown-doc-->
/***********editormd還會(huì)創(chuàng)建一個(gè)name=(div的id值+html-code)的textarea見下**********/
</div>
<input type="submit" value=" Send the artcile !" />
</from>
<!--需要引入的js文件和js配置-->
<script src="editor.md-master/examples/js/jquery.min.js"></script>
<script src="editor.md-master/editormd.min.js"></script>
<script type="text/javascript">
$(function() {
var editor = editormd("my-editormd", {//上面div的id值
width: "90%",
height: 540,
theme : "dark", //主題
path: "editor.md-master/lib/" // 這里我的html文件和editor.md-master文件位置如下圖
saveHTMLToTextarea : true//這個(gè)配置，方便post提交html源碼表單，保存 HTML 到 Textarea它關(guān)乎后端是否可以獲取到值
});
});
//更多的editormd配置請(qǐng)參考下面或官網(wǎng)
</script>
</body>
</html>
另外一個(gè)textarea
需要html格式的文本可以從這獲取，name都告訴你了，該知道怎么辦吧
另外一個(gè)textarea
html文件和editor.md-master文件位置
位置
更多editormd配置
width: "90%",
height: 740,
path : '../lib/',
theme : "dark", //主題
previewTheme : "dark",
editorTheme : "pastel-on-dark",
markdown : md,
codeFold : true,
//syncScrolling : false,
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
searchReplace : true,
//watch : false, // 關(guān)閉實(shí)時(shí)預(yù)覽
htmlDecode : "style,script,iframe|on*", // 開啟 HTML 標(biāo)簽解析，為了安全性，默認(rèn)不開啟
//toolbar : false, //關(guān)閉工具欄
//previewCodeHighlight : false, // 關(guān)閉預(yù)覽 HTML 的代碼塊高亮，默認(rèn)開啟
emoji : true,
taskList : true,
tocm : true, // Using [TOCM]
tex : true, // 開啟科學(xué)公式TeX語言支持，默認(rèn)關(guān)閉
flowChart : true, // 開啟流程圖支持，默認(rèn)關(guān)閉
sequenceDiagram : true, // 開啟時(shí)序/序列圖支持，默認(rèn)關(guān)閉,
//dialogLockScreen : false, // 設(shè)置彈出層對(duì)話框不鎖屏，全局通用，默認(rèn)為true
//dialogShowMask : false, // 設(shè)置彈出層對(duì)話框顯示透明遮罩層，全局通用，默認(rèn)為true
//dialogDraggable : false, // 設(shè)置彈出層對(duì)話框不可拖動(dòng)，全局通用，默認(rèn)為true
//dialogMaskOpacity : 0.4, // 設(shè)置透明遮罩層的透明度，全局通用，默認(rèn)值為0.1
//dialogMaskBgColor : "#000", // 設(shè)置透明遮罩層的背景顏色，全局通用，默認(rèn)為#fff
/**上傳圖片相關(guān)配置如下*/
imageUpload : true,//開啟上傳圖片嗎？
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//圖片支持的格式
imageUploadURL : "editor.md-master/examples/php/upload.php", //處理圖片上傳的url
//上面這個(gè)地址是官網(wǎng)給定了一個(gè)處理上傳圖片的php的demo 當(dāng)然后端的代碼得自己寫
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);
}
關(guān)于圖片上傳
首先后端自己寫，還有官網(wǎng)給的php-demo我沒成功啊。。難道我。漏了點(diǎn)什么。。有沒有大佬實(shí)現(xiàn)成功的
//editor.md期望得到一個(gè)json格式的上傳后的返回值，格式是這樣的：
/*
{
success : 0 | 1, // 0 表示上傳失敗，1 表示上傳成功
message : "提示的信息，上傳成功或上傳失敗及錯(cuò)誤信息等。",
url : "圖片地址" // 上傳成功時(shí)才返回
}
//返回的參數(shù)success的值不是字符串“0”和“1”，而是數(shù)字0和1，后臺(tái)返回的時(shí)候一定要注意
*/
前臺(tái)顯示
展示內(nèi)容有兩種方式
- 一種方式是直接展示html格式的內(nèi)容
- 第二種方式是頁面加載markdown格式內(nèi)容，然后通過editor.md再次渲染成html格式。
1.直接展示html
<link rel="stylesheet" href="editor.md-master/css/editormd.min.css" />
<div id="my-content">
${content} <!--${content/}為獲取后臺(tái)的html格式內(nèi)容。-->
</div>
<script src="editor.md-master/examples/js/jquery.min.js"></script>
<script src="editor.md-master/editormd.min.js"></script>
<script src="editor.md-master/lib/marked.min.js"></script>
<script src="editor.md-master/lib/prettify.min.js"></script>
<script type="text/javascript">
$(function () {
editormd.markdownToHTML("my-content");
})
</script>
2.如果第二種：
首先引入必要JS（下面不是所有必要,官網(wǎng)說依賴這么多）：
<script src="editor.md-master/examples/js/jquery-min.js"></script>
<script src="editor.md-master/lib/flowchart.min.js"></script>
<script src="editor.md-master/lib/jquery.flowchart.min.js"></script>
<script src="editor.md-master/lib/marked.min.js"></script>
<script src="editor.md-master/lib/prettify.min.js"></script>
<script src="editor.md-master/lib/raphael.min.js"></script>
<script src="editor.md-master/lib/sequence-diagram.min.js"></script>
<script src="editor.md-master/lib/underscore.min.js"></script>
<script src="editor.md-master/editormd.min.js"></script>
然后，本頁面中，加入如下DIV以及css
<link rel="stylesheet" href="editor.md-master/css/editormd.min.css"/>
<div id="doc-content">
<textarea style="display:none;">
${content} <!--${content/}為獲取后臺(tái)的md格式內(nèi)容。-->
</textarea>
</div>
再加上如下js
<script type="text/javascript">
var testEditor;
$(function () {
testEditor = editormd.markdownToHTML("doc-content", {//注意：這里是上面DIV的id
htmlDecode: "style,script,iframe",
emoji: true,
taskList: true,
tex: true, // 默認(rèn)不解析
flowChart: true, // 默認(rèn)不解析
sequenceDiagram: true, // 默認(rèn)不解析
codeFold: true,
});});
</script>
效果預(yù)覽
模擬拿數(shù)據(jù)
模擬顯示md格式的文本
最后重點(diǎn)：你嫌上面?zhèn)z種方法都麻煩？
肯定有第三方幫助我門做啊。。
上代碼你就懂了：
1.老外的工具：strapdown.js 官網(wǎng)http://strapdownjs.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.navbar-fixed-top{
display: none;
}
</style>
</head>
<body>
<xmp theme="readable" style="display:none;">
##hello world
**寫點(diǎn)東西做測(cè)試**
| 表格 |支持 |
| ------------ | ------------ |
| 嗎|呀 |
</xmp>
</body>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>
國(guó)外的請(qǐng)下載下來然后改樣式路徑
它的gitHub:https://github.com/arturadib/strapdown
2.showdown.min.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="convert()">
<div>
<textarea id="content" style="display:none;" >
##hello world
**寫點(diǎn)東西做測(cè)試**
- 123
*斜體*
</textarea>
<div id="result">
</div>
<script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script>
<script>
function convert(){
//獲取要轉(zhuǎn)換的文字
var text = document.getElementById("content").value;
//創(chuàng)建實(shí)例
var converter = new showdown.Converter();
//進(jìn)行轉(zhuǎn)換
var html = converter.makeHtml(text);
//展示到對(duì)應(yīng)的地方 result便是id名稱
document.getElementById("result").innerHTML = html;
}
</script>
</body>
</html>
怎么不支持表格啊!!!!
