富文字編輯器Django ckeditor

剛開始學習django的時候，在後台編輯資料的時候，總是在想，功能是否太簡陋了點，只能做簡單的文字編輯，所以在這裡記錄乙個富文字編輯器django-ckeditor。

選擇標準：

具有基本的富文字編輯功能
可以上傳
可以檢視原始碼
有持續更新（維護）

pip install django-ckeditor

'ckeditor',

'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()

4.資料庫

python manage.py makemigrations

python manage.py migrate

點選選單欄的這個圖示，裡面沒有上傳的功能

現在我們來新增這個功能

1.安裝

pip install pillow

'ckeditor_uploader',

'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/
'

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)

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()

6.資料庫

python manage.py makemigrations

python manage.py migrate

我們選擇一張進行上傳，點選上傳

服務端接收到

最後在瀏覽器顯示

富文字編輯器

關於使用富文字編輯器的一些小坑 官網 1.專案 片 editor fail function xhr,editor,result custominsert function insertimg,result,editor this.editor.create this.editor.txt.html...

富文字編輯器

富文字編輯器，rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditorallowfilemanager 是否允許瀏覽伺服器已上傳...

富文字編輯器

富文字編輯器，rich text editor,簡稱 rte,它提供類似於 microsoft word 的編輯功能。常用的富文字編輯器 kindeditor ueditor ckeditor 在頁面中新增js 用於初始化kindeditor allowfilemanager 是否允許瀏覽伺服器已上...