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

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

1、首先我們先下載DjangoUeditor包。點(diǎn)擊下面的鏈接進(jìn)行下載！下載完成然后解壓到項(xiàng)目根目錄里。

DjangoUeditor.zip

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

myblog/settings.py

INSTALLED_APPS = ['django.contrib.admin',....'DjangoUeditor', #注冊(cè)APP應(yīng)用 ]

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

myblog/urls.py

from django.urls import path, include #留意上面這行比原來多了一個(gè)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 #頭部增加這行代碼導(dǎo)入U(xiǎn)EditorFieldbody = UEditorField('內(nèi)容', width=800, height=500, toolbars="full", imagePath="upimg/", filePath="upfile/",upload_settings={"imageMaxSize": 1204000},settings={}, command=None, blank=True)

留意里面的imagePath=“upimg/”, filePath=“upfile/” 這兩個(gè)是圖片和文件上傳的路徑，我們上傳文件，會(huì)自動(dòng)上傳到項(xiàng)目根目錄media文件夾下對(duì)應(yīng)的upimg和upfile目錄里，這個(gè)目錄名可以自行定義。有的人問，為什么會(huì)上傳到media目錄里去呢？那是因?yàn)橹拔覀冊(cè)诨A(chǔ)配置文章里，設(shè)置了上傳文件目錄media。

上面步驟完成后，我們啟動(dòng)項(xiàng)目，進(jìn)入文章發(fā)布頁面。提示出錯(cuò)：

render() got an unexpected keyword argument 'renderer'

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

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

我這里使用的是最新版本的Django2.1.1所以報(bào)錯(cuò)，解決辦法很簡(jiǎn)單。打開這個(gè)文件的93行，注釋這行即可。

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

留意，如果我們?cè)诟晃谋揪庉嬈骼?#xff0c;上傳圖片，在編輯器內(nèi)容里不顯示上傳的圖片。那我們還需要進(jìn)行如下設(shè)置，打開myblog/urls.py文件，在里面輸入如下代碼：

myblog/urls.py

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

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

參考鏈接：Django博客開發(fā)教程:使用富文本編輯器添加數(shù)據(jù)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。