博客之富文本编辑器
富文本编辑器
下载地址：https://github.com/kindsoft/kindeditor/releases/download/v4.1.11/kindeditor-4.1.11-zh-CN.zip
文档说明：http://kindeditor.net/doc.php
把下载 kindeditor 文件夹放到静态目录 static 目录下
前端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>
/* uploadJson 后面接的是后端url， json表示后端必须返回json数据，否则会报错 */
/* uploadJson 返回的json需要带 url 的key */
/* extraFileUploadParams 表示post 上传的时候需要额外带一些参数 */
/* filePostName 是指定上传文件的名称 */
KindEditor.ready(function(K) {
window.editor = K.create('#article_content',{
width:"800",
height:"500px",
resizeType:0,
uploadJson:"/upload/",
extraFileUploadParams:{
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
},
filePostName:"upload_img"
});
});
</script>
</body>
</html>
上传图片的urls.py
url(r"backend/add_article/",views.add_article),
url(r'^upload/', views.upload)
视图views.py
from bbs import settings
import os,json
def upload(request):
obj = request.FILES.get("upload_img")
path=os.path.join(settings.MEDIA_ROOT,"add_article_img",obj.name)
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))
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
bs=BeautifulSoup(article_content,"html.parser")
# 因为article_content 不是文本字符串，而是包含标签的html字符串
# 但是文章描述 desc 只需要拿文本字符串，不拿标签字符串
desc=bs.text[0:150]+"..."
# 过滤非法标签, decompose() 会删除script和link标签
# 为什么要删除这些标签，因为kineditor保存的不是单纯的文本
# kineditor保存的是html字符串，要想前端显示用了safe
# 因为有了safe ，所以script标签也会正常显示，所以我们需要把script标签删除掉
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")
