django-ckedit 在django專案中使用django-ckeditor
(轉載)
在django專案中使用django-ckeditor
安裝django-ckeditor
pip install django-ckeditor
安裝Pillow
Pillow是python的一個影象處理庫,django-ckeditor需要依賴該庫。最簡單的安裝方法,當然是使用pip,假設你裝過pip,可以直接執行以下命令安裝:
pip install pillow
配置你的django
要使安裝好的django-ckeditor生效,你需要對你的django應用進行一系列配置。
1、在你的settings.py檔案中,將ckeditor、ckeditor_uploader新增到INATALLED_APPS中。
2、在你的settings.py檔案中,新增CKEDITOR_UPLOAD_PATH配置項。例如,我的是:
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
CKEDITOR_UPLOAD_PATH = "article_images"
CHEDITOR_UPLOAD_PATH的作用是設定你通過ckeditor所上傳的檔案的存放目錄。需要注意的是,這是一個相對路徑,它相對與你設定的的MEDIA_ROOT。django-ckeditor預設使用django的後臺檔案儲存系統,這需要你設定好MEDIA_ROOT和MEDIA_URL,如何設定超出了本文的範圍,請自行檢視django的官方文件,請務必確保這兩個設定項是生效的,否則你將看不到你上傳的檔案。
比如,我上傳一張名為shiguang.gif的小圖片,該圖片將會被儲存到:
/my/django/app/root/media/article_images/
至此,你的ckeditor已經可以在django中正常使用了。
需要指出的是:在開發階段,這樣設定settings.py已經足夠了。但是,到了正式部署你的應用時,你需要設定好STATIC_ROOT和STATIC_URL,並執行manage.py collectstatic命令,該命令會將ckeditor相關的靜態資源拷貝到你的工程下。
3、在urls.py中增加ck的url配置:url(r'^ckeditor/', include('ckeditor_uploader.urls')),
如何應用ckeditor
django-ckeditor提供了兩個類:RichTextField和CKEditorWidget,分別用於模型和表單。內容型網站通常在後臺會有一個文章釋出和編輯的介面,如果你想讓該介面擁有一個富文字編輯器,只需按如下方式定義你的django模型:
from django.db import models
from ckeditor.fields import RichTextField
class Article(models.Model):
content = RichTextField('文章標題')
啟動應用看看,這時可以看到文章標題
輸入框顯示了富文字編輯框
但是怎麼可以用的工具那麼少???
別急,在settings目錄中增加如下配置即可
CKEDITOR_CONFIGS = {
'default': {
'toolbar': (
['div','Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button', 'ImageButton','HiddenField'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize','ShowBlocks','-','About', 'pbckcode'],
),
}
}
安裝django-ckeditor
pip install django-ckeditor
安裝Pillow
Pillow是python的一個影象處理庫,django-ckeditor需要依賴該庫。最簡單的安裝方法,當然是使用pip,假設你裝過pip,可以直接執行以下命令安裝:
pip install pillow
配置你的django
要使安裝好的django-ckeditor生效,你需要對你的django應用進行一系列配置。
1、在你的settings.py檔案中,將ckeditor、ckeditor_uploader新增到INATALLED_APPS中。
2、在你的settings.py檔案中,新增CKEDITOR_UPLOAD_PATH配置項。例如,我的是:
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
CKEDITOR_UPLOAD_PATH = "article_images"
CHEDITOR_UPLOAD_PATH的作用是設定你通過ckeditor所上傳的檔案的存放目錄。需要注意的是,這是一個相對路徑,它相對與你設定的的MEDIA_ROOT。django-ckeditor預設使用django的後臺檔案儲存系統,這需要你設定好MEDIA_ROOT和MEDIA_URL,如何設定超出了本文的範圍,請自行檢視django的官方文件,請務必確保這兩個設定項是生效的,否則你將看不到你上傳的檔案。
比如,我上傳一張名為shiguang.gif的小圖片,該圖片將會被儲存到:
/my/django/app/root/media/article_images/
至此,你的ckeditor已經可以在django中正常使用了。
需要指出的是:在開發階段,這樣設定settings.py已經足夠了。但是,到了正式部署你的應用時,你需要設定好STATIC_ROOT和STATIC_URL,並執行manage.py collectstatic命令,該命令會將ckeditor相關的靜態資源拷貝到你的工程下。
3、在urls.py中增加ck的url配置:url(r'^ckeditor/', include('ckeditor_uploader.urls')),
如何應用ckeditor
django-ckeditor提供了兩個類:RichTextField和CKEditorWidget,分別用於模型和表單。內容型網站通常在後臺會有一個文章釋出和編輯的介面,如果你想讓該介面擁有一個富文字編輯器,只需按如下方式定義你的django模型:
from django.db import models
from ckeditor.fields import RichTextField
class Article(models.Model):
content = RichTextField('文章標題')
啟動應用看看,這時可以看到文章標題
輸入框顯示了富文字編輯框
但是怎麼可以用的工具那麼少???
別急,在settings目錄中增加如下配置即可
CKEDITOR_CONFIGS = {
'default': {
'toolbar': (
['div','Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button', 'ImageButton','HiddenField'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize','ShowBlocks','-','About', 'pbckcode'],
),
}
}