03: KindEditor （HTML可视化编辑器）

1.1 kindEditor常用配置参数返回顶部

　　1. kindEditor常用配置

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

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

　　　　　　3、minWidth：指定编辑器最小宽度，单位为px。默认值: 650

　　　　　　4、minHeight：指定编辑器最小高度，单位为px。默认值: 100

　　　　　　5、items：配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。未指定表示显示所有工具栏

　　　　　　6、noDisableItems： designMode 为false时，要保留的工具栏图标。默认值: [‘source’, ‘fullscreen’]

　　2. kindEditor与上传相关配置

　　　　　　1、useContextmenu ： true时使用右键菜单，false时屏蔽右键菜单。

　　　　　　2、syncType ：值为空时，提交form表单时不会同步提交kindEditor中内容

　　　　　　3、uploadJson ：指定上传文件的服务器端程序路径

　　　　　　4、allowImageUpload ： true时显示本地图片上传按钮。

　　　　　　5、allowImageRemote ：是否允许通过url远程上传图片

　　　　　　6、autoHeightMode ：值为true，并引入autoheight.js插件时自动调整高度。

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

　　　　　　8、filePostName ：指定上传文件form名称

　　　　　　9、fileManagerJson ：指定浏览远程图片的服务器端程序路径

　　　　　　 allowFileManager ： true时显示浏览远程服务器按钮，上面的fileManagerJson才会生效

1.2 kindEditor下载与文件说明返回顶部

　　1、kindEditor插件下载

　　　　　　1. kindEditor官网: http://kindeditor.net/demo.php

　　　　　　2. 本地下载KindEditor: https://files.cnblogs.com/files/xiaonq/kindeditor.zip

　　2、文件夹说明　　　　

├── asp                          asp示例

├── asp.net                      asp.net示例

├── attached                     空文件夹，放置关联文件attached

├── examples                     HTML示例

├── jsp                          java示例

├── kindeditor-all-min.js        全部JS（压缩）

├── kindeditor-all.js            全部JS（未压缩）

├── kindeditor-min.js            仅KindEditor JS（压缩）

├── kindeditor.js                仅KindEditor JS（未压缩）

├── lang                         支持语言

├── license.txt                  License

├── php                          PHP示例

├── plugins                      KindEditor内部使用的插件

└── themes                       KindEditor主题

kindEditor文件夹说明

<textarea name="content" id="content"></textarea>

<script src="/static/jquery-1.12.4.js"></script>

<script src="/static/plugins/kind-editor/kindeditor-all.js"></script>

<script>

    $(function () {

        initKindEditor();

    });

    function initKindEditor() {

        var kind = KindEditor.create('#content', {

            width: '100%',       // 文本框宽度(可以百分比或像素)

            height: '300px',     // 文本框高度(只能像素)

            minWidth: 200,       // 最小宽度（数字）

            minHeight: 400      // 最小高度（数字）

        });

    }

</script>

基本使用

1.3 kindEditor实现上传图片、文件、及文件空间管理返回顶部

　　1、代码

　　　　　　1、使用kindEditor需要下载kindEditor插件包放到/project/static/ kindeditor 目录下

　　　　　　2、然后在 templates/kind.html 配置使用kindEditor

　　　　　　3、在views.py中定义了两个函数：upload_img、file_manager

　　　　　　　　　　upload_img：用来处理用户提交的文件（比如保存到服务器端）
　　　　　　　　　　file_manager：文件空间管理的处理函数，作用是浏览服务器端某一个文件夹下的所有文件

urlpatterns = [

    # url(r'^upload_file/$', views.upload_file),

    url(r'^kind/$', views.kind),

    url(r'^upload_img/$', views.upload_img),

    url(r'^file_manager/$', views.file_manager),

]

urls.py

from django.shortcuts import HttpResponse,render

import os,time,json

def kind(request):

    return render(request,'kind.html')

#1、作用：获取上传的图片、文件等

def upload_img(request):

    print('file_type',request.GET.get('dir'))     #获取上传类型，图片，文件，flash等

    print('file',request.POST.get('kind_text'))   #获取输入框中内容

    print('fafa',request.FILES.get('fafafa'))      #获取上传的文件或图片

    # 获取文件保存到我们服务器本地，然后把路径返回到前端就能实现预览效果：省略

    # 按照dic这个格式将对应内容返回，前端就会看到预览效果

    dic = {

        'error': 0,

        'url': '/static/imgs/aa.jpg',  #这里路径写什么，前端预览的图片就是什么

        'message': '错误了...'

    }

    return HttpResponse(json.dumps(dic))

#2、作用：文件空间管理的处理函数

def file_manager(request):

    dic = {}                                                              #这个dic就是最终返回给用户的

    root_path = 'C:/Users/tom/PycharmProjects/myCutPage/static'       #root_path：空间管理时显示此路径的所有文件

    static_root_path = '/static/'

    request_path = request.GET.get('path')

    if request_path:

        abs_current_dir_path = os.path.join(root_path, request_path)

        move_up_dir_path = os.path.dirname(request_path.rstrip('/'))

        dic['moveup_dir_path'] = move_up_dir_path + '/' if move_up_dir_path else move_up_dir_path

    else:

        abs_current_dir_path = root_path

        dic['moveup_dir_path'] = ''

    dic['current_dir_path'] = request_path                              #当前看到的路径

    dic['current_url'] = os.path.join(static_root_path, request_path)

    file_list = []

    for item in os.listdir(abs_current_dir_path):

        abs_item_path = os.path.join(abs_current_dir_path, item)

        a, exts = os.path.splitext(item)

        is_dir = os.path.isdir(abs_item_path)

        if is_dir:

            temp = {

                'is_dir': True,         #是否是文件夹

                'has_file': True,       #文件夹下是否有文件

                'filesize': 0,          #文件大小

                'dir_path': '',         #当前路径在哪里

                'is_photo': False,      #是否是图片

                'filetype': '',         #文件类型是什么

                'filename': item,       #文件名叫什么

                'datetime': time.strftime('%Y-%m-%d %H:%M:%S', #文件创建时间

                                          time.gmtime(os.path.getctime(abs_item_path)))

            }

        else:

            temp = {

                'is_dir': False,

                'has_file': False,

                'filesize': os.stat(abs_item_path).st_size,

                'dir_path': '',

                'is_photo': True if exts.lower() in ['.jpg', '.png', '.jpeg'] else False,

                'filetype': exts.lower().strip('.'),

                'filename': item,

                'datetime': time.strftime('%Y-%m-%d %H:%M:%S',

                                          time.gmtime(os.path.getctime(abs_item_path)))

            }

        file_list.append(temp)

    dic['file_list'] = file_list

    return HttpResponse(json.dumps(dic))

views.py

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form method="POST" action="/upload_img/">

        <div style="width: 500px;margin: 0 auto">

            <textarea id="content" name="kind_text"></textarea>

        </div>

        <input type="submit" value="提交">

    </form>

    <script src="/static/jquery-1.12.4.js"></script>

    <script src="/static/kindeditor/kindeditor-all.js"></script>

    <script>

        $(function () {

            initKindEditor();

        });

        // KindEditor.create用来创建编辑框，#conten是多行文本编辑的id

        function initKindEditor() {

            var kind = KindEditor.create('#content', {

                width: '100%',       // 文本框宽度(可以百分比或像素)

                height: '300px',     // 文本框高度(只能像素)

                minWidth: 200,       // 最小宽度（数字）

                minHeight: 400,      // 最小高度（数字）

                //items:['source', 'undo',], //定制只显示某些功能,默认全部显示

                //noDisableItems:['source','fullscreen'], //指定仅开启的功能

                //designMode:false,    //noDisableItems使用还要加上这个参数

                uploadJson:'/upload_img/',            //指定数据提交路径

                fileManagerJson:'/file_manager/',    //这两句用来配置 空间管理

                allowFileManager:true,                    //空间管理处理函数是：file_manager

                extraFileUploadParams:{                //添加别的参数一并传到服务器

                    csrfmiddlewaretoken:"{{ csrf_token }}"  //csrf

                },

                filePostName:'fafafa'                     //后台可以request.FILES.get('fafafa')获取

            });

        }

    </script>

</body>

</html>

kind.html

　　2、upload_img函数实现上传文件效果图

　　3、file_manager函数实现文件空间管理效果图

　　　　1、返回给用户的字典内容说明

'''

    最后返回给用户的字典内容如下

    {

        moveup_dir_path:上一级目录,

        current_dir_path: 当前所在目录,

        current_url: 如果是图片可以直接预览，这里就是对应图片路径,

        file_list: 时一个列表，列表中有很多字典，就是下面temp字典的格式

    }

'''

返回给用户的字典内容说明

　　　　2、文件空间管理使用效果1： 当我们点击文件上传时可以看到一个新功能：图片空间

　　　　3、文件空间管理使用效果2：点击“图片空间”就可以看到我们设置路径下的文件了