文本編輯器和表時
阿新 • • 發佈：2018-06-03
itl scrip NPU mod www. dump 美的 支持 路徑 
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))View Code
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) 結果 天青色等煙雨 最美的不是下雨天，而是躲View Code
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("添加成功")View Code
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> ‘‘‘HTML
‘‘‘ 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)) ‘‘‘Views
文本編輯器和表時