添加文章
url(r"backend/add_article/",views.add_article),
def add_article(request): if request.method=="POST": title=request.POST.get('title') article_content=request.POST.get('article_content') user=request.user from bs4 import BeautifulSoup #BeautifulSoup是一種可以從html和xml中快速提取內容的python庫,這里幫我們獲取文本內容 bs=BeautifulSoup(article_content,"html.parser") desc=bs.text[0:150]+"..." # 過濾非法標簽（防xss攻擊） for tag in bs.find_all(): # print(tag.name) if tag.name in ["script", "link"]: tag.decompose() #將當前節點移除文檔樹並完全銷毀 article_obj=models.Article.objects.create(user=user,title=title,desc=desc) models.ArticleDetail.objects.create(content=str(bs),article=article_obj) return HttpResponse("添加成功") return render(request,"add_article.html")
上傳圖片
url(r"up_down/",views.up_down),
from bbs import settings #在settings里配置了media的路徑，這里為了拿media的路徑， import os,json def upload(request): print(request.FILES) #以上傳圖片為例 #<MultiValueDict: {'upload_img': [<InMemoryUploadedFile: xiaobai.jpg (image/jpeg)>]}> obj = request.FILES.get("upload_img") #拿到上傳的文件對象 print("name",obj.name) #name xiaobai.jpg #拿到下載圖片的路徑（用os.path.join進行路徑的拼接） path=os.path.join(settings.MEDIA_ROOT,"add_article_img",obj.name) #把文件對象obj寫入指定的下載路徑的文件中 with open(path,"wb") as f: for line in obj: f.write(line) #下載完圖片之后進行上傳 res={ "error":0, #上傳沒有錯誤 "url":"/media/add_article_img/"+obj.name #上傳文件的路徑 } return HttpResponse(json.dumps(res)) #作為json的返回
add_article.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; } .header { width: 100%; height: 60px; background-color: #369; } .content { width: 80%; margin: 20px auto; } </style> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <script src="/static/jquery-3.3.1.js"></script> </head> <body> <div class="header"></div> <div class="content"> <h3>添加文章</h3> <form action="" method="post"> {% csrf_token %} <div> <label for="">文章標題</label> <input type="text" name="title" class="form-control" style="width: 200px"> </div> <div> <p>內容(TinyMCE編輯器，支持拖放/粘貼上傳圖片) </p> <textarea name="article_content" id="article_content" cols="60" rows="20"></textarea> </div> <input type="submit" class="btn btn-info"> </form> </div> <!-- 富文本編輯器的應用 --> <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script> <script> KindEditor.ready(function (K) { window.editor = K.create('#article_content', { width: "800", height: "500px", resizeType: 0, uploadJson: "/upload/", //指定上傳文件的服務器端程序，要求返回一個json數據 extraFileUploadParams: { //上傳圖片、Flash、視音頻、文件時，支持添加別的參數一並傳到服務器。 csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val() }, filePostName: "upload_img" //指定上傳文件form名稱 }); }); </script> </body> </html>
下載完解壓，然后放入項目中，然后按照使用方法在html頁面配置之后就能使用了
