引子
采用django实现的博客里面使用了markdown,到达下图的效果,还是遇到不少坑。这个博客给大家介绍一下。
集成markdown方法
1、下载的mdeditor
我用的是这个:
- Editor.md
- @author Pandao
- {@link https://github.com/pandao/editor.md}
- @updateTime 2015-06-09
需要把下载的文件夹放到django项目static下面,这是网页里面使用的css和js文件。
2、给项目还有下载django-mdeditor
采用pip install django-mdeditor。
3、在网页里面增加代码
下面是在网页里面采用mdeditor控件的代码。
<form class="form-horizontal" method="post">
{% csrf_token %}
<div class="row" >
<div class="col-md">
<p class="text-primary">文章摘要:</p>
<textarea rows="1" cols="100" id="id_summary" style="resize: none" >{{ article.summary }}</textarea>
</div>
<div class="col-md">
<p class="text-primary">首页图片:</p>
<textarea rows="1" cols="100" id="id_img_link" style="resize: none" >{{ article.img_link }}</textarea>
</div>
</div>
<div class="container" id="editormd" >
<textarea style="display:none;" id="id_body" onresize="both" >{{ article.body }}</textarea>
</div>
<input type="button" value="发布博客" class="btn btn-primary btn-lg" onclick="post_update()" >
</form>
下面是网页里面设置该控件的代码:
// new
$(function(){
var editor = editormd('editormd', {
syncScrolling: 'single',
watch: true, // 关闭实时预览
lineNumbers: false,
lineWrapping: false,
width: "100%",
height:"640",
placeholder: '',
onfullscreen : function() {
this.editor.css("border-radius", 0).css("z-index", 9999);
},
onfullscreenExit : function() {
this.editor.css({
zIndex : 10,
border : "1px solid rgb(221,221,221)"
})
},
syncScrolling: "single",
path: "/static/editor/lib/",
// theme
theme : "default",
previewTheme : "default",
editorTheme : "default",
htmlDecode: "style,script,iframe,sub,sup|on*",
saveHTMLToTextarea: true, // editor.md 有问题没有测试成功
toolbarAutoFixed: true,
searchReplace: true,
emoji: true,
tex: true,
taskList: false,
flowChart: true,
sequenceDiagram: true,
// image upload
imageUpload: true,
imageFormats: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'webp'],
imageUploadURL: "/mdeditor/uploads/",
toolbarIcons: function () {
return ['undo', 'redo', '|', 'bold', 'del', 'italic', 'quote', 'ucwords', 'uppercase', 'lowercase', '|', 'h1', 'h2', 'h3', 'h5', 'h6', '|', 'list-ul', 'list-ol', 'hr', '|', 'link', 'reference-link', 'image', 'code', 'preformatted-text', 'code-block', 'table', 'datetime', 'emoji', 'html-entities', 'pagebreak', 'goto-line', '|', 'help', 'info', '||', 'preview', 'watch', 'fullscreen']
},
onload: function () {
console.log('onload', this);
//this.fullscreen();
//this.unwatch();
//this.watch().fullscreen();
//this.setMarkdown("#PHP");
//this.width("100%");
//this.height(480);
//this.resize("100%", 640);
}
});
})
</script>
4、修改django里面的urls文件
增加以下内容:
path('mdeditor/',include('mdeditor.urls')),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
5、增加katex支持
katex是用于算术公式显示,特殊字符显示等。mdediror控件里面使用的是国外CDN网站的katex代码,很慢!因此首先要下载katex文件,放置在static/editor文件夹里面,修改下面代码改动路径。
editormd.katexURL = {
css : "/static/editor/katex/katex",
js : "/static/editor/katex/katex"
6、增加emoji支持
请看我前面的博客。
还存在的问题:图片大小变化; 谁解决了给我说说。