1. DjangoUeditor是什麼?
Ueditor HTML編輯器是百度開源的在線HTML編輯器,功能非常強大,像表格可以直接拖動調整單元格大小等, DjangoUeditor是把此編輯器集成為可以在django項目中直接使用的app,讓django項目可以方便的使用這個編輯器。
2. 如何獲取DjangoUeditor
可以從官方Github下載,然後放到自己的項目裡,官方Github地址:https://github.com/zhangfisher/DjangoUeditor, 但是由於官方很久沒有更新了,目前只支持Python2.7, 如果要用Python3.6,需要修改才能編譯成功,好消息是不需要你自己去修改,慕課網的老師已經修改好了,兼容Python2.7和3.6,可以直接拿來用,這就是開源的神奇,好東西就應該收藏,我也fork到了自己的github,地址:https://github.com/KenZP/DjangoUeditor3_imooc,無限期有效,可以去下載使用。
3. 如何安裝DjangoUeditor
a. 在自己的項目裡,和apps同層級創建一個extra_apps,這個文件存放所有第三方app,把下載好的DjangoUeditor,放到extra_apps裡面。
b. 配置項目setting.py文件
把extra_apps增加到根目錄下,加入如下代碼:
sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps'))
在INSTALLED_APPS裡面增加如下:
'DjangoUeditor'
c. url.py配置
在項目url.py文件的urlpatterns裡面增加如下url:
url(r'^ueditor/', include('DjangoUeditor.urls')),
至此,DjangoUeditor已經安裝完成,我們就可以使用了。
4. 如何使用DjangoUedit
安裝好後,我們只需要在model裡面修改需要使用此插件的字段即可,如文章的內容字段,默認如下:
body = models.TextField(default="", verbose_name="文章內容")
如果要使用Ueditor,只需要修改如下即可:
body = UEditorField(default="", verbose_name="文章內容")
因為使用了UEditorField,所以需要import這個模塊
from DjangoUeditor.models import UEditorField
可以發現,完全和django model字段無縫連接,而且還擴展了很多屬性,只需要加上自己需要的屬性就可以。
這樣配置完後對數據庫做下makemigrations和migrate,進入後台就發現文章內容輸入框已經是Ueditor界面了,有很多豐富的功能,如圖:
5. DjangoUeditor擴展屬性有哪些?
- width,height :編輯器的寬度和高度,以像素為單位。
- toolbars :配置你想顯示的工具欄,取值為mini,normal,full,代表小,一般,全部。如果默認的工具欄的按鈕數量不符合您的要求,您可以在settings裡面配置自己的顯示按鈕。參見後面介紹。
- imagePath :圖片上傳後保存的路徑,如"images/",實現上傳到"{{MEDIA_ROOT}}/images"文件夾。 注意:如果imagePath值只設置文件夾,則未尾要有"/" imagePath可以按python字符串格式化:如"images/%(basename)s_%(datetime)s.%(extname)s",這樣如果上傳test.png,則文件會 被保存為"{{MEDIA_ROOT}}/images/test_20140625122399.png",imagePath中可以使用的變量有:
- time :上傳時的時間,datetime.datetime.now().strftime("%H%M%S")
- date : 上傳時的日期,datetime.datetime.now().strftime("%Y%m%d")
- datetime : 上傳時的時間和日期,datetime.datetime.now().strftime("%Y%m%d%H%M%S")
- year : 年
- month : 月
- day : 日
- rnd : 三位隨機數,random.randrange(100,999)
- basename : 上傳的文件名稱,不包括擴展名
- extname : 上傳的文件擴展名
- filename : 上傳的文件名全稱
- filePath : 附件上傳後保存的路徑,設置規則與imagePath一樣。
- upload_settings : 字典值,例:upload_settings={ imagePathFormat:"images/%(basename)s_%(datetime)s.%(extname)s", imageMaxSize:323232 fileManagerListPath:"files" }
- upload_settings的內容就是ueditor/php/config.json裡面的配置內容,因此,你可以去看config.json或者官方文檔內容來決定 該如何配置upload_settings,基本上就是用來配置上傳的路徑、允許上傳的文件擴展名、最大上傳的文件大小之類的。
- 上面的imagePath和filePath被單獨提取出來配置,原因是因為這兩個參數是最常使用到的,imagePath就相當於upload_settings裡面的 imagePathFormat,filePath就相當於upload_settings裡面的filePathFormat。
- 您upload_settings裡面設置了imagePathFormat,也可以在UeditorField裡面設置imagePath,效果是一樣的。 但是如果兩者均設置, 則imagePath優先級更高。
- 塗鴉文件、截圖、遠程抓圖、圖片庫的xxxxPathFormat如果沒有配置,默認等於imagePath.
- 遠程文件庫的xxxxPathFormat如果沒有配置,默認等於filePath.
- settings : 字典值,配置項與ueditor/ueditor.config.js裡面的配置項一致。
- command : 可以為Ueditor新增一個按鈕、下拉框、對話框