1. 程式人生 > >django學習——xadmin中集成富文本編輯器ueditor

django學習——xadmin中集成富文本編輯器ueditor

har inline 字段 插件 char 種類 url image 種類型

對於xadmin和djangoueditor 的安裝,本人建議直接集成在pycharm中,而不是裝在虛擬環境中。因為xadmin中如果需要集成插件的話,需要對其進行添加;而djangoueditor采用pip安裝的話,只能用在Python2版本中。

因此建議將源碼包下載下來,並直接放在項目下的extra_apps中,如下所示:

技術分享圖片

本文的開發環境如下:

技術分享圖片

1、將djangoueditor添加到setting.py中

技術分享圖片


2、添加url

將URL添加到urlpatterns中去:

技術分享圖片


3、修改model

將模型中需要改為富文本添加的字段,一般為TextField,改為如下:

技術分享圖片

4、xadmin中添加插件ueditor

由於已經將xadmin源文件拷貝到了項目下,本文為extra_apps/xadmin,在xadmin下的plugin中新建一個ueditor.py文件,裏面寫入如下:

技術分享圖片

5、將ueditor添加到plugin下的_init_中

技術分享圖片

6、將ueditor添加到adminx.py中

技術分享圖片

關於style_fields,如下:style_fields = {}
指定 Field 的 Style, Style一般用來實現同一種類型的字段的不同效果,例如同樣是 radio button,有普通及inline兩種 Style。通常 xadmin 針對表單的插件會實現更多的 Field Style。您使用這些插件後,只要方便的將想要使用插件效果的字段設置成插件實現的 Style 即可。

7、在前端顯示的話,需要對html頁面修改如下

技術分享圖片

目的是為了阻止字符的轉義

通過以上設置就可以登錄後臺xadmin中,對內容進行富文本編輯,並顯示在前端頁面了,效果如下:

技術分享圖片

django學習——xadmin中集成富文本編輯器ueditor