KindEditor的使用

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

http://kindeditor.net/doc.php

一、编辑器使用方法

1. 下载编辑器

下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。

下载页面: http://www.kindsoft.net/down.php

2. 部署编辑器

解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/

Note

您可以根据需求删除以下目录后上传到服务器。

asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件

3. 修改HTML页面

在需要显示编辑器的位置添加textarea输入框。

<textarea id="editor_id" name="content" style="700px;height:300px;">
&lt;strong&gt;HTML内容&lt;/strong&gt;
</textarea>

在该HTML页面添加以下脚本。

<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>

二、在博客中使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .header{
            height: 50px;
            background-color: #2e6da4;
            line-height: 50px;
            color: white;
        }
        .header span{
            margin-left: 50px;
            font-size: 25px;
        }
        .add_body{
            width: 80%;
            margin: 0 auto;
        }
        #artical_title{
            width: 300px;
        }
    </style>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>
    <div class="header">
        <span>博客后台</span>
    </div>

    <div class="add_body">
        <h1>文章添加</h1>
        <label for="artical_title">添加文章:</label>

        <div>
            <form method="post" action="">
                {% csrf_token %}
                <input id="artical_title" name="artical_title" class="form-control" type="text">
                <p><label for="artical_content">文章内容</label></p>
                <textarea id="artical_content" name="artical_content" style="700px;height:300px;">
                &lt;strong&gt;HTML内容&lt;/strong&gt;
                </textarea>
                <p><input type="submit" class="btn btn-info" value="提交"></p>
            </form>
        </div>
    </div>


    <script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
    <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
    <script src="/static/bootstrap-3.3.7-dist/js/jquery-1.12.4.js"></script>
    <script>




            KindEditor.ready(function(K) {
                    window.editor = K.create('#artical_content', { //这里定义需要对哪个textarea进行装饰
                        resizeType:0,
                        uploadJson:"/blog/backend/upload/", //定义文件的上传路由
                        extraFileUploadParams:{
                            csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
                        },
                        filePostName:"upload_img", //定义上传后的文件"name"属性名称，便于后台request获取
                    });
            });
    </script>
</body>
</html>
add_artical.html

def add_artical(request, username):
    if request.method == "POST":
        user = request.user
        artical_title = request.POST.get("artical_title")
        artical_content = request.POST.get("artical_content")
        # desc = artical_content[0:150]

        # 解释html标签
        from bs4 import BeautifulSoup
        # html.parser为解析器，是python标准库
        bs = BeautifulSoup(artical_content, "html.parser")
        desc = bs.text[0:150] + "..."

        # 过滤非法标签
        for tag in bs.find_all():
            if tag.name in ["script", "link"]:
                # 将该非法标签从对象中移除
                tag.decompose()

        # 打印结果为"123 <class 'bs4.BeautifulSoup'>"
        print(bs,type(bs))

        try:
            artical_obj = models.Artical.objects.create(user=user, desc=desc, title=artical_title)
            models.ArticalDetail.objects.create(content=str(bs), artical=artical_obj)
        except:
            return HttpResponse("更新文章失败 ")
        return HttpResponse("添加成功")

    return render(request, "add_artical.html")


from Hero import settings
import os, json
def upload(request):
    obj = request.FILES.get("upload_img")
    # print("name", obj.name)

    path = os.path.join(settings.MEDIA_ROOT, "add_artical_img", obj.name)

    with open(path, "wb") as f:
        for line in obj:
            f.write(line)

    res = {
        "error": 0,
        "url": "/media/add_artical_img/" + obj.name
    }

    return HttpResponse(json.dumps(res))
views.py

re_path('backend/add_artical/(?P<username>w+)', views.add_artical),
    path('backend/upload/', views.upload),
urls.py