富文本編輯器Django-ckeditor

富文本編輯器Django-ckeditor

 

前言

剛開始學習django的時候，在後臺編輯數據的時候，老是在想，功能是否太簡陋了點，只能作簡單的文本編輯，因此在這裏記錄一個富文本編輯器Django-ckeditor。

選擇標準：
具備基本的富文本編輯功能
能夠上傳圖片
能夠查看源碼
有持續更新（維護）

　　

 

使用

1.安裝jango-ckeditor

pip install django-ckeditor

　　

 

 2.註冊ckeditor應用

 在settings.py文件的INSTALLED_APPS下加入

 'ckeditor',

INSTALLED_APPS = [
    # ...
    'ckeditor',
]

View Code

 

 

 

3.配置model

在model.py文件下

包導入
1.from ckeditor.fields import RichTextField

將數據顯示字段替換爲RichTextField
2.content=RichTextField()

 

其中，title是博客標題，content是博客內容。博客內容須要富文本編輯，則改爲以下：
from django.db import models
from ckeditor.fields import RichTextField
 
 
class Blog(models.Model):
    title = models.CharField(max_length=50)
    content = RichTextField()

View Code

 

 

4.數據庫

python manage.py makemigrations
python manage.py migrate

　　

 

 

添加文件上傳功能

 

一些經常使用的功能咱們能夠在菜單欄使用，可是圖片上傳功能的沒有的，咱們還須要配置

點擊菜單欄的圖片這個圖標，裏面沒有圖片上傳的功能

 

 如今咱們來添加這個功能

 

1.安裝

pip install pillow

　　

2.註冊應用(配置app)

'ckeditor_uploader',

INSTALLED_APPS = [
    # ...
    'ckeditor',
    'ckeditor_uploader',
]

View Code

 

3.配置settings

1.先在項目根目錄下建立media目錄

 

2.配置上傳路徑、設置文件上傳靜態目錄
MEDIA_URL="/media/"
MEDIA_ROOT=os.path.join(BASE_DIR, 'media')
CKEDITOR_UPLOAD_PATH="upload/"
#配置上傳的路徑：
#當文件第一次上傳到服務器，會自動在media目錄下建立一個文件夾upload用來保存文件

　　

使用上傳功能，須要設置上傳位置。該文件是上傳到media目錄，因此也須要設置media。打開settings.py添加以下設置：
MEDIA_URL = '/media/'
# 放在django項目根目錄，同時也須要建立media文件夾
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
 
CKEDITOR_UPLOAD_PATH = 'upload/'

View Code

 

 

4.配置url

from django.conf import settings
from.conf.urls.static import static
from django.urls import include,path

path('ckeditor',include('ckeditor_uploader.urls'))

urlpatterns +=static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

　　

 5.配置model

from ckeditor_uploader.fields import RichTextUploadingField
把數據字段改爲RichTextUploadingField

from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField
 
 
class Blog(models.Model):
    title = models.CharField(max_length=50)
    content = RichTextUploadingField()

View Code

 

 

　

6.數據庫

python manage.py makemigrations
python manage.py migrate

　

 

如今就有圖片上傳的功能　

 

 

 

咱們選擇一張圖片進行上傳，點擊上傳 

 

 服務端接收到圖片

 

 

最後在瀏覽器顯示圖片