• KindEditor编辑器


    1.官网:http://kindeditor.net/doc.php

    2.下载:http://kindeditor.net/down.php

    3.目录说明

    |── 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主题

    4.开始使用

    <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', {
                 '100%',       // 文本框宽度(可以百分比或像素)
                height: '300px',     // 文本框高度(只能像素)
                minWidth: 200,       // 最小宽度(数字)
                minHeight: 400      // 最小高度(数字)
            });
        }
    </script>

    5.初始化参数:http://kindeditor.net/docs/option.html

    6.上传文件

    默认上传地址:js文件路径+/php/upload_json.php

    修改初始参数uploadJson改变上传url:uploadJson:'/upload/'

    默认本地上传文件名:imgFile,可通过filePostName设置

    服务端返回数据格式:

    dic = {
            'error': 0,#0表示没用错误,1代表错误
            'url': '/static/imgs/20130809170025.png',#图片url
            'message': '成功'
        }

    示例:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    
    <div>
        <h1>文章内容</h1>
        {{ request.POST.content|safe }}
    </div>
    
    
    <form method="POST">
        <h1>请输入内容:</h1>
        {% csrf_token %}
        <div style=" 500px; margin: 0 auto;">
            <textarea name="content" id="content"></textarea>
        </div>
        <input type="submit" value="提交"/>
    </form>
    
    <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 a = 'kind';
            var kind = KindEditor.create('#content', {
                 '100%',       // 文本框宽度(可以百分比或像素)
                height: '300px',     // 文本框高度(只能像素)
                minWidth: 200,       // 最小宽度(数字)
                minHeight: 400,      // 最小高度(数字)
                uploadJson: '/kind/upload_img/',
                extraFileUploadParams: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}'
                },
                fileManagerJson: '/kind/file_manager/',
                allowPreviewEmoticons: true,
                allowImageUpload: true
            });
        }
    </script>
    </body>
    </html>

    服务端处理:

    import os
    import json
    import time
    
    from django.shortcuts import render
    from django.shortcuts import HttpResponse
    
    
    def index(request):
        """
        首页
        :param request:
        :return:
        """
        return render(request, 'index.html')
    
    
    def upload_img(request):
        """
        文件上传
        :param request:
        :return:
        """
        dic = {
            'error': 0,
            'url': '/static/imgs/20130809170025.png',
            'message': '错误了...'
        }
    
        return HttpResponse(json.dumps(dic))
    
    
    def file_manager(request):
        """
        文件管理
        :param request:
        :return:
        """
        dic = {}
        root_path = '/editors/static/'
        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))
  • 相关阅读:
    zpf 视图
    html5本地存储
    sqlite 使用记录
    百度开放平台
    PHP exit() 输出
    yum笔记
    手动编译安装软件
    while循环
    linux下面测试网络带宽 (转载)
    软件包管理器的核心功能(笔记)
  • 原文地址:https://www.cnblogs.com/wdliu/p/8326184.html
Copyright © 2020-2023  润新知