Django之富文本编辑器

01-Kindeditor编辑器

官网：http://kindeditor.net/demo.php

下载：

放到本地

使用 引入文件

# 在该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>

更多使用方法，请参考：http://kindeditor.net/docs/usage.html

初始化参数

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

更多参数解释，参考文档：http://kindeditor.net/docs/option.html

上传文件

urls.py

# 文本编辑器上传图片url
path('upload/', views.upload),

views.py

def upload(request):
    """
    编辑器上传文件接受视图函数
    :param request:
    :return:
    """

    print(request.FILES)
    img_obj = request.FILES.get("upload_img")
    print(img_obj.name)

    path = os.path.join(settings.MEDIA_ROOT, "add_article_img", img_obj.name)

    with open(path, "wb") as f:

        for line in img_obj:
            f.write(line)

    response = {
        "error": 0,
        "url": "/media/add_article_img/%s" % img_obj.name
    }
    
    import json

    return HttpResponse(json.dumps(response))

html

<script src="/static/js/jquery-3.2.1.min.js"></script>
<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>

参考文档：http://kindeditor.net/docs/upload.html