Django配置-KindEditor

時間 2019-12-14

原文原文鏈接

KindEditor

官方文檔：點擊
具體使用方法：點擊
詳細參數：點擊
下載：點擊

1、文件夾說明

├── 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主題

2、實例

 
          # 配置文件： 
         
          # 與用戶上傳相關的配置 
         
          MEDIA_ROOT 
          = 
          os.path.join(BASE_DIR,  
          "media" 
          ) 
         
          MEDIA_URL  
          = 
          "/media/" 
         
          # 路由中: 
         
          from 
          django.urls  
          import 
          path, re_path 
         
          from 
          django.views.static  
          import 
          serve 
         
          from 
          django.conf  
          import 
          settings 
         
          from 
          app01  
          import 
          views 
         
          urlpatterns  
          = 
          [ 
         
          # media配置: 
         
          re_path(r 
          "media/(?P<path>.*)$" 
          , serve, { 
          "document_root" 
          : settings.MEDIA_ROOT}), 
         
          # 文本編輯器上傳圖片url 
         
          path( 
          'ke_upload/' 
          , views.ke_upload), 
         
          ] 
         
          # 模板中： 
         
          """ 
         
          <div class="form-group"> 
         
          <label for="content">內容 </label>  <!--<textarea name="content" cols="30" rows="10"></textarea>--> 
         
          {{ form.content }} <span>{{ form.content.errors.0 }}</span> 
         
          </div> 
         
          {% block js %} 
         
          <script src = "/static/js/jquery-3.2.1.min.js"> </script> 
         
          <script charset="utf-8" src="/static/plugins/kindeditor/kindeditor-min.js"></script> 
         
          <script charset="utf-8" src="/static/plugins/kindeditor/lang/zh_CN.js"></script> 
         
          <script> 
         
          // KindEditor 上傳的瞬間，幫你生成iframe+form進行僞Ajax操做 
         
          KindEditor.ready(function (K) { 
         
          window.editor = K.create('textarea[name="content"]', { 
         
          resizeType: 1, 
         
          allowPreviewEmoticons: true, 
         
          allowImageUpload: true, 
         
          items: [ 
         
          'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 
         
          'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 
         
          'insertunorderedlist', '|', 'emoticons', 'image', 'link'], 
         
          uploadJson: '/ke_upload/', 
         
          //filePostName:"upload_img",   //默認是imgFile 
         
          extraFileUploadParams:{ 
         
          "csrfmiddlewaretoken":"{{ csrf_token }}" 
         
          } 
         
          }); 
         
          }); 
         
          </script> 
         
          {% endblock %} 
         
          """ 
         
          # 視圖中： 
         
          from 
          django.shortcuts  
          import 
          render, redirect, HttpResponse 
         
          import 
          os 
         
          import 
          time 
         
          import 
          json 
         
          def 
          ke_upload(request): 
         
          file_obj  
          = 
          request.FILES.get( 
          'imgFile' 
          )   
          # 經過filePostName修改 
         
          # 上傳後面的參數kd用的是dir 
         
          # upload_img.html?dir=image  說明是圖片 
         
          # upload_img.html?dir=media  說明是視頻， 
         
          file_type  
          = 
          request.GET.get( 
          'dir' 
          ) 
         
          file_obj.name  
          = 
          "%s%s" 
          % 
          (time.time(), file_obj.name) 
         
          file_dir  
          = 
          'media%s%s' 
          % 
          (os.sep, file_type) 
         
          if 
          not 
          os.path.exists(file_dir): 
         
          os.makedirs(file_dir) 
         
          file_path  
          = 
          os.path.join( 
          "media" 
          , file_type, file_obj.name) 
         
          with  
          open 
          (file_path,  
          'wb' 
          ) as f: 
         
          for 
          line  
          in 
          file_obj: 
         
          f.write(line) 
         
          dic  
          = 
          { 
         
          'error' 
          :  
          0 
          , 
         
          'url' 
          :  
          '/media/%s/%s' 
          % 
          (file_type, file_obj.name), 
         
          'message' 
          :  
          '錯誤了...' 
         
          } 
         
          return 
          HttpResponse(json.dumps(dic))