1. 程式人生 > >Django如何新增富文字編輯器ckeditor?

Django如何新增富文字編輯器ckeditor?

Django自帶的TextField文字編輯器太過簡單,就是一張白紙。最近做了個部落格,打算新增免費而又功能強大的富文字編輯器ckeditor。這樣使用者在寫部落格時就可以在正文裡上傳圖片或直接寫html程式碼了。網上看了些教程,覺得下面這篇文章不錯。小編我已在Django 2.0下驗證成功,所以推薦給大家。用一句話來說:新增過程非常順利,效果出奇的好。

1.通過PIP安裝django-ckeditor

1pip install django-ckeditor

2.將‘ckeditor’和'ckeditor_uploader'加入到settings.py中的INSTALLED_APPS中

 Django大咖之路備註

ckeditor不允許使用者上傳影象和其它檔案,只能編輯文字。如果你希望使用者能直接上傳文字,需要把ckeditor_uploader也加上去。

3.由於djang-ckeditor在ckeditor-init.js檔案中使用了JQuery,所以要在settings.py中設定CKEDITOR_JQUERY_URL來指定JQuery庫的路徑,例如:

1CKEDITOR_JQUERY_URL ='https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'


4. 先設定STATIC_ROOT,執行
python manage.py collectstatic, 會將CKEditor需要的媒體下載到STATIC_ROOT指定的路徑中。

STATIC_ROOT = os.path.join(BASE_DIR,'static/')

Django大咖之路備註假如你的專案mysite,app是blog。你需要在mysite檔案裡新建了個static資料夾。在下載前你需要先設定STATIC_ROOT, 下載完成後,你需要刪掉它。最後mysite/setting.py檔案應該是這樣子的。

CKEDITOR_JQUERY_URL ='https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'
CKEDITOR_IMAGE_BACKEND = "pillow"
CKEDITOR_UPLOAD_PATH = "uploads/"

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"), ]

# specify media root for user uploaded files, i.e, upload_to filed for ImageField or FileField.
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

 5 在models.py裡可按如下方式使用。field欄位改為RichTextField即可。

from django.db import models
from ckeditor.fields import RichTextField
class Blog(models.Model):
    title = models.CharField(max_length=50,verbose_name="標題")
    body = RichTextField(blank=True,null=True,verbose_name="內容")    def __unicode__(self):        
   return self.name

實際展示效果如下,還是非常美觀的。

如果你想使用者通過ckeditor上傳檔案,請按如下指示操作。

1.在settings.py中的INSTALLED_APPS中新增ckeditor_uploader

2.CKEditor使用Django的儲存API,預設使用Django的檔案儲存,會用到MEDIA_ROOT和MEDIA_URL,需要在settings.py中定義,此外還可以指定CKEDITOR_UPLOAD_PATH,它位於MEDIA_ROOT下:

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media/') CKEDITOR_UPLOAD_PATH = 'uploads/'

3.在專案的urls.py中新增CKEditor的URL對映

url(r'^ckeditor/', include('ckeditor_uploader.urls')),

如果不加,可能會出現以下錯誤:

4(可選項) 在settings.py中加入CKEDITOR_IMAGE_BACKEND ,使能thumbnails,例如:

CKEDITOR_IMAGE_BACKEND = "pillow"
from ckeditor_uploader.fields import RichTextUploadingField
class Post(models.Model):
    content = RichTextUploadingField()

Django-ckeditor英文說明: https://github.com/django-ckeditor/django-ckeditor

中文原文連結: http://www.cnblogs.com/hupeng1234/p/6639122.html

歡迎關注我們。