1. 程式人生 > 程式設計 >Python ckeditor富文字編輯器程式碼例項解析

Python ckeditor富文字編輯器程式碼例項解析

1.安裝第三方模組包

pip install django-ckeditor

2.新增應用

INSTALLED_APPS = [
  ...
  'ckeditor',# 富文字編輯器
  'ckeditor_uploader',# 富文字編輯器上傳圖片模組
  ...
]

3. 新增CKEditor設定

# 富文字編輯器ckeditor配置
CKEDITOR_CONFIGS = {
  'default': {
    'toolbar': 'full',# 工具條功能
    'height': 300,# 編輯器高度
    # 'width': 300,# 編輯器寬
  },}
CKEDITOR_UPLOAD_PATH = '' # 上傳圖片儲存路徑,留空則呼叫django的檔案上傳功能

4. 新增ckeditor路由

在總路由中新增

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

5. 為模型類新增欄位

ckeditor提供了兩種型別的Django模型類欄位

  • - `ckeditor.fields.RichTextField` 不支援上傳檔案的富文字欄位
  • - `ckeditor_uploader.fields.RichTextUploadingField` 支援上傳檔案的富文字欄位\

6.修改course/models.py裡面的欄位資訊,記得要重新資料遷移

from ckeditor_uploader.fields import RichTextUploadingField
class Course(models.Model):
  """
  專題課程
  """
  ...
  # 使用這個欄位的原因
  # brief = models.TextField(verbose_name="詳情介紹",null=True,blank=True)
  brief = RichTextUploadingField(verbose_name="詳情介紹",blank=True)
#使用富文字編輯提供的內容

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。