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'{
"800",
height:"500px", 为其添加自定以宽和高
}
);
</script>
3.添加图片需要设置upload属性
<script>
KindEditor.ready(function(K) {
window.editor = K.create('#article_content'{
"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 Code2.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=" 200px">
</div>
<div>
<label for="article_content">内容：</label>
<textarea name="article_content" id="article_content" cols="40" rows="10" class="form-control" style=" 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',{
"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