Django項目使用ckeditor(不使用admin)


效果圖:
在這里插入圖片描述

1.安裝django-ckeditor

pip install django-ckeditor
如果需要上傳圖片或者文件,還需要安裝pillow
pip install pillow

2.配置模型字段

如果編輯器需要上傳圖片或者文件,需要引入RichTextUploadingField,否則只需要引入RichTextField

from ckeditor_uploader.fields import RichTextUploadingField

class Activity(models.Model):
	desc = RichTextUploadingField(verbose_name="活動描述")

3.settings中配置

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full', #工具欄全部功能
        'height': 300, # 高度
        'width': 730, # 寬度
    },
}
CKEDITOR_UPLOAD_PATH = 'ckeditor/'  #上傳文件的目錄
CKEDITOR_IMAGE_BACKEND = 'pillow'	#pillow做為backend

4.form表單配置

這里只需要使用modelForm,不需要配置

from django import forms

from learntime.activity.models import Activity

class ActivityForm(forms.ModelForm):
    class Meta:
        fields = "__all__" #引入全部字段
        model = Activity

5.urls配置

以下是admin中配置的urls,如果在自己的項目中就不能這樣寫

urlpatterns = [
	...
    path('ckeditor/', include('ckeditor_uploader.ckeditor_urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

網上其他教程都是在admin中配置ckeditor,如果按照如上代碼可能會發現圖片上傳失敗,點進源碼可以看到,圖片上傳的成功條件為:django的用戶表is_staff為True,自己的項目中可能並沒有這樣設定。

urls源碼如下:

from __future__ import absolute_import

from django.conf.urls import url
from django.contrib.admin.views.decorators import staff_member_required
from django.views.decorators.cache import never_cache

from . import views

urlpatterns = [
    url(r'^upload/', staff_member_required(views.upload), name='ckeditor_upload'),
    url(r'^browse/', never_cache(staff_member_required(views.browse)), name='ckeditor_browse'),
]

staff_member_required為裝飾器,我們可以把它替換為login_required,即必須登錄之后才能上傳圖片。

修改后的代碼如下:
xxx.utils.ckeditor_urls.py

from __future__ import absolute_import

from django.conf.urls import url
from django.contrib.auth.decorators import login_required
from django.views.decorators.cache import never_cache

from ckeditor_uploader import views

urlpatterns = [
    url(r'^upload/', login_required(views.upload), name='ckeditor_upload'),
    url(r'^browse/', never_cache(login_required(views.browse)), name='ckeditor_browse'),
]

urls.py

path('ckeditor/', include('xxx.utils.ckeditor_urls')),

按照如上配置就能完美上傳圖片和文件了。

在這里插入圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM