下載完成后引入
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="./lib/editor.md-master/editormd.js"></script>
<link rel="stylesheet" href="./lib/editor.md-master/css/editormd.css">
THML 部分
- 注意文件上傳 寫的是接口地址 然后接口負(fù)責(zé)文件移動(dòng)
<div class="panel-body">
<div id="test-editormd" style="">
<textarea class="editormd-html-textarea" name="text"></textarea>
</div>
</div>
<script>
var testEditor1;
testEditor1 = editormd("test-editormd", {
placeholder:'', //默認(rèn)顯示的文字育灸，這里就不解釋了
width: "100%",
height: document.documentElement.clientHeight-100,
syncScrolling: "single",
path: "./lib/editor.md-master/lib/", //你的path路徑（原資源文件中l(wèi)ib包在我們項(xiàng)目中所放的位置）
watch : true,
autoFocus : false,
emoji : true,
saveHTMLToTextarea : true,
imageUpload : true,
imageFormats : ["jpg", "jpeg", "png", "bmp", "webp"],
imageUploadURL : "./api/upload_api.php",//注意你后端的上傳圖片服務(wù)地址
// editorTheme: "pastel-on-dark",
// theme: "gray",
// previewTheme: "dark",
tex: true,
toolbarIcons : function() { //自定義工具欄，后面有詳細(xì)介紹
return editormd.toolbarModes['full']; // full, simple, mini
},
});
</script>
------------------------------json返回的格式
if($file) {
$data = [
'success' => 1, // 0 表示上傳失敗语御，1 表示上傳成功
'message' => "上傳成功",
'url' => $url // 上傳成功時(shí)才返回
];
echo json_encode($data,JSON_UNESCAPED_UNICODE);
die;
} else {
$data = [
'success' => 0, // 0 表示上傳失敗爷光，1 表示上傳成功
'message' => "上傳失敗",
];
echo json_encode($data,JSON_UNESCAPED_UNICODE);
die;
}
關(guān)于表情 圖片不顯示的問題
-先下載emoji表情包 放在 editor.md-master/plugins/emoji-dialog
- 修改editormd.js文件 改成http路徑 要么不顯示
editormd.emoji = {
path : "http://localhost/6-26gongxiang/emoji/",
ext : ".png"
};
HTML 顯示
引入
<link rel="stylesheet" href="./lib/editor.md-master/css/editormd.css" />
<script src="./lib/editor.md-master/lib/flowchart.min.js"></script>
<script src="./lib/editor.md-master/lib/jquery.flowchart.min.js"></script>
<script src="./lib/editor.md-master/lib/marked.min.js"></script>
<script src="./lib/editor.md-master/lib/prettify.min.js"></script>
<script src="./lib/editor.md-master/lib/raphael.min.js"></
<script src="./lib/editor.md-master/lib/underscore.min.js"></script>
<script src="./lib/editor.md-master/editormd.min.js"></script>
<!-- ---------------注意這個(gè)坑 寫在上面就報(bào)錯(cuò)-------------- -->
<script src="./lib/editor.md-master/lib/sequence-diagram.min.js"></script>
HTML
<div id="doc-content">
<textarea style="display:none;">
<?= $res_content[0]['content'] ?> <!--${content/}為獲取后臺的md格式內(nèi)容垫竞。-->
</textarea>
</div>
<script>
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>
添加目錄TOC
<div class="markdown-body editormd-preview-container" id="custom-toc-container" previewcontainer="false">
</div>
<script>
testEditor.config({
tocContainer : "#custom-toc-container",
tocDropdown : true,
tocTitle : "目錄 Table of Contents dsfsadfsfdsdf",
});
</script>
