Django-4.2博客開發教程:使用第三方庫美化後臺頁面，豐富文章內容（七）

一、豐富文章內容

默認的輸入是這樣的

豐富編輯功能是這樣的

 

我要做到這些，對於一個新人來說根本不可能實現的，現在有高人做出來並開源分享了出來，其中一個叫DjangoUeditor，當然還有很多大家可以自行研究。

這個庫在github雖然開源但作者沒有維護，只停留到django1.x的版本兼容，大家可以pip install  DjangoUeditor 自行體驗。

我這裏有個基於別人的進行了維護版，https://github.com/lihongbin668/Django4Ueditor  

操作步驟：

1、從上面的鏈接下載庫，code》download zip。下載到本地任意目錄

2、安裝依賴 pip install six

然後到 .\Lib\site-packages 這個目錄下，會發現有一個 six.py 的文件，直接 copy 到 venv\Lib\site-packages\django\utils

3、解壓下載的庫並安裝

python setup.py install
4、修改項目的配置

settings.py裏註冊APP，在INSTALLED_APPS裏添加'DjangoUeditor'

INSTALLED_APPS = [
    # 'blog.apps.BlogConfig', #註冊APP應用
    'blog',
    #第三方應用
    'DjangoUeditor',
    #django自帶
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

myblog/urls.py裏添加url

from django.contrib import admin
from django.urls import path, include
from DjangoUeditor import urls

urlpatterns = [
    path('admin/', admin.site.urls),
    path('ueditor/', include('DjangoUeditor.urls')), #添加DjangoUeditor的URL
]

修改blog/models.py裏需要使用富文本編輯器渲染的字段

class Article(models.Model):
    ...
     # content = models.TextField() #原來的內容

    content = UEditorField('內容', width=800, height=500,
                        toolbars="full", imagePath="upimg/", filePath="upfile/",
                        upload_settings={"imageMaxSize": 1204000},
                        settings={}, command=None, blank=True
                        )
    ...

 圖片無法正常顯示解決：

 

 myblog/urls.py文件，在裏面輸入如下代碼：

from django.contrib import admin
from django.urls import path, include, re_path
from django.views.static import serve
from django.conf import settings
from DjangoUeditor import urls

urlpatterns = [
    path('admin/', admin.site.urls),
    path('ueditor/', include('DjangoUeditor.urls')), #添加DjangoUeditor的URL
    re_path('^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
]

 

 

二、美化管理後臺

美化管理後臺需要使用到另一個庫django-simpleui

pip3 install django-simpleui

1秒變後臺，在myblogs/settings.py 第3方應用添加庫就可以了 'simpleui',

INSTALLED_APPS = [
    # 'blog.apps.BlogConfig', #註冊APP應用
    'blog',
    #第三方應用
    'DjangoUeditor',
    'simpleui',
    #django自帶
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

 

默認的後臺是這樣的

美化後的是這樣的