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', { 
            width: '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="width: 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', { 
width: '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))

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/12453.html

KindEditor编辑器详解编程语言

相关推荐

发表回复