当前位置：首页 > news >正文

济宁网站建设500元seo视频教程我要自学网

news 2025/8/23 7:31:29

济宁网站建设500元,seo视频教程我要自学网,好的网站建设,标准网站建设的价格目录1. 资源下载2. 生成页面2.1 编辑和预览页面2.2 文本渲染页面3. 图片上传3.1 前端配置3.2 后端接口4. 图片粘贴[^2]1. 资源下载官网下载 gitee 下载 2. 生成页面 2.1 编辑和预览页面将资源（精简后 Editor.md 资源1）导入项目： 按照官…

1. 资源下载

官网下载
gitee 下载

2. 生成页面

2.1 编辑和预览页面

将资源（精简后 Editor.md 资源¹）导入项目：

在这里插入图片描述
按照官方教程生成初始页面，本人SSM项目的JSP页面代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head><title>Title</title><link rel="stylesheet" href="/editormd/css/editormd.css"><script src="/js/jquery-3.6.0.min.js"></script><script src="/editormd/editormd.js"></script>
</head>
<body>
<div id="editor"><textarea style="display:none;">### Hello Editor.md !</textarea>
</div>
<script>$(function() {var editor = editormd("editor", {path: "/editormd/lib/"});});
</script>
</body>
</html>

运行结果：
在这里插入图片描述
JS 中的属性和值可参考资源下的README.md文件。

2.2 文本渲染页面

代码（JSP 页面）如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head><title>Title</title><link rel="stylesheet" href="/editormd/css/editormd.preview.css" /><script src="/js/jquery-3.6.0.min.js"></script><script src="/editormd/editormd.js"></script><script src="/editormd/lib/marked.min.js"></script><script src="/editormd/lib/prettify.min.js"></script>
</head>
<body>
<div id="test-markdown-view"><!-- Server-side output Markdown text --><textarea style="display:none;">### Hello world!</textarea>
</div>
</body>
<script>$(function() {var testView = editormd.markdownToHTML("test-markdown-view", {// markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown texthtmlDecode : "style,script,iframe"  // Note: If enabled, you should filter some dangerous HTML tags for website security.});});
</script>
</html>

运行结果：
在这里插入图片描述

注：

为了解析的正确性，两个 textarea 标签之间不能空行。
出于安全考虑，关闭对 HTML 标签的解析（默认关闭），也可过滤一些不安全的标签而解析其他安全的标签，例如htmlDecode : "style,script,iframe"即表示过滤style,script,iframe相关的标签。详情可见 Editor.md 资源下的examples/html-tags-decode.html文件。

3. 图片上传

3.1 前端配置

官网教程

在这里插入图片描述
JS 配置：

{imageUpload    : true,imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],imageUploadURL : "后端接口",
}

前端需要后端返回的数据格式：

{success : 0 | 1,           // 0 表示上传失败，1 表示上传成功message : "提示的信息，上传成功或上传失败及错误信息等。",url     : "图片地址"        // 上传成功时才返回
}

3.2 后端接口

前端以editormd-image-file参数向后端传递图片数据，后端接口代码：

/*** 处理 editor.md 编辑器的图片上传和图片粘贴的功能。required = true 表示该参数必须有值，否则会抛出异常，* value 表示请求中传入参数的名称，如果不设置 value 值，则默认为形参名。* @param file 前端上传的图片文件* @return 指定格式的 JSON 数据* @throws Exception*/
@RequestMapping("/manage_pic")
@ResponseBody
public JSONObject editormdPic(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws Exception {//------------------------------------生成项目名（包含路径）---------------------------------String trueFileName = file.getOriginalFilename();//截取尾缀String suffix = trueFileName.substring(trueFileName.lastIndexOf("."));Date date = new Date();SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");String datestr = simpleDateFormat.format(date);String fileName = datestr + "_" + UUID.randomUUID() + suffix;/** request.getSession().getServletContext().getRealPath()获取的是当前项目的路径，所以代码返回的是项目在容器中的实际发布运行的根路径 */String path = request.getSession().getServletContext().getRealPath("/images/");File targetFile = new File(path, fileName);if (!targetFile.exists()) {targetFile.mkdirs();}//-------------------------------------保存图片----------------------------------------try {file.transferTo(targetFile);} catch (Exception e) {e.printStackTrace();}//----------------------------------返回前端指定的 JSON 格式的数据------------------------JSONObject res = new JSONObject();res.put("url", "images/" + fileName);res.put("success", 1);res.put("message", "upload success!");return res;
}

4. 图片粘贴²

实现图片的粘贴功能须在前端 JS 中的 editor 配置中配置如下参数：

onload: function () {initPasteDragImg(this); 
}

然后在页面中引入copyimg.js文件即可，copyimg.js文件代码如下：

function initPasteDragImg(Editor){var doc = document.getElementById(Editor.id)doc.addEventListener('paste', function (event) {var items = (event.clipboardData || window.clipboardData).items;var file = null;if (items && items.length) {// 搜索剪切板itemsfor (var i = 0; i < items.length; i++) {if (items[i].type.indexOf('image') !== -1) {file = items[i].getAsFile();break;}}} else {console.log("当前浏览器不支持");return;}if (!file) {console.log("粘贴内容非图片");return;}uploadImg(file,Editor);});var dashboard = document.getElementById(Editor.id)dashboard.addEventListener("dragover", function (e) {e.preventDefault()e.stopPropagation()})dashboard.addEventListener("dragenter", function (e) {e.preventDefault()e.stopPropagation()})dashboard.addEventListener("drop", function (e) {e.preventDefault()e.stopPropagation()var files = this.files || e.dataTransfer.files;uploadImg(files[0],Editor);})
}
function uploadImg(file,Editor){var formData = new FormData();var fileName=new Date().getTime()+"."+file.name.split(".").pop();formData.append('editormd-image-file', file, fileName);$.ajax({url: Editor.settings.imageUploadURL,type: 'post',data: formData,processData: false,contentType: false,dataType: 'json',success: function (msg) {var success=msg['success'];if(success==1){var url=msg["url"];if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){Editor.insertValue("![图片alt]("+msg["url"]+")");}else{Editor.insertValue("[下载附件]("+msg["url"]+")");}}else{console.log(msg);alert("上传失败");}}});
}