感觉CSDN的博客md博客编写器很不错。找了个开源md文件编辑器，想试着模仿一下，感谢Editor.md 的创造者。
1效果图2内容处理 2.1页面编写 需要引入的CSS和js<link rel="stylesheet" type="text/css" rel="external nofollow" href="${proPath }/js/md/editormd.min.css" /><script src="${proPath }/js/md/editormd.js" type="text/javascript" charset="utf-8"></script>
页面内容
<!-- 构造form表单，以便提交数据--><form id="formBlog" action="${proPath }/blog/getWrite" method="post"> <input id="blog_title" name="title" value="" style="display: none;"></input> <textarea id="blog_md" name="md" value="" style="display: none;"></textarea> <textarea id="blog_html" name="html" value="" style="display: none;"></textarea></form><div class="row"> <div class="panel panel-primary"> <div class="page-header"> <div class="panel-heading"> <div class="row"> <div class="col-md-8 col-md-offset-2 col-sm-3"> <input type="text" class="form-control" id="art-head" name="art-head" placeholder="标题"> </div> <div class="col-md-2 col-sm-1"> <button class="btn btn-success btn-blog-save">发布内容</button> </div> </div> </div> </div> <div class="panel-body"> <div class="row"> <!-- md文件编辑器编辑区域 后续js中会使用到 --> <div id="blog_mdedit"></div> </div> </div> </div></div>js初始化编辑区域
<script type="text/javascript"> $(function() { navAddClass('read_write'); md_edit = editormd("blog_mdedit", { //注意1：这里的就是上面的DIV的id属性值 placeholder : ' 欢迎使用'+'${title}' +" 博客", width : "90%", height : 400, syncScrolling : "single", emoji : true, path : "${proPath }/js/md/lib/", //注意2：你的路径 saveHTMLToTextarea : true, tocm : true, // Using [TOCM] tex : true, // 开启科学公式TeX语言支持，默认关闭 flowChart : true, // 开启流程图支持，默认关闭 /* 上传图片配置 */ imageUpload : true, imageFormats : [ "jpg", "jpeg", "gif", "png", "bmp", "webp" ], imageUploadURL : "${proPath }/base/blog/upFile", //注意你后端的上传图片服务地址 }); });</script> 注意事项1.图片上传参考我的另一篇
https://blog.csdn.net/u012848709/article/details/80537827
在测试的时候，会发现一些图片，字体显示有问题，在浏览器里面，打开开发者工具，观察报错信息，因为你的md 的js存放的位置不同，你需要结合浏览器报错，把相关的字体，图片放在报错提示的位置 3内容提交此处我是使用 jquery.form.min.js 提交。构造一个form表单，把md文件编辑器里面的内容放入到表单提交，代码如下(注意，表单是使用 textarea 存放内容)
<!-- 构造form表单，以便提交数据--><form id="formBlog" action="${proPath }/blog/getWrite" method="post"> <input id="blog_title" name="title" value="" style="display: none;"></input> <textarea id="blog_md" name="md" value="" style="display: none;"></textarea> <textarea id="blog_html" name="html" value="" style="display: none;"></textarea></form>js提交表单数据
<script type="text/javascript">$('.btn-blog-save').click(function() { $("#formBlog")[0].reset();//清空表单数据，避免上次数据干扰 $("#blog_title").val($("#art-head").val()); $("#blog_md").val(md_edit.getMarkdown());//md格式内容，使用md的js获取 $("#blog_html").val(md_edit.getHTML()); $("#formBlog").ajaxSubmit({ success : function(da) { $.scojs_message('发布成功', $.scojs_message.TYPE_OK); var uname='${logUser.username}'; if(uname||uname==''){ uname='zhuzi'; } location='${proPath}/blog/'+uname; } }); });</script>