Markdown编辑器editor.md的使⽤
⼀、Markdown和editor.md简介：
Markdown在技术圈⾥（估计更多是程序猿吧）越来越流⾏。简单的语法，统⼀的格式，使⽤过程中，⼿基本上不⽤从键盘上移到⿏标上去，超级⽅便。写好了⼀篇md⽂档(也就是含Markdown语法格式的普通TXT⽂件)，可以随意放到别的⽀持Markdown格式的⽹站上发布。
是国内开源的⼀款在线Markdown编辑器，单纯基于前端JavaScript实现，和后端什么语⾔⽆关。这个还可以画流程图，以及数学公式。官⽹Demo⽰例使⽤的是PHP语⾔，我后端使⽤的是Java，Springmvc。
如下记录我在个⼈开源项⽬中使⽤的⽅法和过程。17Smart源码⽬前托管在上，感兴趣的可以参考了解。
⼆、editor.md的使⽤：
2.1、下载：
我们可以从其中到下载最新版V1.5.0，解压资源包如下图：
&les⽂件中是使⽤PHP做的所有⽰例(可以在⽂档编辑器⾥打开，并查看源代码)；
>2.lib中是editor.md所依赖的第三⽅js资源；
>3.plugins中是如emoji表情⽀持、代码格式化等插件；
2.2、简单使⽤：
将上⾯的解压的editormd资源⽂件拷贝（选取需要的）到我们的项⽬适合⽬录下⾯。
2.2.1、在⾃⼰的页⾯上引⼊相关的css和js，代码如下：
<link rel="stylesheet"href="/smart-api/htdocs/mdeditor/css/editormd.css" />
<script src="/smart-api/htdocs/mdeditor/js/jquery.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/js/editormd.min.js"></script>
2.2.2、在⾃⼰的页⾯中加上DIV：
DIV的id为my-editormd（这个div在form表单中）。DIV中包含⼆个textarea，其实官⽅demo中只有⼀
个，第⼆个是否⽅便我们POST提交时，后端可以获取到md⽂档内容，如java中Parameter("my-editormd-html-code")。
<div id="my-editormd" >
<textarea id="my-editormd-markdown-doc"name="my-editormd-markdown-doc"></textarea>
<!-- 注意：name属性的值-->
<textarea id="my-editormd-html-code"name="my-editormd-html-code"></textarea>
</div>
这⾥值得注意两点：
>1.后端要想获得第⼆个textarea中的值，⾸先需要打开editor.md的saveHTMLToTextarea : true设置（见下⾯）；
&area中name属性值，应该跟着div的ID my-editormd值来定，即$-html-code（刚开始，后端死活获取不到值，翻看了源码才知道）
2.2.3、在同页⾯中再加上如下JS代码：
<script type="text/javascript">
$(function() {
editormd("my-editormd", {//注意1：这⾥的就是上⾯的DIV的id属性值
width : "90%",
height : 640,
syncScrolling : "single",
path : "/smart-api/htdocs/mdeditor/lib/",//注意2：你的路径
saveHTMLToTextarea : true//注意3：这个配置，⽅便post提交表单
});
});
</script>
这⾥值得注意三点：
>1.注意1：这⾥的就是上⾯的DIV的id属性值；
>2.注意2：你的path路径（原资源⽂件中lib包在我们项⽬中所放的位置）；
>3.注意3：saveHTMLToTextarea 设置true或false关乎后端是否可以获取到值；
这样我们就完成了⼀个最简单的editor.md的编辑器了，我们可以在这⾥⾯书写⾃⼰熟悉的Markdown⽂档，包括代码，右侧有实时预览。
2.3、上传图⽚：
上⾯最简单的editor.md的编辑器，⽬前还是不可以上传图⽚的。我们需要略作配置修改，还是很简单的。
我们都知道在编写Markdown⽂档时，图⽚语法是。可是，往往我们需要上传本地图⽚。
在上⾯的基础之上，略做如下修改即可（当然后端的代码得⾃⼰写）：
<script type="text/javascript">
$(function() {
editormd("my-editormd", {//注意1：这⾥的就是上⾯的DIV的id属性值
width : "90%",
height : 640,
syncScrolling : "single",
path : "/smart-api/htdocs/mdeditor/lib/",//注意2：你的路径
saveHTMLToTextarea : true,//注意3：这个配置，⽅便post提交表单
/**上传图⽚相关配置如下*/
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/smart-api/upload/editormdPic/",//注意你后端的上传图⽚服务地址
});
});
</script>
注意：editor.md期望你上传图⽚的服务返回如下json格式的内容
{
success : 0 | 1, //0表⽰上传失败;1表⽰上传成功
message : "提⽰的信息",
url : "图⽚地址" //上传成功时才返回
}
我的后台使⽤的是springmvc，代码如下:
（注意：@RequestParam(value = "editormd-image-file", required = true注解）
@RequestMapping("editormdPic")
@ResponseBody
public JSONObject editormdPic (@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request,HttpServletR String trueFileName = OriginalFilename();
String suffix = trueFileName.substring(trueFileName.lastIndexOf("."));
String fileName = System.currentTimeMillis()+"_"+RandomNumber(100, 999)+suffix;
String path = Session().getServletContext().getRealPath("/assets/msg/upload/");
System.out.println(path);
File targetFile = new File(path, fileName);
if(!ists()){
targetFile.mkdirs();
}
//保存
try {
} catch (Exception e) {
e.printStackTrace();
}
JSONObject res = new JSONObject();
res.put("url", Constant.WEB_ROOT+"assets/msg/upload/"+fileName);
res.put("success", 1);
res.put("message", "upload success!");
return res;
}
2.4、Markdown⽂档页⾯展⽰：
上⾯我们通过post提交，后端获取到MD⽂档内容后，往往存在数据库中，然后在页⾯展⽰时，我们需要把MD语法⽂档，转换为HTML语法（也可以先转换为标准的HTML存储，但我觉得先转换的话，会占⽤较多存储空间）。
⾸先引⼊必要JS（下⾯不是所有必要）：
<script src="/smart-api/htdocs/mdeditor/js/jquery.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/marked.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/prettify.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/raphael.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/underscore.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/sequence-diagram.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/flowchart.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/lib/jquery.flowchart.min.js"></script>
<script src="/smart-api/htdocs/mdeditor/js/editormd.min.js"></script>
然后，本页⾯中，加⼊如下DIV：
jquery源码在线<div id="doc-content">
<textarea >${message.detail }</textarea>
</div>
最后，再引⼊如下JS代码：
<script type="text/javascript">
var testEditor;
$(function () {
testEditor = editormd.markdownToHTML("doc-content", {//注意：这⾥是上⾯DIV的id
htmlDecode: "style,script,iframe",
emoji: true,
taskList: true,
tex: true, // 默认不解析
flowChart: true, // 默认不解析
sequenceDiagram: true, // 默认不解析
codeFold: true,
});});
</script>
三、editor.md的更多配置项：
这配置，可以根据官⽅提供的Demo和源码到（editor.md-master/examples⽬录下⾯）。如，主题颜⾊设置；上传图⽚后的特殊处理等。
<script type="text/javascript">
var myEditor;
$(function() {
myEditor = editormd("my-editormd", {
width : "90%",
height : 800,
syncScrolling : "single",
path : "/smart-api/htdocs/mdeditor/lib/",
saveHTMLToTextarea : true,
emoji: true,//emoji表情，默认关闭
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",//设置透明遮罩层的背景颜⾊，全局通⽤，默认为#fff
codeFold: true,
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/smart-api/upload/editormdPic/",
/*上传图⽚成功后可以做⼀些⾃⼰的处理*/
onload: function () {
//console.log('onload', this);
//this.fullscreen();
//this.unwatch();
/
/this.watch().fullscreen();
//this.width("100%");
//this.height(480);
//size("100%", 640);
},
/**设置主题颜⾊*/
editorTheme: "pastel-on-dark",
theme: "gray",
previewTheme: "dark"
});
});
</script>
四、⽹站&源码：
⽹站：
源码：
eBook：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论