Django集成富文本編輯器summernote的實(shí)現(xiàn)步驟
提到Django的富文本編輯器，大家一定會(huì)想到ckeditor和tinyMCE。其實(shí)還是有一個(gè)富文本編輯器同樣優(yōu)秀，它就是summernote，個(gè)人認(rèn)為功能上不遜于ckeditor，比tinyMCE更強(qiáng)大。Summernote 是一個(gè)簡(jiǎn)單靈活的所見即所得的 HTML 富文本編輯器,基于 jQuery 和 Bootstrap 構(gòu)建,支持圖片上傳,提供了大量可定制的選項(xiàng)。
展示效果如下所示：
第一步 安裝django-summernote
首先通過pip安裝django-summernote，建議安裝在Django項(xiàng)目所在的虛擬環(huán)境里。如果你要上傳圖片，還需要安裝pillow這個(gè)圖片庫(kù)。
pip install django-summernote pip install pillow # 上傳圖片時(shí)需要
接著將其加入到INSTALLED_APPS里去，如下所示：
INSTALLED_APPS = [
...
'django_summernote', # 注意下劃線
]
然后將django_summernote.urls 加入到項(xiàng)目的 urls.py
from django.urls import include
# ...
urlpatterns = [
...
path('summernote/', include('django_summernote.urls')),
...
]
如果你需要上傳圖片，還需要在settings.py中設(shè)置MEDIA相關(guān)選項(xiàng),如下所示。如果你Django的版本是3.x的，你還需設(shè)置X_FRAME_OPTIONS選項(xiàng)。
MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media/') # Django 3.X用戶還需增加如下配置 X_FRAME_OPTIONS = 'SAMEORIGIN'
如果你在本地開發(fā)測(cè)試環(huán)境debug=True, 你還需要使用django自帶static靜態(tài)文件服務(wù)器才能正確顯示上傳的圖片。修改項(xiàng)目的urls.py, 添加如下代碼：
from django.conf import settings
from django.conf.urls.static import static
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
第二步 使用django-summernote
你可以在Django自帶管理后臺(tái)admin中使用django-summernote, 也可以在自己的表單中使用django-summernote。
admin中使用
from django_summernote.admin import SummernoteModelAdmin
from .models import Post
class PostAdmin(SummernoteModelAdmin):
summernote_fields = ('content',)
admin.site.register(Post, PostAdmin)
展示效果如下所示：
表單中使用
如果你使用普通表單，只需要設(shè)置富文本顯示字段的widget即可，如下所示：
from django_summernote.widgets import SummernoteWidget, SummernoteInplaceWidget
# Apply summernote to specific fields.
class PostForm(forms.Form):
content = forms.CharField(widget=SummernoteWidget()) # instead of forms.Textarea
# 如果你已使用django-crispy-forms, 請(qǐng)使用
class PostForm(forms.Form):
content = forms.CharField(widget=SummernoteInplaceWidget())
如果你使用ModelForm, 可以通過如下方式設(shè)置widget。
class PostForm(forms.ModelForm):
class Meta:
model = Post
widgets = {
'content': SummernoteWidget(),
}
注意：通過表單提交的內(nèi)容都是帶html標(biāo)簽的，需正確顯示文本，需要使用safe模板標(biāo)簽。
{{ content|safe }}
由于SummernoteWidget對(duì)用戶提交的數(shù)據(jù)不做任何轉(zhuǎn)義，所以存在外部用戶通過表單注入惡意腳本的風(fēng)險(xiǎn)，小編并不建議使用。在表單中使用django-summernote更好的方式是使用SummernoteTextFormField和SummernoteTextField，它們會(huì)對(duì)所有有害的標(biāo)簽進(jìn)行轉(zhuǎn)義。使用方式如下所示：
第三步 測(cè)試效果
Djangos-summernote不僅可以上傳圖片，還可以嵌入視頻哦，親測(cè)成功！
第四步 常規(guī)配置
常用設(shè)置選項(xiàng)如下所示，可以滿足大部分項(xiàng)目需求，可以直接copy使用。
SUMMERNOTE_CONFIG = {
'iframe': True,
# 如果你本身已使用Bootstrap/jQuery主題
# 'iframe': False,
'summernote': {
# As an example, using Summernote Air-mode
'airMode': False,
# 編輯窗口 size
'width': '100%',
'height': '450',
# 語言設(shè)置
'lang': None,
# 工具欄圖標(biāo)
# https://summernote.org/deep-dive/#custom-toolbar-popover
'toolbar': [
['style', ['style',]],
['font', ['bold', 'underline', 'clear']],
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['redo', 'undo', 'fullscreen', 'codeview',]],
],
},
# 上傳圖片需要用戶先登錄.
'attachment_require_authentication': True,
# Set `upload_to` function for attachments.
# 'attachment_upload_to': my_custom_upload_to_func(),
# Set custom storage class for attachments.
# 'attachment_storage_class': 'my.custom.storage.class.name',
# You can completely disable the attachment feature.
'disable_attachment': False,
# Set to `True` to return attachment paths in absolute URIs.
'attachment_absolute_uri': False,
# test_func in summernote upload view. (Allow upload images only when user passes the test)
# https://docs.djangoproject.com/en/2.2/topics/auth/default/#django.contrib.auth.mixins.UserPassesTestMixin
# ```
# def example_test_func(request):
# return request.user.groups.filter(name='group_name').exists()
# ```
# 'test_func_upload_view': example_test_func,
# 懶加載
'lazy': True,
}
以上就是Django集成富文本編輯器summernote的實(shí)現(xiàn)步驟的詳細(xì)內(nèi)容，更多關(guān)于Django集成富文本編輯器summernote的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
字典是Python中的一種數(shù)據(jù)類型,它是一個(gè)無序的鍵值對(duì)集合,在實(shí)際的編程中,我們經(jīng)常需要?jiǎng)h除字典中的某個(gè)鍵值對(duì),本文將從多個(gè)角度分析Python刪除字典中的某個(gè)key的方法,需要的朋友可以參考下2024-10-10
Python壓縮模塊zipfile實(shí)現(xiàn)原理及用法解析
這篇文章主要介紹了Python壓縮模塊zipfile實(shí)現(xiàn)原理及用法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
基于Python OpenCV實(shí)現(xiàn)圖像的覆蓋
本文將基于Python、OpenCV和Numpy實(shí)現(xiàn)圖像的覆蓋，即小圖像覆蓋在大圖像上。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-02-02
今天小編就為大家分享一篇Python PIL圖片添加字體的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-08-08
Pandas?DataFrame.drop()刪除數(shù)據(jù)的方法實(shí)例
pandas作為數(shù)據(jù)分析強(qiáng)大的庫(kù),是基于numpy數(shù)組構(gòu)建的,專門用來處理表格和混雜的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Pandas?DataFrame.drop()刪除數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-07-07
Python Numpy學(xué)習(xí)之索引及切片的使用方法
數(shù)組中的元素可以通過索引以及切片的手段進(jìn)行訪問或者修改，和列表的切片操作一樣。本文將詳細(xì)為大家介紹一下Python中的科學(xué)計(jì)算庫(kù)-Numpy的索引及切片的使用方法2022-01-01
本文主要介紹了python使用opencv實(shí)現(xiàn)人臉識(shí)別的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
Python利用keras接口實(shí)現(xiàn)深度神經(jīng)網(wǎng)絡(luò)回歸
這篇文章主要為大家詳細(xì)介紹了基于Python語言中TensorFlow的Keras接口，實(shí)現(xiàn)深度神經(jīng)網(wǎng)絡(luò)回歸的方法。文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2023-02-02
這篇文章主要介紹了python3連接MySQL8.0的兩種方式,本文通過多種方式給大家介紹的非常詳細(xì)，代碼附有文字注釋，需要的朋友可以參考下2020-02-02
python協(xié)程gevent案例 爬取斗魚圖片過程解析
這篇文章主要介紹了python協(xié)程gevent案例 爬取斗魚圖片過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08