1、进入官网
2、下载
- 官网下载：http://kindeditor.net/down.php
- 本地下载：http://files.cnblogs.com/files/wupeiqi/kindeditor_a5.zip
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、上传文件示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$Title$</title> </head> <body> <h3>发布文章</h3> <form action="/background/{{ site }}/create_article.html" method="POST"> {% csrf_token %} 文章标题<input type="text"> <textarea name="content" id="i1" cols="30" rows="10"></textarea> <input type="submit" value="提交" style="margin-left: 35%"> </form> <script src="/static/kindeditor-4.1.10/kindeditor-all.js"></script> <script> // KindEditor 上传的瞬间，帮你生成iframe+form进行伪Ajax操作 KindEditor.create('#i1',{ '1000px', height:'500px', resizeType:2, // 默认是否可以拖动改变高度和宽带，0,1,2，其中默认是2，可以拖动改变宽度和高度。 uploadJson:'/upload_img.html', // 上传文件位置，注意不能写目录/static/files...类似这种，识别不了。要写url // 注意：上传文件时，是以POST请求提交的，但是要写上{% csrf_token %}，上面表单中写的上传文件时没法用到，要配置 extraFileUploadParams:{'csrfmiddlewaretoken':"{{ csrf_token }}"} }) </script> </body> </html>
CONTENT='' def create_article(request,site): from app01.form import ArticleForm if request.method == 'GET': obj = ArticleForm() return render(request,'creat_article.html',{'site':site}) else: obj = ArticleForm(request.POST) if obj.is_valid(): content = obj.cleaned_data['content'] global CONTENT #这里记得要设置全局变量 CONTENT = content return HttpResponse('上传成功') # 查看文章内容，只是简单的 def see(request): return render(request,'see.html',{'CONTENT':CONTENT}) #文件的上传 def upload_img(request): print(request.FILES,request.POST) obj_file = request.FILES.get('imgFile') # 根据request.FILES得出的字典的key值是imgFile upload_type =request.GET.get('dir') print(upload_type) # image # 需要补上代码，进行判断，当上传文件类型为 image 时放在一个目录，当上传文件类型为其他时放在一个目录，便于管理 import os file_path=os.path.join('static/imgs',obj_file.name) with open(file_path,'wb') as f: for chunk in obj_file.chunks(): f.write(chunk) #还需要补充的代码是将数据更新到数据库中 # 上面只实现了上传，dic 默认的写法，并且要返回给前端，才能实现预览。 dic={ 'error':0, 'url': '/'+ file_path, 'message':'出错了....' } import json return HttpResponse(json.dumps(dic))
7、XSS过滤特殊标签
处理依赖
pip3 install beautifulsoup4
具体XSS模块的封装参考：http://www.cnblogs.com/xuyaping/p/7218132.html