如何开网站,上海市网,建e网手机版,好模版网站目录1. 资源下载2. 生成页面2.1 编辑和预览页面2.2 文本渲染页面3. 图片上传3.1 前端配置3.2 后端接口4. 图片粘贴[^2]1. 资源下载
官网下载 gitee 下载
2. 生成页面
2.1 编辑和预览页面
将资源#xff08;精简后 Editor.md 资源1#xff09;导入项目#xff1a; 按照官…
目录1. 资源下载2. 生成页面2.1 编辑和预览页面2.2 文本渲染页面3. 图片上传3.1 前端配置3.2 后端接口4. 图片粘贴[^2]1. 资源下载
官网下载 gitee 下载
2. 生成页面
2.1 编辑和预览页面
将资源精简后 Editor.md 资源1导入项目 按照官方教程生成初始页面本人SSM项目的JSP页面代码如下
% page contentTypetext/html;charsetUTF-8 languagejava %
!DOCTYPE html
html
headtitleTitle/titlelink relstylesheet href/editormd/css/editormd.cssscript src/js/jquery-3.6.0.min.js/scriptscript src/editormd/editormd.js/script
/head
body
div ideditortextarea styledisplay: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 contentTypetext/html;charsetUTF-8 languagejava %
!DOCTYPE html
html
headtitleTitle/titlelink relstylesheet href/editormd/css/editormd.preview.css /script src/js/jquery-3.6.0.min.js/scriptscript src/editormd/editormd.js/scriptscript src/editormd/lib/marked.min.js/scriptscript src/editormd/lib/prettify.min.js/script
/head
body
div idtest-markdown-view!-- Server-side output Markdown text --textarea styledisplay: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. 图片粘贴2
实现图片的粘贴功能须在前端 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 fileNamenew 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 successmsg[success];if(success1){var urlmsg[url];if(/\.(png|jpg|jpeg|gif|bmp|ico)$/.test(url)){Editor.insertValue();}else{Editor.insertValue([下载附件](msg[url]));}}else{console.log(msg);alert(上传失败);}}});
}结果演示 出于项目需要在去除多余文件后 Editor.md 的一些渲染样式也被我修改资源下载 ↩︎ 参考链接 ↩︎
