程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式師世界 >> 編程語言 >  >> 更多編程語言 >> Python

Django項目如何用富文本編輯器DjangoUeditor

編輯:Python

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新增一個按鈕、下拉框、對話框

  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式師世界 All Rights Reserved