1. 下載editor.md的插件文件
請到我上傳的下載資源中，下載 “editormd資源”進行下載
2. 在需要加載插件的界面中，導入相關JS+CSS依賴
<link rel="stylesheet" href="plugins/editormd/css/editormd.css"/>
<script src="plugins/editormd/jquery.min.js"></script>
<script src="plugins/editormd/editormd.min.js"></script>
3. 在界面中，添加如下標籤，用於顯示編輯器位置
<body>
<div id="test-editormd">
<textarea id="content" style="display:none;"></textarea>
</div>
</body>
4. 編寫JS方法，對編輯器進行初始化
var testEditor;
$(function () {
testEditor = editormd("test-editormd", {//加載編輯器外部div的ID值
width: "100%",//設置編輯器的寬度
height: 640,
syncScrolling: "single",
saveHTMLToTextarea: true,//是否以html格式存儲
imageUpload: true,//圖片上傳功能
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL: "/markdown/uploadImage.action",//發起存儲後臺請求
path: "plugins/editormd/lib/",
toolbarIcons: function () {
return ["undo", "redo", "|", "bold", "italic", "quote",
"uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "|",
"link", "image", "code", "code-block", "|", "watch", "preview",
"fullscreen", "clear"]
}
});
});
5. 示例運行的最終效果
