-
先去官网下载editor.md的资源文件：
eidtor.md官网
-
将下载好的editormd文件夹重命名为editormd，并放在网站的根目录下面，然后新建markdown.html文件，用作显示。
-
在markdown.html中输入以下内容用做显示编辑器，注意资源引用的路径哦，参考我的项目结构中引用的具体资源，再根据你项目结构，自行调整
<!DOCTYPE html>
<html lang="zh">
<meta charset="utf-8" />
<title>Full example - Editor.md examples</title>
<link rel="stylesheet" href="../editormd/examples/css/style.css" />
<link rel="stylesheet" href="../editormd/css/editormd.min.css" />
<!--地址栏图标-->
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head>
<div id="editor">
<!-- Tips: Editor.md can auto append a `<textarea>` tag -->
<textarea style=";">### Hello Editor.md !</textarea>
<script src="../editormd/examples/js/jquery.min.js"></script>
<script src="../editormd/editormd.min.js"></script>
<script type="text/javascript">
$(function() {
var editor = editormd("editor", {
width: "90%",
height: 800,
path : '../editormd/lib/',
theme : "light",
previewTheme : "light",
editorTheme : "pastel-on-light",
// markdown : md,
codeFold : true,
//syncScrolling : false,
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
searchReplace : true,
//watch : false, // 关闭实时预览
htmlDecode : "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启
//toolbar : false, //关闭工具栏
//previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
emoji : true,
taskList : true,
tocm : true, // Using [TOCM]
tex : true, // 开启科学公式TeX语言支持，默认关闭
flowChart : true, // 开启流程图支持，默认关闭
sequenceDiagram : true, // 开启时序/序列图支持，默认关闭,
//dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true
//dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
//dialogDraggable : false, // 设置弹出层对话框不可拖动，全局通用，默认为true
//dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1
//dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "http://xx.xx.xx.xx:8080/API/wiki/beauty/uploadFile",
onload : function() {
console.log('onload', this);
//this.fullscreen();
//this.unwatch();
//this.watch().fullscreen();
//this.setMarkdown("
//this.width("100%");
//this.height(480);
//this.resize("100%", 640);
</script>
</body>
</html>
- 这样就可以在页面中显示出编辑框啦
图片上传里面很多坑，用官方的方法，试了很多次，都失败了，图片回显url为空，提示SecurityError: Blocked a frame with origin "http://localhost:63343" from acc...之类的错误，以为是跨域上传图片的问题，后来发现还是不行，最后请教了别人，别用官方的方法了，自己写上传函数，终于把这个东西给解决了，亲测可用！亲测可用！亲测可用！
- 我们只修改了一个文件，就是
editormd/plugins/image-dialog/image-dialog.js这个文件（具体在哪，参考我的项目结构）。 - 我将修改完后的文件代码贴在下面，大家直接复制黏贴覆盖就好啦，核心点就是我们采用ajax方法直接上传，然后获取返回值，进行赋值。
- 后端采用的是spring boot，有疑问的话评论区回复
- 文末有福利哦
* Image (upload) dialog plugin for Editor.md
* @file image-dialog.js
* @author pandao
* @version 1.3.4
* @updateTime 2015-06-09
* {@link https://github.com/pandao/editor.md}
* @license MIT
(function() {
var factory = function (exports) {
var pluginName = "image-dialog";
exports.fn.imageDialog = function() {
var _this = this;
var cm = this.cm;
var lang = this.lang;
var editor = this.editor;
var settings = this.settings;
var cursor = cm.getCursor();
var selection = cm.getSelection();
var imageLang = lang.dialog.image;
var classPrefix = this.classPrefix;
var iframeName = classPrefix + "image-iframe";
var dialogName = classPrefix + pluginName, dialog;
cm.focus();
var loading = function(show) {
var _loading = dialog.find("." + classPrefix + "dialog-mask");
_loading[(show) ? "show" : "hide"]();
if (editor.find("." + dialogName).length < 1)
var guid = (new Date).getTime();
var action = settings.imageUploadURL + (settings.imageUploadURL.indexOf("?") >= 0 ? "&" : "?") + "guid=" + guid;
if (settings.crossDomainUpload)
action += "&callback=" + settings.uploadCallbackURL + "&dialog_id=editormd-image-dialog-" + guid;
var dialogContent = ( (settings.imageUpload) ? "<form action=\"#\" target=\"" + iframeName + "\" method=\"post\" enctype=\"multipart/form-data\" class=\"" + classPrefix + "form\">" : "<div class=\"" + classPrefix + "form\">" ) +
( (settings.imageUpload) ? "<iframe name=\"" + iframeName + "\" id=\"" + iframeName + "\" guid=\"" + guid + "\"></iframe>" : "" ) +
"<label>" + imageLang.url + "</label>" +
"<input type=\"text\" data-url />" + (function(){
return (settings.imageUpload) ? "<div class=\"" + classPrefix + "file-input\">" +
"<input type=\"file\" name=\"" + classPrefix + "image-file\" id=\"" + classPrefix + "image-file\" accept=\"image/*\" />" +
"<input type=\"submit\" value=\"" + imageLang.uploadButton + "\" />" +
"</div>" : "";
})() +
"<br/>" +
"<label>" + imageLang.alt + "</label>" +
"<input type=\"text\" value=\"" + selection + "\" data-alt />" +
"<br/>" +
"<label>" + imageLang.link + "</label>" +
"<input type=\"text\" value=\"http://\" data-link />" +
"<br/>" +
( (settings.imageUpload) ? "</form>" : "</div>");
dialog = this.createDialog({
title : imageLang.title,
width : (settings.imageUpload) ? 465 : 380,
height : 254,
name : dialogName,
content : dialogContent,
mask : settings.dialogShowMask,
drag : settings.dialogDraggable,
lockScreen : settings.dialogLockScreen,
maskStyle : {
opacity : settings.dialogMaskOpacity,
backgroundColor : settings.dialogMaskBgColor
buttons : {
enter : [lang.buttons.enter, function() {
var url = this.find("[data-url]").val();
var alt = this.find("[data-alt]").val();
var link = this.find("[data-link]").val();
if (url === "")
alert(imageLang.imageURLEmpty);
return false;
var altAttr = (alt !== "") ? " \"" + alt + "\"" : "";
if (link === "" || link === "http://")
cm.replaceSelection("![" + alt + "](" + url + altAttr + ")");
cm.replaceSelection("[![" + alt + "](" + url + altAttr + ")](" + link + altAttr + ")");
if (alt === "") {
cm.setCursor(cursor.line, cursor.ch + 2);
this.hide().lockScreen(false).hideMask();
this.remove();
return false;
}],
cancel : [lang.buttons.cancel, function() {
this.hide().lockScreen(false).hideMask();
this.remove();
return false;
});
dialog.attr("id", classPrefix + "image-dialog-" + guid);
if (!settings.imageUpload) {
return ;
var fileInput = dialog.find("[name=\"" + classPrefix + "image-file\"]");
fileInput.bind("change", function() {
var fileName = fileInput.val();
var isImage = new RegExp("(\\.(" + settings.imageFormats.join("|") + "))$", "i");
if (fileName === "")
alert(imageLang.uploadFileEmpty);
return false;
if (!isImage.test(fileName))
alert(imageLang.formatNotAllowed + settings.imageFormats.join(", "));
return false;
loading(true);
var submitHandler = function() {
var uploadIframe = document.getElementById(iframeName);
uploadIframe.onload = function() {
loading(false);
var formData = new FormData();
formData.append("editormd-image-file",$("#editormd-image-file")[0].files[0]);
var action = settings.imageUploadURL + (settings.imageUploadURL.indexOf("?") >= 0 ? "&" : "?") + "guid=" + guid;
$.ajax({
type:"post",
url:action,
data:formData,
dataType:"json",
async:false,
processData : false,
contentType : false,
success:function(data){
console.log(data);
if(data.success == 1){
console.log(data.message);
dialog.find("[data-url]").val(data.url);
}else{
alert(data.message);
});
return false;
dialog.find("[type=\"submit\"]").bind("click", submitHandler).trigger("click");
});
dialog = editor.find("." + dialogName);
dialog.find("[type=\"text\"]").val("");
dialog.find("[type=\"file\"]").val("");
dialog.find("[data-link]").val("http://");
this.dialogShowMask(dialog);
this.dialogLockScreen();
dialog.show();
if (typeof require === "function" && typeof exports === "object" && typeof module === "object")
module.exports = factory;
else if (typeof define === "function")
if (define.amd) {
define(["editormd"], function(editormd) {
factory(editormd);
});
} else {
define(function(require) {
var editormd = require("./../../editormd");
factory(editormd);
});
factory(window.editormd);
})();
springboot项目中引入editor并且解决上传图片的问题
一、页面中使用editor
①下载editor:https://pandao.github.io/editor.md/
②将下载的editor文件导入到项目之中
③在需要使用editor的页面中引入editormd.css文件，editormd.js文件以为editor还需要jquery的依赖，所以还需要额外引入jquery的依赖
<link rel="stylesheet" href="/static/editor.md/css/e
这里，我把 plugins 文件夹单独拎出来了。根据需要调整文件位置，只要 js css 文件在浏览器链接中可以访问到就行。
在 IDEA 中右键 editormd、plugins 两个文件夹 ，Marked directory as Exclusion，这样两个文件夹下的文件就可以在浏览器访问了。
三、thymeleaf 页面引用
test.htm
点击下载案例代码editor.md网站地址http://pandao.github.io/editor.md/首先需要引入对应的css跟js文件，jquery一定要在前面引入，大家可以去官网下载editor.md,也可以点击我上面的案例代码下载图片上传分为 同域上传 跟 跨域上传，
1，同域上传简单理解就是编辑器页面跟图片上传的请求后台是同一域名内。
2，跨域上传则相反，比如你编辑器页面请求是aaa
文章目录Spring Boot - 使用 Editor.md 图片上传出现的问题问题及解决思路参考
Spring Boot - 使用 Editor.md 图片上传出现的问题
Spring Boot 2.2.4.RELEASE
问题及解决思路
须知：项目是前后端分离，涉及跨域。
测试使用的是 Editor.md 提供的示例“image-upload.html”，该文件位于 examples 文件夹。...
Editor.md图片上传获取不到图片地址，Editor.md图片上传ifream
最近项目中要支持markdown 编辑器，现在基本做技术的没有不知道Markdown 的，因为实在是太强大了，只需要了解很简单的几个操作，即可编辑非常优美的文章，包括TeX科学公式（基于KaTeX）、流程图 Flowchart 和 时序图 ，不在让你浪费时间在格式的调整。
是在PC端使用，直接引入JQuery和Markdown.md插件进行使用
Editor.md
editor.md的github
editor
<meta charset="utf-8" />
<title>Simple example - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link r
最近搭建个人博客需要用到markdown编辑器，editorMd应该算是目前比较主流也比较好用的了，简单记录一下使用方法，直接上代码。
HTML:
(使用了semantic ui框架，其实只要有一个带id的div包裹一个textarea就可以使用了)
<div class="required field">
<div id="mdContent" style="z-index: 1 !important;">
<textarea th:text="*{conten
左侧为markdown语法内容，右侧显示出具体展示。
获取编辑的html的方法是 getMarkdown() 和 getHTML()，作者的文档里也提供了markdown语法内容直接显示出来的例子：
<div ...
editormd.markdownToHTML
来讲markdown解析成html。参考：https://blog.csdn.net/u012848709/article/details/80625375
我之前用一个iframe来显示，每次点击左侧菜单会刷新iframe部分来显示内容，但是iframe的高度没办法自适应，计算文本高...
wangEditor --基于js和css开发，简单易用容易开发。官网地址
TinyMCE --TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。官网教程内容比较丰富，插件支持也比较多，但是不支持markdown。
editor.nd 功能齐全，支持markdown编辑，...
首先需要导入一些相应的css与js
<link rel="stylesheet" href="/editor.md/css/editormd.css" />
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="/editor.md/editormd.js"></script>
<script type="text/ja
点亮效果大家可以看一下上一篇推送，我们直接开始说教程。第一步：制作黑白图片如果你擅长使用图片制作工具，比如PS，可以自行选择使用。如果不会使用图片制作工具也没关系，小编在这里推荐一个平台也可以轻松制作。1.打开电脑浏览器访问www.jianpanmiao.com，注册登录。2.点击“多图上传”按钮，上传一张彩色图片。3. “点击选择本地图片” 按钮然后点击确认。4.点击上传之后的图片，在...
我的博客系统很早就引入了editormd，但是在昨天用高亮插件的时候不小心删除了一点代码，导致我文章凡是md类型的全部都不显示了。生气啊，又想不起来昨天到底改了什么。想不起来就只有百度了吧。最后几经波折终于解决了。原因是这样的，我的js全部都引用了，但是我却吧实例化的代码给删除了。引用的js如下``````再页面还需要实例化一下```//markdown 转换 js代码$(function () ...
② 文本中的图片居中显示&默认大小限制
③ 上传图片保存路径和base64图片转码问题
④ 编辑器默认文字"Enjoy Markdown! coding now..."的修改
⑤ 编辑器主题的切换
⑥ 提交文本报错"Data truncation: Data too long for column 'xxxx' at row...
