后台文本编辑器KindEditor介绍

后台文本编辑器KindEditor介绍

我们在自己的个人主页添加文章内容的时候，需要对文章内容进行修饰，此时就需要文本编辑器助阵了！

功能预览

KindEditor文本编辑器

KindEditor文本编辑器官网：http://kindeditor.net/demo.php

本文简单介绍下KindEditor的引入、主要的参数以及上传文件等功能。

KindEditor的引入

在官网下载好编辑器文件后，我们把它放在项目的static/blog目录下，如下图所示：

那么在我们需要调用编辑器的模板中加入相应的script标签就好了

<script src="/static/blog/jquery-1.12.4.js"></script>
<script charset="utf-8" src="/static/blog/kindeditor/kindeditor-all.js"></script>
<script>
    KindEditor.ready(function(K) {
            window.editor = K.create('#editor_id',{
                //待填充内容
            });
    });
</script>

这里需要注意两点：

一:需要先引入Jquery。

二:这里的'#editor_id'是Jquery的id选择器，选取的是id为eidtor_id的textarea，因此我们在上面必须得定义一个id为editor_id的textarea来做本编辑器的“容器”：

<textarea name="content" id="article_content1" cols="30" rows="10"></textarea>

KindEditor的参数

关于KindEditor的参数详见这里：http://kindeditor.net/docs/option.html

这里简单介绍几个：

下面是本系统的编辑器参数

<script>
    KindEditor.ready(function(K) {
            window.editor = K.create('#article_content1',{
                width:"800",
                height:"600",
                resizeType:0,
                uploadJson:"/upload/",
                extraFileUploadParams:{
                    csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
                    username:'{{ request.user.username }}'
                },
                filePostName:"upload_img"
            });
    });
</script>

宽度与高度是上面的width与height。

还有一个items，它表示编辑器的各种功能按钮，默认不写的情况下所有功能都展示，可以根据实际需求加载相应的功能模块。

resizeType代表编辑框能否拖动高度与宽度；参数为0表示不可改变，参数为1代表只能改变高度，参数为2表示可以同时改变高度与宽度。

uploadJson与filePostName是与文件上传相关的参数，接下来会详细讲述。

extraFileUploadParams是将数据传给后台功能的参数，这里需要注意为了防止页面上报csrftoken错误，需要将csrf中间件生成的input标签的值传给后台！

KindEditor的文件上传

我们上面介绍的uploadJson参数就是制定文件上传的路由的，本例指定的是'/upload/'。

接着我们需要在路由中新建一条文件上传的路由：

path('upload/', views.upload),

然后在视图函数中创建相应的视图函数

##编辑器上传图片
def upload(request):
    print(request.FILES)
    img_obj = request.FILES.get("upload_img")
    print(img_obj.name)
    #MEDIA_ROOT = os.path.join(BASE_DIR,'media')
    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)
    return HttpResponse("ok")

这样，我们就可以在编辑器中上传图片了。需要提醒大家的一点是，文件最终上传的目录是上面代码中path变量中指定的文件目录。