django xadmin 集成DjangoUeditor富文本編輯器
阿新 • • 發佈:2018-03-05
xadmin django本文檔記錄自己的學習歷程!
介紹
-
Ueditor HTML編輯器是百度開源的在線HTML編輯器,功能非常強大
額外功能
- 解決圖片視頻等無法上傳顯示問題
Ueditor下載地址 https://github.com/wsqy/DjangoUeditor.git
- 解壓後將 DjangoUeditor 文件夾復制到django項目目錄下,跟app目錄同級
修改app models
- 導入UEditorField 模塊
- 增加需要富文本框的字段
from DjangoUeditor.models import UEditorField class Post(models.Model): """文章""" STATUS_CHOICES = ( (‘draft‘,‘草稿‘), (‘published‘,‘已發布‘), ) ... body = UEditorField(‘內容‘, 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提供了額外的參數:<br>
toolbars:配置你想顯示的工具欄,取值為mini,normal,full,besttome, 代表小,一般,全部,塗偉忠貢獻的一種樣式。如果默認的工具欄不符合您的要求,您可以在settings裏面配置自己的顯示按鈕。參見後面介紹。<br>
imagePath:圖片上傳的路徑,如"images/",實現上傳到"{{MEDIA_ROOT}}/images"文件夾<br>
scrawlPath:塗鴉文件上傳的路徑,如"scrawls/",實現上傳到"{{MEDIA_ROOT}}/scrawls"文件夾,如果不指定則默認=imagepath<br>
imageManagerPath:圖片管理器顯示的路徑,如"imglib/",實現上傳到"{{MEDIA_ROOT}}/imglib",如果不指定則默認=imagepath。<br>
css:編輯器textarea的CSS樣式<br>
width,height:編輯器的寬度和高度,以像素為單位。<br> - 初始化數據庫
makemigrations
migrate
修改settings文件
- 增加文件上傳路徑配置
MEDIA_URL=‘/upload/‘
MEDIA_ROOT = os.path.join(BASE_DIR, ‘upload/‘)#這個是在瀏覽器上訪問該上傳文件的url的前綴
修改xadmin的配置(如果用admin的話可以忽略)
- 在項目下的xadmin\plugins\路徑下新建ueditor.py腳本,內容如下
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") # 自己的靜態目錄
js += ‘<script type="text/javascript" src="%s"></script>‘ % (settings.STATIC_URL + "ueditor/ueditor.all.js") # 自己的靜態目錄
nodes.append(js)
xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)
- 在xadmin\plugins\路徑下的init.py文件下的PLUGINS項添加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‘,
)
更改DjangoUeditor靜態資源路徑(重要)
- 在項目下的static目錄下新建ueditor目錄
- 把DjangoUeditor目錄下的ueditor目錄下的js文件移動到項目的static目錄下的ueditor裏
修改項目urls文件
- 以下為新增項
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)
結果
- 重啟項目,在後臺可以看到富文本框就正常了
- 效果圖
django xadmin 集成DjangoUeditor富文本編輯器