KindEditor是一款用Javascript編寫的開源在線HTML編輯器，主要用戶是讓用戶在網站上獲得可見即可得的編輯效果，開發人員可以用 KindEditor 把傳統的多行文本輸入框(textarea)替換為可視化的富文本輸入框

使用

到官網下載 KindEditor 最新版本，解壓后將所有文件拷貝到項目的static文件夾下。注意，可以根據需要刪除以下目錄：

• asp - ASP程序
• asp.net - ASP.NET程序
• php - PHP程序
• jsp - JSP程序
• examples - 演示文件
  
  

HTML模板中需要顯示富文本編輯器的位置添加<textarea>標簽：

<label for="article_body">文章內容</label> <textarea id="article_body" name="article_body"></textarea>

添加腳本，引入KindEditor JS文件，為指定標簽創建富文本編輯器。這里主要說使用KindEditor 上傳圖片時的必要參數：

<script src="{% static 'kindeditor-4.1.10/kindeditor-all-min.js' %}"></script> <script>var options = {resizeType: 0,uploadJson: "/upload/", //指定圖片上傳的url路徑，server端寫一個視圖來處理上傳的圖片extraFileUploadParams: {"csrfmiddlewaretoken": "{{ csrf_token }}"}};KindEditor.create("#article_body", options); //為指定元素創建富文本編輯器 </script>

說明：

圖片上傳要通過uploadJson參數指定上傳的url路徑

extraFileUploadParams參數用于提交csrf驗證

圖片的上傳和預覽流程：

在富文本編輯器中選擇上傳圖片

KindEditor 將圖片通過AJAX的方式上傳到服務器指定url

該url對應的視圖函數保存圖片，并返回包含圖片服務器路徑的json響應

KindEditor 拿到響應的圖片路徑后，通過<img>標簽的src屬性，顯示預覽圖片

Django中的代碼實現：

配置media（參考博客）并定義路由

from django.conf.urls import url from app import viewsurlpatterns = [url(r'^upload/$', views.upload_file, name='upload_file'),url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}), # 配置media路由 ]

定義保存圖片的視圖函數

def upload_file(request):# 拿到文件，保存在指定路徑print(request.FILES) # {'imgFile': [<InMemoryUploadedFile: QQ圖片20170523192846.jpg (image/jpeg)>]}imgFile = request.FILES.get('imgFile') # 拿到文件對象，imgFile.name, 拿到文件名with open('app01/media/upload/img/'+imgFile.name,'wb')as f: # with open 無法創建文件夾，需要自己創建for chunk in imgFile.chunks():f.write(chunk)# 返回json響應response = {'error': 0,'url': '/media/upload/img/'+imgFile.name# 客戶端拿到路徑，才能預覽圖片; media在setting中配置了別名，這里只寫media，客戶端就可以找到路徑，前面不需要加/app}return HttpResponse(json.dumps(response))

說明：

request.FILES中拿到圖片對象

imgFile.name拿到文件名

必須返回包含error和url的json響應

更多KindEditor 的使用，參考官網

總結

以上是生活随笔為你收集整理的kindeditor图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。