python 文本编辑器(KindEditord)
1、下载
- 官网下载：http://kindeditor.net/down.php
- 本地下载：http://files.cnblogs.com/files/wupeiqi/kindeditor_a5.zip
2、文件夹说明
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
3、基本使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
4、详细参数
http://kindeditor.net/docs/option.html
5、上传文件本质：上传图片时,点击上传 会默认帮你生成ifrem和form标签,然后在form标签里生成一个image标签，以Ajax方式发送到后台(伪Ajax)
CONIENT = ""
def test(request):
if request.method == "GET":
return render(request,"test.html")
else:
content = request.POST.get("content")
global CONIENT
CONIENT = content
print(content)
return HttpResponse("...")
def see(request):
return render(request,"see.html",{"con":CONIENT})
import os
def upload_img(request):
#在之后可以根据获取到的dir判断是视频还是文件，这里没有用到
type_obj = request.POST.get("dir")
print(request.POST, request.FILES)
file_obj = request.FILES.get("imgFile")
file_path = os.path.join("static/images/",file_obj.name)
with open(file_path,"wb") as f:
for chunk in file_obj.chunks():
f.write(chunk)
#返回前端,可以预览
dic = {
‘error‘: 0,
‘url‘: "/" + file_path,
‘message‘: ‘错误了...‘
}
import json
return HttpResponse(json.dumps(dic))
Views
urlpatterns = [
#上传图片，写文章
url(r‘^test/‘, views.test),
#查看写的文章
url(r‘^see/‘, views.see),
#上传图 视频 文件
url(r‘^upload_img.html‘, views.upload_img),
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="POST" action="/test/">
{% csrf_token %}
<div>
<div>文章内容</div>
<div>
<textarea id="id1" name="content"></textarea>
</div>
</div>
<input type="submit" value="提交">
</form>
<script src="/static/css/kindeditor-4.1.10/kindeditor-all.js"></script>
<script>
KindEditor.create("#id1",{
width:"700px",
height:"800px",
{# //items:[‘source‘, ‘|‘, ‘undo‘, ‘redo‘, ‘|‘, ‘preview‘, ‘print‘, ‘template‘, ‘code‘, ‘cut‘, ‘copy‘, ‘paste‘,#}
// ‘plainpaste‘, ‘wordpaste‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘,
// ‘justifyfull‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘indent‘, ‘outdent‘, ‘subscript‘,
// ‘superscript‘, ‘clearhtml‘, ‘quickformat‘],
//noDisableItems:[‘source‘, ‘|‘, ‘undo‘], //保留某些item
//designMode:false //其它注释
//resizeType 改变窗口大小
uploadJson:"/upload_img.html", //上传文件
extraFileUploadParams:{ //上传文件时携带token
"csrfmiddlewaretoken":"{{ csrf_token }}"
}
})
</script>
</body>
</html>
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{{ con | safe }}
</body>
</html>
see.html