1. 云图网首页
  2. 技术专区
  3. 编程笔记

bbs项目引入富文本编辑器和处理xss攻击和文章预览详解编程语言

• 编程笔记

一、富文本编辑上传文章和图片

富文本编辑器我们使用kindeditor，我们首先去官网下载，然后解压，放到我们的static的目录中

bbs项目引入富文本编辑器和处理xss攻击和文章预览详解编程语言

然后我们在html中这样使用富文本编辑器

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel="stylesheet" href="/static/css/bootstrap-theme.css"> 
</head> 
<body> 
<h2>{{ auther }}个人博客站点管理后台</h2> 
 
<h3>文章标题</h3> 
<form method="post" enctype="multipart/form-data" action=""> 
    {% csrf_token %} 
 
    <label for="article_id"></label><input type="text" id="article_id" placeholder="文章标题" name="new_article_name"> 
    <h3>文章内容</h3> 
    <textarea name="new_article_content" cols="70" rows="20" id="editor_id"> 
 
    </textarea> 
    <input type="submit" value="提交" class="btn btn-success"> 
</form> 
 
<script src="/static/jq/jquery-3.3.1.js"></script> 
<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script> 
{#<script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>#} 
<script> 
        KindEditor.ready(function(K) { 
                window.editor = K.create('#editor_id',{ 
                width : '1200px', 
                item:[ 
                    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage', 
                    'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 
                    'anchor', 'link', 'unlink', '|', 'about' 
                ], 
                    uploadJson:"/app1/upload/", 
                    extraFileUploadParams:{ 
                        csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() 
                    }, 
                    filePostName:"upload_img" 
                }); 
        }); 
</script> 
</body> 
</html>

　　

主要是看这里

首先要为textarea标签设置一个id，这样，我们就可以把富文本编辑器通过id镶嵌到textarea标签中

<textarea name="new_article_content" cols="70" rows="20" id="editor_id">

　　

然后下面的script标签中就是引入富文本编辑器的js文件

<script src="/static/jq/jquery-3.3.1.js"></script> 
<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>

　　

我们上一篇博客重点讲了一下富文本编辑上传图片，这里我们就简单的看下代码就可以了

<script> 
        KindEditor.ready(function(K) { 
                window.editor = K.create('#editor_id',{ 
                width : '1200px', 
                item:[ 
                    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage', 
                    'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 
                    'anchor', 'link', 'unlink', '|', 'about' 
                ], 
                    uploadJson:"/app1/upload/", 
                    extraFileUploadParams:{ 
                        csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() 
                    }, 
                    filePostName:"upload_img" 
                }); 
        }); 
</script>

　　

window.editor = K.create('#editor_id'

　

这个是固定写法，把富文本放到id为editor_id的标签中，这个标签必须是textarea标签

                item:[ 
                    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste', 
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript', 
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/', 
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage', 
                    'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 
                    'anchor', 'link', 'unlink', '|', 'about' 
                ],

　　

这个item就是设置支持哪些功能和操作，比如加粗和斜体等等一系列操作

uploadJson:"/app1/upload/",　　

这个参数就是上传会调用走哪个url

                    extraFileUploadParams:{ 
                        csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val() 
                    },

　　

由于我们采用form的post方式上传，这里是为了解决crsf文件

filePostName:"upload_img"

　　

这个是设置我们上传的文件的k值

def upload(request): 
    print(settings.MEDIA_ROOT,type(settings.MEDIA_ROOT)) 
    file_obj = request.FILES.get("upload_img") 
    upload_path = os.path.join(settings.MEDIA_ROOT,"upload",file_obj.name) 
    with open(upload_path,"wb") as f: 
        for line in file_obj: 
            f.write(line) 
 
    res={ 
        "error":0, 
        "url":"/media/upload/"+file_obj.name 
    } 
 
 
    return HttpResponse(json.dumps(res))

　　

这里是我们上传文件的视图函数的处理，这里我们返回一个图片上传的路径，然后返回给前端，前端就会自动把img标签的src属性指向这个地址，这样我们打开博客就可以看到图片 

二、利用bs4模块实现文章预览

另外我们一般博客一般会有一个预览的效果，这个我们该如何实现呢

这里需要引入一个模块

    from bs4 import BeautifulSoup

　　

然后利用这个模块来实现，把前端传递过来的文章内容去除标签。然后在对去除标签的字符串进行切片，然后写到数据库中即可

    s = """ 
    <li class="editor_pick"><a href="https://www.cnblogs.com/xiangnanl/p/9833965.html" id="editor_pick_lnk" target="_blank">【编辑推荐】一文弄懂“分布式锁”<span id="editor_pick_count"> (2/735)</span></a> <a href="/aggsite/headline" title="查看更多编辑推荐" class="right_more">»</a></li> 
    """ 
 
    ret = BeautifulSoup(s,"html.parser") 
 
    print(ret.text) 
    # 获取html标签字符串中的所有的文本内容

　　

这里的html.parser是一个解析器，是django为我们自带的解析器，这里是固定的写法，当然我们也可以安装其他解析器

def article_site(request,auther): 
    method = request.method.lower() 
    if method == "get": 
        return render(request,"article.html",{"auther":auther}) 
    else: 
        title = request.POST.get("new_article_name") 
        contend = request.POST.get("new_article_content") 
        ret = models.Article.objects.create( 
            title = title, 
            desc = BeautifulSoup(contend,"html.parser").text[0:150], 
            comment_count =1, 
            up_count = 2, 
            down_count = 1, 
            category = models.Category.objects.filter(nid=1)[0], 
            user = models.Userinfo.objects.filter(username=auther)[0], 
        ) 
        models.ArticleDetail.objects.create( 
            content = contend, 
            article = ret 
        ) 
 
        return redirect("/app1/index/")

　　

三、利用bs4模块实现解决xss攻击

最后我们怎么解决xss攻击呢，还是需要bs4这个模块，我们需要先安装这个模块，然后导入，然后把前端发过来的字符中有scrip的标签全部删除掉

    s = """<div id="headline_block" class="headline"> 
    <ul><li class="editor_pick"><a href="https://www.cnblogs.com/xiangnanl/p/9833965.html" id="editor_pick_lnk" target="_blank">【编辑推荐】一文弄懂“分布式锁”<span id="editor_pick_count"> (2/769)</span></a> <a href="/aggsite/headline" title="查看更多编辑推荐" class="right_more">»</a></li><li><a href="https://www.cnblogs.com/coco1s/p/9913885.html" target="_blank" title="阅读726, 评论11, 推荐30">[最多推荐]你所不知道的 CSS 阴影技巧与细节(11/726)</a> <a href="/aggsite/topdigged24h" title="查看24小时推荐排行" class="right_more">»</a></li><li><a href="https://www.cnblogs.com/ryzen/p/9914827.html" target="_blank" title="阅读1409, 评论19, 推荐0">[最多评论]致C#,致我这工作一年(上)(19/1409)</a> <a href="/aggsite/topcommented24h" title="查看24小时评论排行" class="right_more">»</a></li><li><a href="https://news.cnblogs.com/n/611408/" target="_blank" title="阅读1976, 评论13, 推荐6">[新闻头条]iPhone XR产能砍掉25% 苹果供应商股价集体暴跌(13/1976)</a> <a href="https://news.cnblogs.com/" title="查看更多新闻" class="right_more">»</a></li><li><a href="https://news.cnblogs.com/n/611463/" target="_blank" title="阅读847, 评论5, 推荐9">[推荐新闻]比尔·盖茨举起一杯粪便，号召应对全球卫生危机(5/847)</a> <a href="https://news.cnblogs.com/n/recommend" title="查看更多推荐新闻" class="right_more"></a></li></ul></div>""" 
 
    ret = BeautifulSoup(s,"html.parser") 
 
    ret = ret.find_all("a") 
    # 查找所有的a标签 
 
 
    for label in ret: 
 
        print(label.get("href")) 
        # 获取a标签的href的属性 
 
        print(label.name) 
        # 获取标签的名称 
 
    ret = BeautifulSoup(s, "html.parser") 
 
    for tag in ret.find_all(): 
        # 查找所有的标签 
        if tag.name == "div": 
            tag.decompose() 
            # 在字符串中删除tag.name=div的标签，这里需要注意，如果div中有包裹的标签，则会一并删除 
    print(ret)

　　

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/20795.html

赞 (0)
0
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论