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

使用

到官網(wǎng)下載 KindEditor 最新版本，解壓后將所有文件拷貝到項(xiàng)目的static文件夾下。注意，可以根據(jù)需要?jiǎng)h除以下目錄：

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

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

<label for="article_body">文章內(nèi)容</label> <textarea id="article_body" name="article_body"></textarea>

添加腳本，引入KindEditor JS文件，為指定標(biāo)簽創(chuàng)建富文本編輯器。這里主要說使用KindEditor 上傳圖片時(shí)的必要參數(shù)：

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

說明：

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

extraFileUploadParams參數(shù)用于提交csrf驗(yàn)證

圖片的上傳和預(yù)覽流程：

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

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

該url對(duì)應(yīng)的視圖函數(shù)保存圖片，并返回包含圖片服務(wù)器路徑的json響應(yīng)

KindEditor 拿到響應(yīng)的圖片路徑后，通過<img>標(biāo)簽的src屬性，顯示預(yù)覽圖片

Django中的代碼實(shí)現(xiàn)：

配置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路由 ]

定義保存圖片的視圖函數(shù)

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

說明：

request.FILES中拿到圖片對(duì)象

imgFile.name拿到文件名

必須返回包含error和url的json響應(yīng)

更多KindEditor 的使用，參考官網(wǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。