kindeditor圖片上傳功能

一个新手

發布： 2018-05-16 13:33:27

原創

4203 人瀏覽過

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 &#39;kindeditor-4.1.10/kindeditor-all-min.js&#39; %}"></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 拿到回應的圖片路徑後，透過
標籤的src屬性，顯示預覽圖片

Django中的程式碼實作：

from django.conf.urls import urlfrom app import views

urlpatterns = [
    url(r&#39;^upload/$&#39;, views.upload_file, name=&#39;upload_file&#39;),

    url(r&#39;^media/(?P<path>.*)$&#39;, serve, {&#39;document_root&#39;: settings.MEDIA_ROOT}),  # 配置media路由]

登入後複製

def upload_file(request):
    # 拿到文件，保存在指定路径
    print(request.FILES) # {&#39;imgFile&#39;: [<InMemoryUploadedFile: QQ图片20170523192846.jpg (image/jpeg)>]}
    imgFile = request.FILES.get(&#39;imgFile&#39;)  # 拿到文件对象，imgFile.name, 拿到文件名

    with open(&#39;app01/media/upload/img/&#39;+imgFile.name,&#39;wb&#39;)as f:   # with open 无法创建文件夹，需要自己创建
        for chunk in imgFile.chunks():
            f.write(chunk)    # 返回json响应
    response = {        
    &#39;error&#39;: 0,        &#39;url&#39;: &#39;/media/upload/img/&#39;+imgFile.name        # 客户端拿到路径，才能预览图片; media在setting中配置了别名，这里只写media，客户端就可以找到路径，前面不需要加/app
    }    return HttpResponse(json.dumps(response))

登入後複製

說明：