一、豐富文章內容
默認的輸入是這樣的
豐富編輯功能是這樣的
我要做到這些,對於一個新人來說根本不可能實現的,現在有高人做出來並開源分享了出來,其中一個叫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', ]
默認的後臺是這樣的
美化後的是這樣的