一 部署Markdown
1 项目下载地址
https://github.com/qiwsir/editor.md
2 部署方法
下载项目,并将其中的一些目录和文件复制到项目的 ./static/editor目录,复制后的结果如下:
二 改写前端模板,引入Markdown
1 重写mysite/templates/article/column/article_post.html
{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}article column{% endblock %}
{% block content %}
<!--引入两个CSS,editormd.css是插件自带的,style.css是新增的-->
<link rel="stylesheet" href="{% static 'editor/css/style.css' %}">
<link rel="stylesheet" href="{% static 'editor/css/editormd.css' %}">
<div style="margin-left:10px">
<form class="form-horizontal" action="." method="post">{% csrf_token %}
<div class="row" style="margin-top: 10px;">
<div class="col-md-2 text-right"><span>标题:</span></div>
<div class="col-md-10 text-left">{{article_post_form.title}}</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-md-2 text-right"><span>栏目:</span></div>
<div class="col-md-10 text-left">
<select id="which_column">
{% for column in article_columns %}
<option value="{{column.id}}">{{column.column}}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-md-2 text-right"><span>内容:</span></div>
<!--切换到markdown-->
<!--<div class="col-md-10 text-left">{{article_post_form.body}}</div>-->
<div id="editormd" class="col-md-10 text-left">
<textarea style="display:none;" id="id_body"></textarea>
</div>
</div>
<div class="row">
<input type="button" class="btn btn-primary btn-lg" value="发布" onclick="publish_article()">
</div>
</form>
</div>
<script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
<script type="text/javascript" src="{% static 'js/layer.js'%}"></script>
<script type="text/javascript">
function publish_article(){
var title = $("#id_title").val();
var column_id = $("#which_column").val();
var body = $("#id_body").val();
$.ajax({
url: "{% url 'article:article_post' %}",
type: "POST",
data: {"title":title, "body":body, "column_id":column_id},
success: function(e){
if(e=="1"){
layer.msg("发布成功!");
}else if(e=="2"){
layer.msg("发布失败!") ;
}else{
layer.msg("是不是有没有填写的项目?都必须写,不能空。");
}
},
});
}
</script>
<!--引入markdown的js相关文件-->
<script type="text/javascript" src='{% static "editor/editormd.min.js" %}'></script>
<script type="text/javascript">
$(function() {
var editor = editormd("editormd", {
width : "100%",
height : 640,
syncScrolling : "single",
path : "{% static 'editor/lib/' %}"
});
});
</script>
{% endblock %}
2 新增的mysite/static/editor/css/style.css
#layout {
text-align: left;
}
#layout > header, .btns {
padding: 15px 0;
width: 90%;
margin: 0 auto;
}
#layout > header > h1 {
font-size: 20px;
margin-bottom: 10px;
}
三 修改后的效果