在Django admin后臺添加數據的時候，文章內容文本框想發布一篇圖文并茂的文章需就得手寫Html代碼，這十分吃力，也沒法上傳圖片和文件。這顯然不是我等高大上程序猿想要的。

為提升效率，我們可以使用富文本編輯器添加數據。支持Django的富文本編輯器很多，這里我推薦使用DjangoUeditor，Ueditor是百度開發的一個富文本編輯器，功能強大。下面教大家安裝如何使用DjangoUeditor。

1、首先我們先下載DjangoUeditor包。點擊下面的鏈接進行下載！下載完成然后解壓到項目根目錄里。

DjangoUeditor.zip

2、settings.py里注冊APP，在INSTALLED_APPS里添加’DjangoUeditor’。

myblog/settings.py

INSTALLED_APPS = ['django.contrib.admin',....'DjangoUeditor', #注冊APP應用 ]

3、myblog/urls.py里添加url。

myblog/urls.py

from django.urls import path, include #留意上面這行比原來多了一個includeurlpatterns = [path('admin/', admin.site.urls),path('', views.hello),path('ueditor/', include('DjangoUeditor.urls')), #添加DjangoUeditor的URL ]

4、修改blog/models.py里需要使用富文本編輯器渲染的字段。這里面我們要修改的是Article表里的body字段。

把原來的：

blog/models.py

body = models.TextField()

修改成：

blog/models.py

from DjangoUeditor.models import UEditorField #頭部增加這行代碼導入UEditorFieldbody = UEditorField('內容', width=800, height=500, toolbars="full", imagePath="upimg/", filePath="upfile/",upload_settings={"imageMaxSize": 1204000},settings={}, command=None, blank=True)

留意里面的imagePath=“upimg/”, filePath=“upfile/” 這兩個是圖片和文件上傳的路徑，我們上傳文件，會自動上傳到項目根目錄media文件夾下對應的upimg和upfile目錄里，這個目錄名可以自行定義。有的人問，為什么會上傳到media目錄里去呢？那是因為之前我們在基礎配置文章里，設置了上傳文件目錄media。

上面步驟完成后，我們啟動項目，進入文章發布頁面。提示出錯：

render() got an unexpected keyword argument 'renderer'

錯誤頁面上有提示，出錯的地方是下面文件的93行。

F:\course\myblog\myblogvenv\lib\site-packages\django\forms\boundfield.py in as_widget, line 93

我這里使用的是最新版本的Django2.1.1所以報錯，解決辦法很簡單。打開這個文件的93行，注釋這行即可。

修改成之后，重新刷新頁面，就可以看到我們的富文本編輯器正常顯示。

留意，如果我們在富文本編輯器里，上傳圖片，在編輯器內容里不顯示上傳的圖片。那我們還需要進行如下設置，打開myblog/urls.py文件，在里面輸入如下代碼：

myblog/urls.py

from django.urls import path, include, re_path #上面這行多加了一個re_path from django.views.static import serve #導入靜態文件模塊 from django.conf import settings #導入配置文件里的文件上傳配置urlpatterns = [path('admin/', admin.site.urls),....re_path('^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),#增加此行 ]

設置好了之后，圖片就會正常顯示。這樣我們就可以用DjangoUeditor富文本編輯器發布圖文并茂的文章了。

參考鏈接：Django博客開發教程:使用富文本編輯器添加數據

總結

以上是生活随笔為你收集整理的Django 3.2.5博客开发教程:使用富文本编辑器添加数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。