文本编辑器和BS4
1.文本编辑器
下载编辑器 下载页面: http://www.kindsoft.net/down.php
1.在需要显示编辑器的位置添加textarea输入框
<div>
<p>内容(TinyMCE编辑器，支持拖放/粘贴上传图片) </p>
<textarea name="article_content" id="article_content" cols="60" rows="20"></textarea>
</div>
2.在该HTML页面添加以下脚本
<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", 为其添加自定以宽和高 } ); </script>
3.添加图片需要设置upload属性
<script> KindEditor.ready(function(K) { window.editor = K.create('#article_content'{ width:"800", height:"500px", 为其添加自定以宽和高 resizeType:0, uploadJson:"/upload/", 上传图片，在urls中添加/upload/路由 } ); </script>
4.在路由中添加路径和执行函数
但是会遇到csrf阻拦，加上属性extraFileUploadParams
上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。
extraFileUploadParams:{
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()},
在后台request.FILES,能看到图片信息，默认图片名字是imgFile，如果修改，在js中添加 filePostName:"upload_img"
5.将存在本地的图片文件返回给编辑器，实现预览
import os,json def upload(request): print(request.FILES) # obj=request.FILES.get('imgFile') #默认的文件名字是imgFile obj = request.FILES.get("upload_img") print(obj.name) #得到图片名 ##指定图片的路径，放在media中，创建article_img path=os.path.join(settings.MEDIA_ROOT,"article_img",obj.name) with open(path,"wb") as f: for line in obj: f.write(line) ##将文件返回给输入框内，实现预览 res={ "error":0, "url":"/media/article_img/"+obj.name } return HttpResponse(json.dumps(res))
2.bs4的使用之切割
1.文章内容在主页面不全部显示出来，在文章详情上显示出来，需要用到切割
但是，由于html标签的存在，切的过程中，有可能使标签不完整，从而在页面上显示出标签
2.解决方法：bs4的BeautifulSoup模块
s=html_doc = """ <html><head><title>天青色等烟雨</title></head> <p class="title"><b>最美的不是下雨天，而是躲过雨的屋檐</b></p> <a href="http://example.com/elsie" class="sister" id="link1">我们说好的</a>, <a href="http://example.com/lacie" class="sister" id="link2">明明你也很爱我</a> and <a href="http://example.com/tillie" class="sister" id="link3">当梦被埋在江南言语中</a>; and they lived at the bottom of a well.</p> <p class="story">...</p> <script>alert(123)</script> """ from bs4 import BeautifulSoup bs=BeautifulSoup(s,"html.parser") print(bs.text) #获取所有的文本内容 print(bs.text[0:20]) #对文本进行切割 结果： 最美的不是下雨天，而是躲过雨的屋檐 我们说好的, 明明你也很爱我 and 当梦被埋在江南言语中; and they lived at the bottom of a well. ... alert(123) 结果 天青色等烟雨 最美的不是下雨天，而是躲
3.bs4的使用之防止xss攻击
页面有时会弹出消息，这些消息有的是恶意的，我们要做的就是不让弹出这些消息
弹出消息是由js控制的，我们要做的是删除掉文本中的script标签
from bs4 import BeautifulSoup
bs=BeautifulSoup(s,"html.parser")
obj=bs.find_all()#找到所有的标签对象
print(obj)
for tag in obj:
print(tag.name) #找到所有的标签名
移除使用 tag.decompose()
在后端处理编辑器中的内容：
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") 是个对象 desc=bs.text[0:150]+"..." # 过滤非法标签 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("添加成功")
4.整体代码
''' <div class="header"></div> <div class="content"> <h1>添加文章</h1> <form action="" method="post"> {% csrf_token %} <div> <label for="title">文章标题：</label> <input type="text" name='title' id="title" class="form-control" style="width: 200px"> </div> <div> <label for="article_content">内容：</label> <textarea name="article_content" id="article_content" cols="40" rows="10" class="form-control" style="width: 400px"></textarea> </div> <div> <input type="submit" value="提交" class="btn btn-info" style="margin-top: 30px"> </div> </form> <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/", extraFileUploadParams:{ csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() }, //制定文件名 filePostName:"upload_img" }); }); </script> </div> '''
''' def add_article(request): if request.method=="POST": title=request.POST.get("title") desc = request.POST.get("article_content") print(title,desc) user=request.user import datetime now = datetime.datetime.now() ###内容截取，得到文章对象，只截取文本 from bs4 import BeautifulSoup bs = BeautifulSoup(desc , "html.parser") desc = bs.text[0:50] + "..." # 过滤非法标签 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,create_time=now ) models.ArticleDetail.objects.create(content=str(bs),article=article_obj) return redirect("/index/") return render(request,"add_article.html") from bbs import settings #拿到media的路径 import os,json def upload(request): print(request.FILES) # obj=request.FILES.get('imgFile') #默认的文件名字是imgFile obj = request.FILES.get("upload_img") print(obj.name) #得到图片名 ##指定图片的路径，放在media中，创建article_img path=os.path.join(settings.MEDIA_ROOT,"article_img",obj.name) with open(path,"wb") as f: for line in obj: f.write(line) ##将文件返回给输入框内，实现预览 res={ "error":0, "url":"/media/article_img/"+obj.name } return HttpResponse(json.dumps(res)) '''
