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

其他 2018-11-07 08:54:55 阅读次数: 0

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

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

然后我们在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标签字符串中的所有的文本内容

　　

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)

　　

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

猜你喜欢

转载自www.cnblogs.com/bainianminguo/p/9920383.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022