富文本编辑框和防止xss攻击

一、后台管理页面构建

1、创建后台管理url

urlpatterns = [
    ...
    # 后台管理url
    re_path("cn_backend/$", views.cn_backend),
    re_path("cn_backend/add_article/$", views.add_article),
    ...
]

2、构造视图函数

from django.contrib.auth.decorators import login_required  # 装饰器：login_required()

@login_required
def cn_backend(request):
    """
    后台管理页面
    :param request:
    :return:
    """
    # 当前登录人发布过得文章列表
    article_list = models.Article.objects.filter(user=request.user)

    return render(request, "backend/backend.html", locals())

@login_required
def add_article(request):
    """
    后台管理添加文章视图函数
    :param request:
    :return:
    """
    if request.method == "POST":
        title = request.POST.get("title")
        content = request.POST.get("content")
        # 生成article对象
        models.Article.objects.create(title=title, content=content, user=request.user)
        return redirect("/cn_backend/")

    return render(request, "backend/add_article.html")

3、在templates目录下创建backend子目录，构建模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客后台管理 - 博客园</title>
    <!-- 引入 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/blog/bootstrap-3.3.7/css/bootstrap.css">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="/static/js/jquery-3.3.1.js"></script>
    <!-- 引入 Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/blog/bootstrap-3.3.7/js/bootstrap.js"></script> <!--依赖jquery-->
    <link rel="stylesheet" href="/static/blog/css/backend.css">
</head>
<body>

<div class="header">
    <p class="title">
        后台管理

        <a class="info" href="/logout/">注销</a>
        <span class="info"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;{{ request.user.username }}</span>
    </p>
</div>


<div class="container">
    <div class="col-md-3">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"
                           aria-expanded="true" aria-controls="collapseOne">
                            操作
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        <!--添加文章url跳转-->
                        <p><a href="/cn_backend/add_article/">添加文章</a></p>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="col-md-9">

        <div>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
                                                          data-toggle="tab">文章</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                                           data-toggle="tab">日记</a></li>
                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">眼镜</a>
                </li>
                <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">相册</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="home">
                    {% block content %}

                    {% endblock %}
                </div>
                <div role="tabpanel" class="tab-pane" id="profile">

                    <img src="/static/blog/img/meinv2.jpg" alt="">
                    <img src="/static/blog/img/meinv3.jpg" alt="">
                    <img class="pull-right" src="/static/blog/img/meinv.jpg" alt="">
                </div>
                <div role="tabpanel" class="tab-pane" id="messages">

                    <img width="180" height="180" src="/static/blog/img/hashiqi2.jpg" alt="">

                    <img width="180" height="180" src="/static/blog/img/dogg4.jpg" alt="">
                    <img width="180" height="180" src="/static/blog/img/linhaifeng.jpg" alt=""><br>
                    <img width="180" height="180" src="/static/blog/img/dogg3.jpeg" alt="">
                    <img width="180" height="180" src="/static/blog/img/dogge2.jpg" alt="">

                    <img width="180" height="180" src="/static/blog/img/dogg5.jpg" alt="">

                </div>
                <div role="tabpanel" class="tab-pane" id="settings">

                </div>
            </div>

        </div>

    </div>
</div>

</body>
</html>

backend/base.html

扩展模板：

{% extends 'backend/base.html' %}

{% block content %}
    <div class="article_list small">

        <table class="table table-hover table-striped">
            <thead>
            <th>标题</th>
            <th>评论数</th>
            <th>点赞数</th>
            <th>操作</th>
            <th>操作</th>
            </thead>
            <tbody>
            {% for article in article_list %}
                <tr>
                    <td>{{ article.title }}</td>
                    <td>{{ article.comment_count }}</td>
                    <td>{{ article.up_count }}</td>
                    <td><a href="">编辑</a></td>
                    <td><a href="">删除</a></td>
                </tr>
            {% endfor %}

            </tbody>
        </table>
    </div>
{% endblock %}

backend/backend.html

{% extends 'backend/base.html' %}

{% block content %}
    {# 提交form表单 #}
    <form action="" method="post">
        {% csrf_token %}
        <div class="add_article">
            <div class="alert-success text-center">添加文章</div>

            <div class="add_article_region">
                <div class="title form-group">
                    <label for="">标题</label>
                    <div>
                        <input type="text" name="title">
                    </div>
                </div>

                <div class="content form-group">
                    <label for="">内容(Kindeditor编辑器，不支持拖放/粘贴上传图片) </label>
                    <div>
                        <textarea name="content" id="article_content" cols="30" rows="10"></textarea>
                    </div>
                </div>

                <input type="submit" class="btn btn-default">

            </div>
        </div>
    </form>
    <script charset="utf-8" src="/static/blog/kindeditor/kindeditor-all.js"></script>

    <script>

    </script>
{% endblock %}

backend/add_article.html

在/static/blog/css/backend.css构建模板样式：

* {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 60px;
    background-color: #333333;
    line-height: 60px;
}

.header .title {
    color: white;
    font-size: 20px;
    margin-left: 20px;
    font-weight: 100;
}

.header .title .info {
    float: right;
    margin-right: 20px;
    font-size: 14px;
    text-decoration: none;
    color: white;

}

#accordion {
    margin-top: 20px;
}

.article_list {
    padding: 30px;
}

.alert-success {
    margin: 8px 0;
}

[name='title'] {
    width: 100%;
}

.tab-pane {
    margin-top: 40px;
    margin-left: 40px;
}

.tab-pane img {

    border-radius: 80%;
    margin: 20px 20px;
}

backend.css

4、展示效果

二、编辑器引入和参数

1、kindeditor编辑器

　　kindeditor编辑器官网和文档：http://kindeditor.net/doc.php

　　kindeditor编辑器下载页面: http://www.kindsoft.net/down.php

（1）引入编辑器

　　在页面中添加以下脚本

<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
        });
</script>

　　注意将下载好的文件中的kindeditor.js文件放入项目目录中引入。在K.create()查找的标签引入文本编辑器。

（2）配置编辑器参数

　　通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考编辑器初始化参数。

　　width：编辑器的宽度，可以设置px或%，比textarea输入框样式表宽度优先度高。

　　height：编辑器的高度，只能设置px，比textarea输入框样式表高度优先度高。

　　resizeType：2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。

　　uploadJson：指定上传文件的服务器端程序。

　　extraFileUploadParams：上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。

　　filePostName：指定上传文件form名称。

3、在博客项目中引入编辑器

　　在backend/add_article.html中添加编辑器：

{% extends 'backend/base.html' %}

{% block content %}
    {# 提交form表单 #}
    <form action="" method="post">
        ...
    </form>

    <script charset="utf-8" src="/static/blog/kindeditor/kindeditor-all.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create('#article_content', {   // 找到这个标签就会引入文本编辑器
                width: "800",
                height: "600",
                resizeType: 0,
                uploadJson: "/upload/",
                extraFileUploadParams: {
                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
                },
                filePostName: "upload_img"
            });
        });
    </script>
{% endblock %}

　　编辑器显示效果：