时间戳

首页 > 技术文章 > 文本编辑器和BS4

文本编辑器和BS4

zgf-666 2018-06-03 16:37 原文

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

 

推荐阅读