现在后台添加文章的页面简直是个笑话：
Django 博客后台
因此，要改造。
SimpleMDE
SimpleMDE 是一个支持 markdown 的前端编辑器。非常强大。新建一个 html 页面，拷贝如下代码，就得到一个和简书一样的 markdown 编辑器。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>JavaScript Markdown Editor - SimpleMDE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
</head>
<body>
<section class="main-content">
<textarea id="demo1"></textarea>
</section>
<script>
new SimpleMDE({
element: document.getElementById("demo1"),
spellChecker: false,
});
</script>
</body>
</html>
head 部分的链接已经使用了 cdn 加速了，所以这个页面直接去用了，不要想着把这些静态资源 down 到本地服务器了，没啥意思。
SimpleMDE 的 GITHUB
改造添加文章界面
参考官方文档，https://docs.djangoproject.com/zh-hans/2.1/intro/tutorial07/
在文档中是把 admin 的静态文件复制到 templates 中，但是我们用 django-suit 覆盖了 django 自带的templates，所以我们应该拷贝 suit 的模板到工程的 templates 目录。
### 查看 suit 的代码地址
import suit
print(suit.__path__)
修改 fieldset.html
对 suit 模板的 admin.includes.fieldset.html 进行修改。修改的思路就是用
JS 重写一些 CSS 效果。
<script>
new SimpleMDE({
element: document.getElementById("id_body"),
spellChecker: false,
});
if (window.location.pathname === "/admin/blog/post/add/"){
window.onload =()=>{
// simpleMDEAddSaveButton();
widenColLeft();
let post = new PostPage();
post.replaceLabel();
}
}
class PostPage{
constructor(){
this.category = document.querySelector('div[class~="field-category"]');
this.tag = document.querySelector('div[class~="field-tags"]');
this.author = document.querySelector('div[class~="field-author"]');
this.saveButton = document.getElementsByClassName('submit-row fixed')[0];
this.suitNav = document.getElementById("suit-nav");
this.categoryLabel = this.category.querySelector("label[for='id_category']");
this.tagLabel = this.tag.querySelector("label[for='id_tags']");
this.authorLabel = this.author.querySelector("label[for='id_author']");
}
replaceLabel(){
this.categoryLabel.innerText = "文章分类";
this.tagLabel.innerText = "文章标签";
this.authorLabel.innerText = "作者";
}
}
function widenColLeft(){
// hidden label
document.querySelector('label[for="id_title"]').style.display = "none";
document.querySelector('label[for="id_body"]').style.display = "none";
// widen col-left
document.getElementById("id_title").parentNode.setAttribute("class","col-xs-12 widget-AdminTextInputWidget");
document.getElementById("id_body").parentNode.setAttribute("class","col-xs-12 widget-AdminTextInputWidget");
// hidden col-right
document.querySelectorAll('div[class="col-right"]')[0].style.display = "none";
document.querySelector('div[class~="content-wrap"]').style.height = "100%";
// hidden excerpt
let excerpt = document.querySelector('div[class~="field-excerpt"]');
excerpt.style.display = "none";
}
最终效果如下：
image.png
