編輯器KindEditor的使用
阿新 • • 發佈：2017-12-07
還需 see ref load 根據 ocs url win django 
1.具體使用方法看點這裏
2.下載點這裏
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、實例
一:將插件放入自己的項目中
二.在前端頁面中導入
三.在script中寫入下面代碼
註意:#article_content一定要和文本域的id一樣
KindEditor.ready(function (K) { window.editor = K.create(‘#article_content‘, { width: ‘1100px‘, height: ‘400px‘, extraFileUploadParams: { csrfmiddlewaretoken: $("[name=‘csrfmiddlewaretoken‘]").val() }, uploadJson: "/backManage/uploadFile/"//上傳文件的時候用,記得csrf_token }); });
四、詳細參數
http://kindeditor.net/docs/option.html
上傳文件:
#上傳文件 def uploadFile(request): print(request.POST) print(request.FILES,"--------------") file_obj=request.FILES.get("imgFile") filename=file_obj.name path=os.path.join(settings.MEDIA_ROOT,"article_uploads",filename) with open(path,"wb")as f: for i in file_obj: f.write(i) response = { "error": 0, "url": "/media/article_uploads/" + filename + "/" } return HttpResponse(json.dumps(response))
基本使用
<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>
上傳文件示例
<!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‘,{ width:‘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> creat_articlehtml
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))
app01/views
views
附加東西
配置media
1.setting中
# media 配置 MEDIA_ROOT = os.path.join(BASE_DIR, "app01", "media", "uploads") MEDIA_URL = "/media/"
2.urls中
#media配置 from django.conf import settings from django.views.static import serve url(r‘^media/(?P<path>.*)$‘, serve, {‘document_root‘: settings.MEDIA_ROOT}),
3項目中創建media文件夾
具體參考這裏面的 blog項目
編輯器KindEditor的使用