文档章节

KindEditor使用

o
 osc_x4h57ch8
发布于 2018/04/24 10:59
字数 756
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

1、进入官网

2、下载

  • 官网下载:http://kindeditor.net/down.php
  • 本地下载:http://files.cnblogs.com/files/wupeiqi/kindeditor_a5.zip

3、文件夹说明:

 1 ├── asp                          asp示例
 2 ├── asp.net                      asp.net示例
 3 ├── attached                    空文件夹,放置关联文件attached
 4 ├── examples                    HTML示例
 5 ├── jsp                          java示例
 6 ├── kindeditor-all-min.js     全部JS(压缩)
 7 ├── kindeditor-all.js            全部JS(未压缩)
 8 ├── kindeditor-min.js           仅KindEditor JS(压缩)
 9 ├── kindeditor.js               仅KindEditor JS(未压缩)
10 ├── lang                        支持语言
11 ├── license.txt               License
12 ├── php                        PHP示例
13 ├── plugins                    KindEditor内部使用的插件
14 └── themes                   KindEditor主题

 

 

4、基本使用

 

 1 <textarea name="content" id="content"></textarea>
 2 
 3 <script src="/static/jquery-1.12.4.js"></script>
 4 <script src="/static/plugins/kind-editor/kindeditor-all.js"></script>
 5 <script>
 6     $(function () {
 7         initKindEditor();
 8     });
 9 
10     function initKindEditor() {
11         var kind = KindEditor.create('#content', {
12             width: '100%',       // 文本框宽度(可以百分比或像素)
13             height: '300px',     // 文本框高度(只能像素)
14             minWidth: 200,       // 最小宽度(数字)
15             minHeight: 400      // 最小高度(数字)
16         });
17     }
18 </script>
 1 <script>
 2     $(function () {
 3 
 4         KindEditor.create('#content', {
 5             {#                items: ['superscript', 'clearhtml', 'quickformat', 'selectall']#}
 6             {#                noDisableItems: ["source", "fullscreen"],#}
 7             {#                designMode: false#}
 8             uploadJson: '/upload_img/',
 9             fileManagerJson: '/file_manager/',
10             allowImageRemote: true,
11             allowImageUpload: true,
12             allowFileManager: true,
13             extraFileUploadParams: {
14                 csrfmiddlewaretoken: "{{ csrf_token }}"
15             },
16             filePostName: 'fafafa'
17 
18         });
21     })
22 </script>

 

 

5、详细参数

     http://kindeditor.net/docs/option.html

 

6、上传文件并展示

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 
 9 <div>
10     <h1>文章内容</h1>
11     {{ request.POST.content|safe }}
12 </div>
13 
14 
15 <form method="POST">
16     <h1>请输入内容:</h1>
17     {% csrf_token %}
18     <div style="width: 500px; margin: 0 auto;">
19         <textarea name="content" id="content"></textarea>
20     </div>
21     <input type="submit" value="提交"/>
22 </form>
23 
24 <script src="/static/jquery-1.12.4.js"></script>
25 <script src="/static/plugins/kind-editor/kindeditor-all.js"></script>
26 <script>
27     $(function () {
28         initKindEditor();
29     });
30 
31     function initKindEditor() {
32         var a = 'kind';
33         var kind = KindEditor.create('#content', {
34             width: '100%',       // 文本框宽度(可以百分比或像素)
35             height: '300px',     // 文本框高度(只能像素)
36             minWidth: 200,       // 最小宽度(数字)
37             minHeight: 400,      // 最小高度(数字)
38             uploadJson: '/kind/upload_img/',
39             extraFileUploadParams: {
40                 'csrfmiddlewaretoken': '{{ csrf_token }}'
41             },
42             fileManagerJson: '/kind/file_manager/',
43             allowPreviewEmoticons: true,
44             allowImageUpload: true
45         });
46     }
47 </script>
48 </body>
49 </html>
HTML
 1 import os
 2 import json
 3 import time
 4 
 5 from django.shortcuts import render
 6 from django.shortcuts import HttpResponse
 7 
 8 
 9 def index(request):
10     """
11     首页
12     :param request:
13     :return:
14     """
15     return render(request, 'index.html')
16 
17 
18 def upload_img(request):
19     """
20     文件上传
21     :param request:
22     :return:
23     """
24     dic = {
25         'error': 0,
26         'url': '/static/imgs/20130809170025.png',
27         'message': '错误了...'
28     }
29 
30     return HttpResponse(json.dumps(dic))
31 
32 
33 def file_manager(request):
34     """
35     文件管理
36     :param request:
37     :return:
38     """
39     dic = {}
40     root_path = '/Users/wupeiqi/PycharmProjects/editors/static/'
41     static_root_path = '/static/'
42     request_path = request.GET.get('path')
43     if request_path:
44         abs_current_dir_path = os.path.join(root_path, request_path)
45         move_up_dir_path = os.path.dirname(request_path.rstrip('/'))
46         dic['moveup_dir_path'] = move_up_dir_path + '/' if move_up_dir_path else move_up_dir_path
47 
48     else:
49         abs_current_dir_path = root_path
50         dic['moveup_dir_path'] = ''
51 
52     dic['current_dir_path'] = request_path
53     dic['current_url'] = os.path.join(static_root_path, request_path)
54 
55     file_list = []
56     for item in os.listdir(abs_current_dir_path):
57         abs_item_path = os.path.join(abs_current_dir_path, item)
58         a, exts = os.path.splitext(item)
59         is_dir = os.path.isdir(abs_item_path)
60         if is_dir:
61             temp = {
62                 'is_dir': True,
63                 'has_file': True,
64                 'filesize': 0,
65                 'dir_path': '',
66                 'is_photo': False,
67                 'filetype': '',
68                 'filename': item,
69                 'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path)))
70             }
71         else:
72             temp = {
73                 'is_dir': False,
74                 'has_file': False,
75                 'filesize': os.stat(abs_item_path).st_size,
76                 'dir_path': '',
77                 'is_photo': True if exts.lower() in ['.jpg', '.png', '.jpeg'] else False,
78                 'filetype': exts.lower().strip('.'),
79                 'filename': item,
80                 'datetime': time.strftime('%Y-%m-%d %H:%M:%S', time.gmtime(os.path.getctime(abs_item_path)))
81             }
82 
83         file_list.append(temp)
84     dic['file_list'] = file_list
85     return HttpResponse(json.dumps(dic))
View

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

深入浅出Zabbix 3.0 -- 第二章 Zabbix Web操作与定义

第二章 Zabbix Web操作与定义 本章介绍Zabbix 中一些基本概念的定义和web前端页面的操作,包括Zabbix中使用的一些术语的定义,Web页面中用户管理、主机和主机组的管理,以及监控项、模板、触...

osc_5zaxkz1e
12分钟前
0
0
深入浅出Zabbix 3.0 -- 第一章 Zabbix 安装与配置

第一章 Zabbix 安装与配置 1.1 Zabbix 介绍 Zabbix是一个企业级的开源监控软件,可以监控IT基础架构的可用性和应用的性能,为用户提供集中管理、分布式监控的一站式(all in one)监控解决方...

osc_nvkeo9cj
12分钟前
10
0
PHP 实现抽奖逻辑

public static function get_rand($proArr) { $result = ''; //概率数组的总概率精度 $proSum = array_sum($proArr); //概率数组循环 forea......

chenhongjiang
12分钟前
0
0
struts2 上传 下载

东方部落: http://11144439.blog.51cto.com struts中上传文件功能小测试。这里jar是 2.5 版本。 项目结构图 废话不多说,直接代码。 2. web.xml配置 <?xml version="1.0" encoding="UTF-8......

osc_1qix3fyb
14分钟前
12
0
SVN管理系统安装及其操作

SVN管理系统安装及操作 防伪码:学习永远不晚! 前言: SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS、CVS,它采用了分支管理系统,它的设计目标就是取代CVS。互联网上...

osc_afifi2qt
15分钟前
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部