django配置Ueditor
1.安裝DjangoUeditor
pip install DjangoUeditor
2.在Django中安裝DjangoUedito app，在INSTALL_APPS裏面增加DjangoUeditor app
INSTALLED_APPS = (
‘DjangoUeditor‘,
)
3.配置urls
url(r‘^ueditor/‘,include(‘DjangoUeditor.urls‘ ))
4.在models中的使用
from DjangoUeditor.models import UEditorField
class Blog(models.Model):
Name=models.CharField(,max_length=100,blank=True)
Content=UEditorField(u‘內容‘,width=600, height=300, toolbars="full", imagePath="", filePath="", upload_settings={"imageMaxSize":1204000},
settings={},command=None,event_handler=myEventHander(),blank=True)
說明：
UEditorField繼承自models.TextField,因此你可以直接將model裏面定義的models.TextField直接改成UEditorField即可。 定義UEditorField時除了可以直接傳入models.TextFieldUEditorField提供的參數外，還可以傳入UEditorField提供的額外的參數 來控制UEditorField的外觀、上傳路徑等。 UEditorField的參數如下：
- 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" }
1.upload_settings的內容就是ueditor/php/config.json或者django中settings.py中UEDITOR_SETTINGS裏面的配置內容，因此，你可以去看config.json或者官方文檔內容來決定該如何配置upload_settings,基本上就是用來配置上傳的路徑、允許上傳的文件擴展名、最大上傳的文件大小之類的。
2.上面的imagePath和filePath被單獨提取出來配置，原因是因為這兩個參數是最常使用到的，imagePath就相當於upload_settings裏面的 imagePathFormat，filePath就相當於upload_settings裏面的filePathFormat。
3.您upload_settings裏面設置了imagePathFormat,也可以在UeditorField裏面設置imagePath，效果是一樣的。但是如果兩者均設置， 則imagePath優先級更高。
4.塗鴉文件、截圖、遠程抓圖、圖片庫的xxxxPathFormat如果沒有配置，默認等於imagePath.
5.遠程文件庫的xxxxPathFormat如果沒有配置，默認等於filePath.
### django中upload_settings
UEDITOR_SETTINGS = {
"toolbars": { # 定義多個工具欄顯示的按鈕，允行定義多個
"name1": [[‘source‘, ‘|‘, ‘bold‘, ‘italic‘, ‘underline‘]],
"name2": []
},
# "images_upload": {
# "allow_type": "png,jpeg,gif,jpg,bmp,tif", # 定義允許的上傳的圖片類型
# "path": "ueditor_imgs/", # 定義默認的上傳路徑
# "max_size": "0" # 定義允許上傳的圖片大小，0代表不限制
# },
# "files_upload": {
# "allow_type": "zip,rar", # 定義允許的上傳的文件類型
# # "path": "ueditor_files/", # 定義默認的上傳路徑
# "max_size": "0" # 定義允許上傳的文件大小，0代表不限制
# },
"image_manager": {
"path": "ueditor_imgs" # 圖片管理器的位置,如果沒有指定，默認跟圖片路徑上傳一樣
},
"imageManagerListPath": {
"path": "ueditor_imgs/" # 圖片管理器的位置,如果沒有指定，默認跟圖片路徑上傳一樣
},
"scrawl_upload": {
"path": "" # 塗鴉圖片默認的上傳路徑
},
# "upload": {
# "imagePathFormat": ‘ueditor_imgs/%(basename)s_%(datetime)s.%(extname)s‘,
# ‘imageManagerListPath‘: ‘ueditor_imgs/‘,
# "filePathFormat": ‘ueditor_files/%(basename)s_%(datetime)s.%(extname)s‘,
# "fileManagerListPath": ‘ueditor_files/‘,
# }
}
- settings : 字典值,配置項與ueditor/ueditor.config.js裏面的配置項一致。
- command : 可以為Ueditor新增一個按鈕、下拉框、對話框,例：
Description = UEditorField(u‘描述‘, blank=True, toolbars="full", imagePath="cool/", settings={"a": 1},
command=[myBtn(uiName="mybtn1", icon="d.png", title=u"1摸我", ajax_url="/ajaxcmd/"),
myCombo(uiName="myCombo3",title=u"ccc",initValue="aaa")
])
以上代碼可以會Ueditor增加一個按鈕和一個下拉框。command是一個UEditorCommand的實例列表。如果你要在Ueditor的工具欄上增加一個 自定義按鈕，方法如下：
from DjangoUeditor.commands import UEditorButtonCommand,UEditorComboCommand
#定義自己的按鈕命令類
class myBtn(UEditorButtonCommand):
def onClick(self):
return u"""
alert("爽!"); //這裏可以寫自己的js代碼
editor.execCommand(uiName);
"""
def onExecuteAjaxCommand(self,state):
""" 默認在command代碼裏面加入一段ajax代碼，如果指定了ajax_url和重載本方法，則在單點按鈕後
會調用ajax_url.本方法重載是可選的。
"""
if state=="success":
return u"""
alert("後面比較爽!"+xhr.responseText);//這裏可以寫ajax成功調用的js代碼
"""
if state=="error":
return u"""
alert("討厭，摸哪裏去了！"+xhr.responseText);//這裏可以寫ajax錯誤調用的js代碼
"""
UEditorButtonCommand有初始化參數:
uiName:按鈕名稱
title:按鈕提示信息
index:按鈕顯示的位置索引
ajax_url：單擊時調用的ajax url
UEditorComboCommand可以在Ueditor上增加一個下拉框
UEditorDialogCommand可以在Ueditor上增加一個對話框，一般與UEditorButtonCommand配合使用。暫未實現
- event_handler : 用來為Ueditor實例綁定事件偵聽，比較當選擇區改變時將按鈕狀態置為禁止。
from DjangoUeditor.commands import UEditorEventHandler
class myEventHander(UEditorEventHandler):
def on_selectionchange(self):
return """
function getButton(btnName){
var items=%(editor)s.ui.toolbars[0].items;
for(item in items){
if(items[item].name==btnName){
return items[item];
}
}
}
var btn=getButton("mybtn1");
var selRanage=id_Description.selection.getRange()
btn.setDisabled(selRanage.startOffset == selRanage.endOffset);
"""
我們可以繼承UEditorEventHandler創建自己的事件偵聽類，例如上面myEventHander，然後在myEventHander中
增加on_eventname的方法，在裏面返回偵聽該event的js代碼。例如上例on_selectionchange,就會在前端js中
生成id_Description.addListener(‘selectionchange‘, function () {.......});
如果要偵聽contentchange事件，就在myEventHander中增加一個on_contentchange方法，然後在該方法中返回js代碼。
5.在表單中使用非常簡單，與常規的form字段沒什麽差別，如下： class TestUeditorModelForm(forms.ModelForm): class Meta: model=Blog ， 如果不是用ModelForm，可以有兩種方法使用：
1: 使用forms.UEditorField
from DjangoUeditor.forms import UEditorField
class TestUEditorForm(forms.Form):
Description=UEditorField("描述",initial="abc",width=600,height=800)
2: widgets.UEditorWidget
from DjangoUeditor.widgets import UEditorWidget
class TestUEditorForm(forms.Form):
Content=forms.CharField(label="內容",widget=UEditorWidget(width=800,height=500, imagePath=‘aa‘, filePath=‘bb‘,toolbars={}))
widgets.UEditorWidget和forms.UEditorField的輸入參數與上述models.UEditorField一樣。
說明 關於第一種方法，需要在代碼中建立相應的類（比如就在views.py中），並且需要在views.py渲染視圖的時候返回到模板（template）中，對於上面的代碼，具體使用可能如下（在views.py中）：
from DjangoUeditor.forms import UEditorField class TestUEditorForm(forms.Form):
Description=UEditorField("描述",initial="abc",width=600,height=800)
def edit_description_view(request):
form = TestUEditorForm()
return render(request,‘edit-description.htm‘,{"form": form})
而在edit-description.htm這個模板（template）裏面，只需要在模板相應位置輸出form即可：
<div class="edit-area">
{{ form }}
</div>
6.Settings配置 在Django的Settings可以配置以下參數： UEDITOR_SETTINGS={ "config":{ #這裏放ueditor.config.js裏面的配置項....... }, "upload":{ #這裏放php/config.json裏面的配置項....... } }
7.在模板裏面，{{ form.media }} #這一句會將所需要的CSS和JS加進來。 註：運行collectstatic命令，將所依賴的css,js之類的文件復制到{{STATIC_ROOT}}文件夾裏面。
8.高級運用：動態指定imagePathFormat等文件路徑 ，這幾個路徑文件用於保存上傳的圖片或附件，您可以直接指定路徑，如： UEditorField(‘內容‘,imagePath="uploadimg/") 則圖片會被上傳到"{{MEDIA_ROOT}}/uploadimg"文件夾，也可以指定為一個函數，如：
def getImagePath(model_instance=None):
return "abc/"
UEditorField(‘內容‘,imagePath=getImagePath)
則圖片會被上傳到"{{MEDIA_ROOT}}/abc"文件夾。
****************
使上傳路徑(如imagePathFormat)與Model實例字段值相關
****************
在有些情況下，我們可能想讓上傳的文件路徑是由當前Model實例字值組名而成，比如：
class Blog(Models.Model):
Name=models.CharField(‘姓名‘,max_length=100,blank=True)
Description=UEditorField(‘描述‘,blank=True,imagePath=getUploadPath,toolbars="full")
id | Name | Description
------------------------------------
1 | Tom | ...........
2 | Jack | ...........
我們想讓第一條記錄上傳的圖片或附件上傳到"{{MEDIA_ROOT}}/Tom"文件夾,第2條記錄則上傳到"{{MEDIA_ROOT}}/Jack"文件夾。
該怎麽做呢，很簡單。
def getUploadPath(model_instance=None):
return "%s/" % model_instance.Name
在Model裏面這樣定義：
Description=UEditorField(‘描述‘,blank=True,imagePath=getUploadPath,toolbars="full")
這上面model_instance就是當前model的實例對象。
還需要這樣定義表單對象：
from DjangoUeditor.forms import UEditorModelForm
class UEditorTestModelForm(UEditorModelForm):
class Meta:
model=Blog
特別註意：
**表單對象必須是繼承自UEditorModelForm，否則您會發現model_instance總會是None。
**同時在Admin管理界面中，此特性無效，model_instance總會是None。
**在新建表單中，model_instance由於還沒有保存到數據庫，所以如果訪問model_instance.pk可能是空的。因為您需要在getUploadPath處理這種情況
9.其他事項
**本程序版本號采用a.b.ccc,其中a.b是本程序的號，ccc是ueditor的版本號，如1.2.122，1.2是DjangoUeditor的版本號，122指Ueditor 1.2.2.
**本程序安裝包裏面已經包括了Ueditor，不需要再額外安裝。
**目前暫時不支持ueditor的插件
**別忘記了運行collectstatic命令，該命令可以將ueditor的所有文件復制到{{STATIC_ROOT}}文件夾裏面
**Django默認開啟了CSRF中間件，因此如果你的表單沒有加入{% csrf_token %}，那麽當您上傳文件和圖片時會失敗
django配置Ueditor