Django簡單博客實戰（三）--- 接入富文本編輯ckeditor

Django接入富文本編輯ckeditor

後臺配置ckeditor

1. 安裝ckeditor

pip install django-ckeditor

2. 配置ckeditor

2.1 不包含圖片上傳功能

2.1.1 在settings.py中的INSTALLED_APPS添加ckeditor,並配置ckeditor指定數量工具欄

INSTALLED_APPS添加ckeditor

INSTALLED_APPS = [
    'simpleui',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blogger',
    'comment',
    'post',
    'ckeditor', # 添加該行
    # 'ckeditor_uploader',
]

配置ckeditor工具欄

CKEDITOR_CONFIGS = {
    # django-ckeditor默認使用default配置
    'default': {
        # 編輯器寬度自適應
        'width':'auto',
        'height':'250px',
        # tab鍵轉換空格數
        'tabSpaces': 4,
        # 工具欄風格
        'toolbar': 'Custom', # 指定數量工具欄
        # 'toolbar':'full', # 完整工具條

        # 自定義工具欄
        # 工具欄按鈕
        'toolbar_Custom': [
            # 表情 代碼塊
            ['Smiley', 'CodeSnippet'],
            # 字體風格
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            # 字體顏色
            ['TextColor', 'BGColor'],
            # 鏈接
            ['Link', 'Unlink'],
            # 列表
            ['NumberedList', 'BulletedList'],
            # 圖片
            ['Image', 'Link', 'Unlink'],
            # 最大化
            ['Maximize']
        ],
        # 加入代碼塊插件
        'extraPlugins': ','.join(['codesnippet','widget','lineutils',]),
    }
}

2.1.2 model.py文件中將TextField字段替換爲RichTextField字段

from django.db import models
from ckeditor.fields import RichTextField
# Create your models here.
class Blogger(models.Model):
    name = models.CharField('博主名',default='狼性書生',max_length=20)
    head_photo = models.ImageField('頭像', upload_to='blog_img',null=True,blank=True,default='/cover_img/default.jpg')
    blog_major = models.CharField('職業',default='程序猿',max_length=20)
	
    autograph = RichTextField('個性簽名',default='個性簽名') #將TextField字段替換爲RichTextField字段
    
   blog_email = models.EmailField('博主郵箱',default='[email protected]')

    def __str__(self):
        return self.name

class Link(models.Model):
    link_name = models.CharField("鏈接",max_length=50)
    blogger = models.ForeignKey('Blogger',on_delete=models.CASCADE,related_name='blogger_link')

    def __str__(self):
        return self.link_name

2.1.3 將model模型註冊到後臺,運行測試

from django.contrib import admin
from .models import Blogger,Link,Layout
from django.utils.safestring import mark_safe
# Register your models here.
admin.site.site_title="Mr Wolf Blog"
admin.site.site_header="Mr Wolf博客管理系統"

@admin.register(Blogger)
class BloggerAdmin(admin.ModelAdmin):
    list_display = ['id','name','image_data','blog_major','autograph','blog_email']
    list_editable = ['name','blog_major','blog_email']

    # 縮略圖，後臺展示頁顯示縮略圖
    def image_data(self,obj):
        return mark_safe(u'<img src="%s" width="100px" />' % obj.head_photo.url)
    image_data.short_description = u'頭像'

@admin.register(Link)
class LinkAdmin(admin.ModelAdmin):
    list_display = ['id','link_name','blogger']
    list_editable = ['link_name','blogger']

2.2 包含圖片上傳功能

2.2.1 在settings.py中INSTALLED_APPS添加ckeditor和ckeditor_uploader,並配置ckeditor工具欄和圖片上傳路徑

添加ckeditor和ckeditor_uploader

INSTALLED_APPS = [
    'simpleui',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blogger',
    'comment',
    'post',
    'ckeditor', # 添加該行
    'ckeditor_uploader', # 添加該行
]

配置ckeditor工具欄

CKEDITOR_CONFIGS = {
    # django-ckeditor默認使用default配置
    'default': {
        # 編輯器寬度自適應
        'width':'auto',
        'height':'250px',
        # tab鍵轉換空格數
        'tabSpaces': 4,
        # 工具欄風格
        'toolbar': 'Custom',
        # 'toolbar':'full', # 完整工具條

        # 自定義工具欄
        # 工具欄按鈕
        # 'toolbar_Custom': [
        #     # 表情 代碼塊
        #     ['Smiley', 'CodeSnippet'],
        #     # 字體風格
        #     ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
        #     # 字體顏色
        #     ['TextColor', 'BGColor'],
        #     # 鏈接
        #     ['Link', 'Unlink'],
        #     # 列表
        #     ['NumberedList', 'BulletedList'],
        #     # 圖片
        #     ['Image', 'Link', 'Unlink'],
        #     # 最大化
        #     ['Maximize']
        # ],
        # # 加入代碼塊插件
        'extraPlugins': ','.join(['codesnippet','prism','uploadimage','widget','lineutils',]),
    }
}

配置圖片上傳路徑

MEDIA_URL = '/media/'  # # 用於指定url路徑
MEDIA_ROOT = os.path.join(BASE_DIR, 'static', 'media')  # 用於指定上傳文件的存儲路徑

CKEDITOR_UPLOAD_PATH = 'upload/'  # 圖片將上傳到項目下的media/upload路徑下，圖片的url是 /media/upload/
CKEDITOR_IMAGE_BACKEND = 'pillow'  # 用於生成圖片縮略圖，在編輯器裏瀏覽上傳的圖片

2.2.2 配置根urls.py

from django.contrib import admin
from django.urls import path
from django.conf.urls import include,url
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'', include('ckeditor_uploader.urls')),  #配置該行
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)  #配置該行

2.2.3 將TextField字段替換爲RichTextUploadingField字段

import os
import time
import datetime
from django.db import models
# from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField
# Create your models here.

def modify_path(instance, filename):
    '''
    重定義封面保存路徑
    :param instance: self
    :param filename: 文件名
    :return: 新路徑
    '''
    ext = filename.split('.').pop()
    now_date = datetime.datetime.now().strftime('%Y%m%d')
    now_time = int(time.time())
    filename = '{0}{1}.{2}'.format(now_date, now_time, ext)
    return os.path.join('cover_img', now_date, filename) 

class Post(models.Model):
    '''
    文章模型
    '''
    title = models.CharField('標題',max_length=100,default='無標題名',null=True,blank=True)
    cover = models.ImageField('封面', upload_to=modify_path,null=True,blank=True,default='/cover_img/default.jpg')
    create_time = models.DateTimeField('創建時間',auto_now=True)
	
    content = RichTextUploadingField('文章內容',default='文章內容') # 將TextField字段替換爲RichTextUploadingField字段
    
    is_publish = models.BooleanField(default=False)
    is_comment = models.BooleanField(default=False)
    category = models.ForeignKey('Category',on_delete=models.CASCADE,related_name='post')

    def __str__(self):
        return self.title

    # 完善後臺數據顯示過長情況
    def short_detail(self):
        if len(str(self.content)) > 30:
            return '{}...'.format(str(self.content)[0:29])
        else:
            return str(self.content)
    short_detail.allow_tags = True
    short_detail.short_description = u'文章內容'

class Category(models.Model):
    post_category = models.CharField('文章類別',max_length=20,default='雜記')

    def __str__(self):
        return self.post_category

將model模型註冊到後臺,運行測試

from django.contrib import admin
from .models import Post,Category
from django.utils.safestring import mark_safe
# Register your models here.

@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    list_display = ['id','title','image_data','create_time','short_detail','is_publish','is_comment','category']
    list_editable = ['is_publish','is_comment','category']
    list_filter = ['title','create_time','is_publish','is_comment','category']
    # readonly_fields = ('image_data',)  # 必須加這行 否則訪問編輯頁面會報錯

    # 縮略圖顯示
    def image_data(self,obj):
        return mark_safe(u'<img src="%s" width="100px" />' % obj.cover.url)
    image_data.short_description = u'封面'

@admin.register(Category)
class CategoryAdmin(admin.ModelAdmin):
    list_display = ['id','post_category']
    list_editable = ['post_category']

3. 遷移後運行

富文本圖片自適應(兼容手機端)：在高級選項中配置：-ms-interpolation-mode:bicubic; float:left; width:100%

效果圖

代碼高亮參考以下文章

• https://www.jianshu.com/p/a14970431762