您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)django xadmin如何集成DjangoUeditor富文本編輯器,小編覺得挺實(shí)用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
Ueditor HTML編輯器是百度開源的在線HTML編輯器,功能非常強(qiáng)大
解決圖片視頻等無法上傳顯示問題
解壓后將 DjangoUeditor 文件夾復(fù)制到django項(xiàng)目目錄下,跟app目錄同級
導(dǎo)入UEditorField 模塊
增加需要富文本框的字段
from DjangoUeditor.models import UEditorField class Post(models.Model): """文章""" STATUS_CHOICES = ( ('draft','草稿'), ('published','已發(fā)布'), ) ... body = UEditorField('內(nèi)容', height=300, width=800,max_length=1024000000000, default=u'', blank=True, imagePath="images/", toolbars='besttome', filePath='files/') ...
說明:
UEditorField繼承自models.TextField,因此你可以直接將model里面定義的models.TextField直接改成UEditorField即可。<br>
UEditorField提供了額外的參數(shù):<br>
toolbars:配置你想顯示的工具欄,取值為mini,normal,full,besttome, 代表小,一般,全部,涂偉忠貢獻(xiàn)的一種樣式。如果默認(rèn)的工具欄不符合您的要求,您可以在settings里面配置自己的顯示按鈕。參見后面介紹。<br>
imagePath:圖片上傳的路徑,如"images/",實(shí)現(xiàn)上傳到"{{MEDIA_ROOT}}/images"文件夾<br>
filePath:附件上傳的路徑,如"files/",實(shí)現(xiàn)上傳到"{{MEDIA_ROOT}}/files"文件夾<br>
scrawlPath:涂鴉文件上傳的路徑,如"scrawls/",實(shí)現(xiàn)上傳到"{{MEDIA_ROOT}}/scrawls"文件夾,如果不指定則默認(rèn)=imagepath<br>
imageManagerPath:圖片管理器顯示的路徑,如"imglib/",實(shí)現(xiàn)上傳到"{{MEDIA_ROOT}}/imglib",如果不指定則默認(rèn)=imagepath。<br>
options:其他UEditor參數(shù),字典類型。參見Ueditor的文檔ueditor_config.js里面的說明。<br>
css:編輯器textarea的CSS樣式<br>
width,height:編輯器的寬度和高度,以像素為單位。<br>
初始化數(shù)據(jù)庫
makemigrations migrate
增加文件上傳路徑配置
MEDIA_URL='/upload/' MEDIA_ROOT = os.path.join(BASE_DIR, 'upload/')#這個是在瀏覽器上訪問該上傳文件的url的前綴
在項(xiàng)目下的xadmin\plugins\路徑下新建ueditor.py腳本,內(nèi)容如下
import xadmin from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView from DjangoUeditor.models import UEditorField from DjangoUeditor.widgets import UEditorWidget from django.conf import settings class XadminUEditorWidget(UEditorWidget): def __init__(self,**kwargs): self.ueditor_options=kwargs self.Media.js = None super(XadminUEditorWidget,self).__init__(kwargs) class UeditorPlugin(BaseAdminPlugin): def get_field_style(self, attrs, db_field, style, **kwargs): if style == 'ueditor': if isinstance(db_field, UEditorField): widget = db_field.formfield().widget param = {} param.update(widget.ueditor_settings) param.update(widget.attrs) return {'widget': XadminUEditorWidget(**param)} return attrs def block_extrahead(self, context, nodes): js = '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.config.js") # 自己的靜態(tài)目錄 js += '<script type="text/javascript" src="%s"></script>' % (settings.STATIC_URL + "ueditor/ueditor.all.js") # 自己的靜態(tài)目錄 nodes.append(js) xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView) xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)
在xadmin\plugins\路徑下的init.py文件下的PLUGINS項(xiàng)添加ueditor,如下最后一行為新增的
E:\items\blog_project\xadmin\plugins\__init__.py PLUGINS = ( 'actions', 'filters', 'bookmark', 'export', 'layout', 'refresh', 'details', 'editable', 'relate', 'chart', 'ajax', 'relfield', 'inline', 'topnav', 'portal', 'quickform', 'wizard', 'images', 'auth', 'multiselect', 'themes', 'aggregation', 'mobile', 'passwords', 'sitemenu', 'language', 'quickfilter', 'sortablelist', 'importexport', 'ueditor', )
在項(xiàng)目下的static目錄下新建ueditor目錄
把DjangoUeditor目錄下的ueditor目錄下的js文件移動到項(xiàng)目的static目錄下的ueditor里
以下為新增項(xiàng)
from django.conf.urls import url,include ... import xadmin import DjangoUeditor urlpatterns = [ url(r'^xadmin/', xadmin.site.urls), ... url(r'^ueditor/', include('DjangoUeditor.urls')) ] from django.conf import settings if settings.DEBUG: from django.conf.urls.static import static urlpatterns += static( settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
關(guān)于“django xadmin如何集成DjangoUeditor富文本編輯器”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。