添加文章（富文本编辑器的使用、上传图片以及防xss攻击）
添加文章
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页面配置之后就能使用了
