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

Editor.md 的使用方法及图片处理

news 2026/3/29 13:50:45

目录

  • 1. 资源下载
  • 2. 生成页面
    • 2.1 编辑和预览页面
    • 2.2 文本渲染页面
  • 3. 图片上传
    • 3.1 前端配置
    • 3.2 后端接口
  • 4. 图片粘贴[^2]

1. 资源下载

  1. 官网下载
    在这里插入图片描述
  2. gitee 下载
    在这里插入图片描述

2. 生成页面

2.1 编辑和预览页面

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

在这里插入图片描述
按照官方教程生成初始页面，本人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. 图片粘贴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 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("上传失败");}}});
}

结果演示：
在这里插入图片描述

  1. 出于项目需要，在去除多余文件后 Editor.md 的一些渲染样式也被我修改，资源下载 ↩︎

  2. 参考链接 ↩︎

相关文章：

Editor.md 的使用方法及图片处理

目录1. 资源下载2. 生成页面2.1 编辑和预览页面2.2 文本渲染页面3. 图片上传3.1 前端配置3.2 后端接口4. 图片粘贴[^2]1. 资源下载 官网下载 gitee 下载 2. 生成页面 2.1 编辑和预览页面 将资源&#xff08;精简后 Editor.md 资源1&#xff09;导入项目&#xff1a; 按照官…...

编程日记 2023/5/23 23:10:32

剑指 Offer II 018. 有效的回文

题目链接 剑指 Offer II 018. 有效的回文 easy 题目描述 给定一个字符串 s&#xff0c;验证 s是否是 回文串 &#xff0c;只考虑字母和数字字符&#xff0c;可以忽略字母的大小写。 本题中&#xff0c;将空字符串定义为有效的 回文串 。 示例 1: 输入: s “A man, a plan, …...

编程日记 2023/5/23 23:10:17

Elasticsearch分析器（Analyzer）

Elasticsearch分析器&#xff08;Analyzer&#xff09; 文章目录Elasticsearch分析器&#xff08;Analyzer&#xff09;分析器概念内置分析器&#xff08;8.6版本&#xff09;自定义分析器elasticsearch-analysis-ik&#xff08;简称ik&#xff0c;&#x1f495;14.8k&#xff…...

编程日记 2023/5/23 23:09:54

P6入门：了解P6 Professional 工具栏及地图分享

目录 引言 相关分享 引言 凭借更大的灵活性和增强的自定义功能&#xff0c;最新版本的 Oracle Primavera P6 Professional 的界面比早期版本有了巨大改进。对于有经验的伙伴来说&#xff0c;它仍然是熟悉的领域&#xff0c;几乎所有预期的功能都显示在前面。该界面可以更好地…...

编程日记 2023/5/23 23:09:43

习题30 if elif else 语句

people 30#变量people赋值30 cars 40#变量cars赋值40 buses 15#变量buses赋值 if cars > people:#如果出租车比人多print("We should take the cars")#我们坐出租车 elif cars < people:#elif后面必须跟条件&#xff0c;print("We should not take the…...

编程日记 2023/5/23 23:09:26

32 openEuler使用LVM管理硬盘-管理卷组

文章目录32 openEuler使用LVM管理硬盘-管理卷组32.1 创建卷组32.2 查看卷组32.3 修改卷组属性32.4 扩展卷组32.5 收缩卷组32.6 删除卷组32 openEuler使用LVM管理硬盘-管理卷组 32.1 创建卷组 可在root权限下通过vgcreate命令创建卷组。 vgcreate [option] vgname pvname ...…...

编程日记 2023/5/24 3:17:21

Jackson CVE-2017-17485 反序列化漏洞

0x00 前言 同CVE-2017-15095一样&#xff0c;是CVE-2017-7525黑名单绕过的漏洞&#xff0c;主要还是看一下绕过的调用链利用方式。 可以先看&#xff1a; Jackson 反序列化漏洞原理 或者直接看总结也可以&#xff1a; Jackson总结 涉及版本&#xff1a;2.8.10和2.9.x至2.…...

编程日记 2023/5/23 18:27:49

十大排序（C++版）

测试排序的题目&#xff1a; 912. 排序数组 - 力扣&#xff08;LeetCode&#xff09; 堕落的做法&#xff1a; class Solution { public:vector<int> sortArray(vector<int>& nums) {sort(nums.begin(),nums.end());return nums;} };视频推荐&#xff1a; …...

编程日记 2023/5/24 3:17:18

SpringMVC中的常用注解

Java知识点总结&#xff1a;想看的可以从这里进入 目录3.2、常用的注解3.2、常用的注解 Controller&#xff1a;代表此类是一个控制器&#xff0c;需要配置包的扫描。Spring MVC 是通过组件扫描机制查找应用中的控制器类的 在Spring6.0之后要求控制层必须添加该注解才会被识别成…...

编程日记 2023/5/23 23:09:13

English Learning - L2-3 英音地道语音语调 小元音 [ʌ] [ɒ] [ʊ] [ɪ] [ə] [e] 2023.02.27 周一

English Learning - L2-3 英音地道语音语调 小元音 [ʌ] [ɒ] [ʊ] [ɪ] [ə] [e] 2023.02.27 周一课前活动练习方法大小元音总结小元音准备工作[ʌ] 中元音发音技巧对应单词的发音对应句子的发音常见的字母组合[ɒ] 后元音发音技巧对应单词的发音对应句子的发音常见的字母组合…...

编程日记 2023/5/23 23:08:53

fastadmin后台登录页修改

直接替换就行 <!DOCTYPE html> <html lang"{$config.language}"> <head>{include file"common/meta" /}<style type"text/css">body {color: #999;background-color: #f1f4fd;background-size: cover;}a {color: #444;…...

编程日记 2023/5/23 23:08:41

Java 面向对象（OOP）的三大特性

封装 所谓封装&#xff0c;意思就是隐藏内部细节&#xff0c;在编程中&#xff0c;指利用抽象数据类型将数据和基于数据的操作封装在一起&#xff0c;使其构成一个不可分割的独立实体&#xff0c;并尽可能地隐藏内部的细节&#xff0c;只保留一些对外接口使之与外部发生联系。…...

编程日记 2023/5/23 8:00:30

Java：openjdk: error: Student is abstract； cannot be instantiated；java编译环境

文章目录编译环境jdkopenjdk错误代码小心javac -verbos编译环境 jdk 需要安装的javac 在java-devel 包里 [root10 ~]# rpm -qf /usr/bin/javac file /usr/bin/javac is not owned by any package [root10 ~]# ll /usr/bin/javac lrwxrwxrwx. 1 root root 23 Jun 15 09:52 /us…...

编程日记 2023/5/23 23:08:26

28个案例问题分析---019---临时解决方案和最终解决方案--思想

临时解决方案与最终解决方案一&#xff1a;背景介绍二&#xff1a;临时解决方案&#xff1f;最终解决方案&#xff1f;概念如何选择三&#xff1a;总结一&#xff1a;背景介绍 项目中&#xff0c;出现了一个线上问题。 用户登陆之后看不到课程。重新登陆就可以看到课程。出现这…...

编程日记 2023/5/23 23:08:11

计算机网络的166个概念你知道几个 第四部分

HTML&#xff1a;HTML 称为超文本标记语言&#xff0c;是一种标识性的语言。它包括一系列标签&#xff0e;通过这些标签可以将网络上的文档格式统一&#xff0c;使分散的 Internet 资源连接为一个逻辑整体。HTML 文本是由 HTML 命令组成的描述性文本&#xff0c;HTML 命令可以说…...

编程日记 2023/5/23 23:07:55

Lenovo 联想-IdeaPad-Y530电脑 Hackintosh 黑苹果efi引导文件

原文来源于黑果魏叔官网&#xff0c;转载需注明出处。硬件型号驱动情况主板联想-IdeaPad-Y530处理器Intel 酷睿2双核 T9400已驱动内存2GB已驱动硬盘2TB HP EX950 PCI-E Gen3 x4 NVMe SSD已驱动显卡NVIDIA GeForce 9300M GS无法驱动声卡Realtek ALC888无法驱动网卡RTL8168H Giga…...

编程日记 2023/5/23 23:07:39

mac M1 nvm安装教程，避坑

mac M1 nvm 安装问题 新款的mac搭载了苹果自研的芯片&#xff0c;放弃了intel的x86芯片&#xff0c;那之前的软件难免会存在兼容性问题。 鄙人有幸踩了第一个坑。 在通过nvm 安装不同版本的node 时&#xff0c;出现了问题。 问题一&#xff1a;先说一下 nvm的安装问题&#…...

编程日记 2023/5/23 23:07:23

【项目精选】基于网络爬虫技术的网络新闻分析（视频+论文+源码）

点击下载源码 基于网络爬虫技术的网络新闻分析主要用于网络数据爬取。本系统结构如下&#xff1a; &#xff08;1&#xff09;网络爬虫模块。 &#xff08;2&#xff09;中文分词模块。 &#xff08;3&#xff09;中3文相似度判定模块。 &#xff08;4&#xff09;数据结构化存…...

编程日记 2023/5/23 23:06:08

【Python - Matplotlib】P2 plot 折线图

Matplotlib绘制折线图折线图完整代码与效果基础折线图设定横纵坐标设置中文显示添加网格添加描述信息再添加一个城市设置两个折线图前言 上一节内容主要围绕介绍 Matplotlib 的画板结构。 链接&#xff1a;https://blog.csdn.net/weixin_43098506/article/details/129331576 本…...

编程日记 2023/5/23 23:05:53

【Verilog】——模块，常量，变量

目录 1.模块 1.描述电路的逻辑功能 2. 门级描述 3.模块的模板​编辑 2.关键字 3.标识符 4.Verilog源代码的编写标准 5.数据类型 1.整数常量​ 2.参数传递的两种方法 3.变量 4.reg和wire的区别 5.沿触发和电平触发的区别​ 6.memory型变脸和reg型变量的区别​ 1.模块 1.描…...

编程日记 2023/5/23 23:05:39

UniHacker技术探索：Unity引擎全功能体验与开源研究指南

UniHacker技术探索&#xff1a;Unity引擎全功能体验与开源研究指南 【免费下载链接】UniHacker 为Windows、MacOS、Linux和Docker修补所有版本的Unity3D和UnityHub 项目地址: https://gitcode.com/GitHub_Trending/un/UniHacker 一、核心价值解析&#xff1a;技术研究视…...

编程新知 2026/3/29 12:52:17

AMD平台黑苹果智能配置引擎：从技术困境到自动化解决方案的完整指南

AMD平台黑苹果智能配置引擎&#xff1a;从技术困境到自动化解决方案的完整指南 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 在传统黑苹果配置领域&…...

编程新知 2026/3/29 12:48:16

告别字符串截取！用正则表达式re模块精准提取HTML表格数据的避坑指南

告别字符串截取&#xff01;用正则表达式re模块精准提取HTML表格数据的避坑指南 在数据抓取的世界里&#xff0c;HTML解析就像一场永无止境的猫鼠游戏。每当开发者费尽心思用字符串截取搞定一个网站&#xff0c;前端工程师稍微调整下标签结构&#xff0c;整个爬虫就崩溃了。这种…...

编程新知 2026/3/29 12:18:08

DS1202示波器功能详解与实战操作指南

1. DS1202示波器核心功能解析 第一次拿到DS1202示波器时&#xff0c;面对密密麻麻的按键和接口确实有点懵。但用久了就会发现&#xff0c;它的设计其实非常人性化。咱们先从最常用的垂直控制区说起——这是调节波形高低胖瘦的关键区域。 垂直位移按键就像给波形装了个电梯&…...

编程新知 2026/3/29 11:29:19

51单片机红外避障循迹小车实战：从接线到代码调试全流程（附避坑指南）

51单片机红外避障循迹小车实战&#xff1a;从硬件搭建到算法优化全解析 在电子制作领域&#xff0c;红外避障循迹小车堪称"入门必修课"。这个看似简单的项目&#xff0c;实则融合了传感器技术、电机控制、逻辑编程等多个核心知识点。不同于市面上大多数教程只停留在基…...

编程新知 2026/3/29 10:49:03

高数 | 【极限运算陷阱】破解未定式与直接代入的边界条件

1. 极限运算中的未定式&#xff1a;为什么不能直接代入&#xff1f; 第一次接触极限运算时&#xff0c;很多同学都会犯一个典型错误——看到x趋近于某个值&#xff0c;就直接把这个值代入函数计算。我当年学高数时也踩过这个坑&#xff0c;直到作业本上连续出现三个大红叉才意识…...

编程新知 2026/3/29 10:12:19

阿摩罗识CLAUDE.md内容的一些实践总结

环境安装 pip install keystone-engine capstone unicorn 这3个工具用法极其简单&#xff0c;下面通过示例来演示其用法。 Keystone 示例 from keystone import * CODE b"INC ECX; ADD EDX, ECX" try:ks Ks(KS_ARCH_X86, KS_MODE_64)encoding, count ks.asm(CODE)…...

编程新知 2026/3/29 9:44:10

translategemma-12b-it部署案例：基于Ollama的轻量级多模态翻译服务搭建

translategemma-12b-it部署案例&#xff1a;基于Ollama的轻量级多模态翻译服务搭建 想象一下&#xff0c;你正在处理一份满是英文的产品说明书&#xff0c;或者收到了一张包含外文菜单的图片。传统方法可能需要你手动打字、复制粘贴&#xff0c;或者使用多个工具来回切换。现在…...

编程新知 2026/3/29 9:08:00

革新性B站用户分析工具：智能解析评论区用户背景的终极方案

革新性B站用户分析工具&#xff1a;智能解析评论区用户背景的终极方案 【免费下载链接】bilibili-comment-checker B站评论区自动标注成分&#xff0c;支持动态和关注识别以及手动输入 UID 识别 项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-comment-checker …...

编程新知 2026/3/29 8:57:59

StructBERT中文相似度模型GPU算力适配：显存占用峰值218MB，预留缓冲空间充足

StructBERT中文相似度模型GPU算力适配&#xff1a;显存占用峰值218MB&#xff0c;预留缓冲空间充足 1. 项目概述 StructBERT中文相似度计算工具是一个基于百度先进大模型技术的高精度语义匹配系统。这个工具能够智能分析两个中文句子之间的语义相似程度&#xff0c;为各类文本…...

编程新知 2026/3/29 8:03:35