1. 下载editor.md的插件文件
请到我上传的下载资源中，下载 “editormd资源”进行下载
https://download.csdn.net/download/x286129277/10913447
2. 在需要加载插件的界面中，导入相关JS+CSS依赖
<link rel="stylesheet" href="plugins/editormd/css/editormd.css"/>
<!-- ace scripts -->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<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、后台返回到前端的结果集的格式
resultMap.put("success", 1);//返回是否成功
resultMap.put("message", "上传成功");//返回结果消息
resultMap.put("url", rootUrl);//前端用于显示上传成功的图片URL
5. 示例运行的最终效果
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
