楔子
感觉
CSDN
的博客md博客编写器很不错。找了个开源md文件编辑器,想试着模仿一下,感谢Editor.md 的创造者。
1效果图
2内容处理
2.1页面编写
需要引入的CSS和js
<link rel="stylesheet" type="text/css" 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.图片上传参考我的另一篇
- 在测试的时候,会发现一些图片,字体显示有问题,在浏览器里面,打开开发者工具,观察报错信息,因为你的
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>