2.5集成富文本編輯器

1. 導入模塊 

   pip install django-ckeditor

    

2. 註冊應用

   INSTALLED_APPS = [
       ...
       'ckeditor',  # 富文本編輯器
       'ckeditor_uploader',  # 富文本編輯器上傳圖片模塊
       ...
   ]

    

3.  添加配置

   # 富文本編輯器ckeditor配置
   CKEDITOR_CONFIGS = {
       'default': {
           'toolbar': 'full',  # 工具條功能
           'height': 300,  # 編輯器高度
           # 'width': 300,  # 編輯器寬
       },
   }
   CKEDITOR_UPLOAD_PATH = ''  # 上傳圖片保存路徑，使用了FastDFS，所以此處設爲''

    

4. 添加路由

   # 總路由處添加
   url(r'^ckeditor/', include('ckeditor_uploader.urls')),

    

5. 給商品模型類(SPU)添加需要富文本的三個字段

   from ckeditor.fields import RichTextField
   from ckeditor_uploader.fields import RichTextUploadingField
   
   class Goods(BaseModel):
       """
       商品SPU
       """
       ...
       desc_detail = RichTextUploadingField(default='', verbose_name='詳細介紹')
       desc_pack = RichTextField(default='', verbose_name='包裝信息')
       desc_service = RichTextUploadingField(default='', verbose_name='售後服務')

    

6. 解決IndexError: list index out of range問題
   1. 原因：通過Django上傳的圖片保存到了FastDFS中，而保存在FastDFS中的文件名沒有後綴名，ckeditor在處理上傳後的文件名按照有後綴名來處理，所以會出現bug錯誤。
   2. 解決方法
      1. 找到虛擬環境目錄中的ckeditor_uploader/views.py文件 如：

         ~/.virtualenvs/md/lib/python3.5/site-packages/ckeditor_uploader/views.py

          

      2. 做以下更改

         saved_path = self._save_file(request, uploaded_file)
                 if len(str(saved_path).split('.')) > 1:  # 在此處添加一個判斷
                     if(str(saved_path).split('.')[1].lower() != 'gif'):
                         self._create_thumbnail_if_needed(backend, saved_path)