Ueditor HTML編輯器是百度開源的HTML編輯器， 本模塊幫助在Django應用中集成百度Ueditor HTML編輯器。 安裝包中已經集成Ueditor v1.3.6 使用Django-Ueditor非常簡單，方法如下： 1、安裝方法 **方法一：下載安裝包，在命令行運行： python setup.py install **方法二：使用pip工具在命令行運行(推薦)： pip install DjangoUeditor # 缺少包:south 2、在INSTALL_APPS里面增加DjangoUeditor app，如下： INSTALLED_APPS = ( #........ 'DjangoUeditor', ) 3、在urls.py中增加： 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('內容 ',height=100,width=500,default='test',imagePath="uploadimg/",imageManagerPath="imglib",toolbars='mini',options={"elementPathEnabled":True},filePath='upload',blank=True) 說明： UEditorField繼承自models.TextField,因此你可以直接將model里面定義的models.TextField直接改成UEditorField即可。 UEditorField提供了額外的參數： toolbars:配置你想顯示的工具欄，取值為mini,normal,full,besttome, 代表小，一般，全部,塗偉忠貢獻的一種樣式。如果默認的工具欄不符合您的要求，您可以在settings里面配置自己的顯示按鈕。參見后面介紹。 imagePath:圖片上傳的路徑,如"images/",實現上傳到"{{MEDIA_ROOT}}/images"文件夾 filePath:附件上傳的路徑,如"files/",實現上傳到"{{MEDIA_ROOT}}/files"文件夾 scrawlPath:塗鴉文件上傳的路徑,如"scrawls/",實現上傳到"{{MEDIA_ROOT}}/scrawls"文件夾,如果不指定則默認=imagepath imageManagerPath:圖片管理器顯示的路徑，如"imglib/",實現上傳到"{{MEDIA_ROOT}}/imglib",如果不指定則默認=imagepath。 options：其他UEditor參數，字典類型。參見Ueditor的文檔ueditor_config.js里面的說明。 css:編輯器textarea的CSS樣式 width，height:編輯器的寬度和高度，以像素為單位。 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一樣。 6、Settings配置 在Django的Settings可以配置以下參數： UEDITOR_SETTINGS={ "toolbars":{ #定義多個工具欄顯示的按鈕，允行定義多個 "name1":[[ 'source', '|','bold', 'italic', 'underline']], "name2",[] }, "images_upload":{ "allow_type":"jpg,png", #定義允許的上傳的圖片類型 "max_size":"2222kb" #定義允許上傳的圖片大小，0代表不限制 }, "files_upload":{ "allow_type":"zip,rar", #定義允許的上傳的文件類型 "max_size":"2222kb" #定義允許上傳的文件大小，0代表不限制 },, "image_manager":{ "location":"" #圖片管理器的位置,如果沒有指定，默認跟圖片路徑上傳一樣 }, } 7、在模板里面： <head> ...... {{ form.media }} #這一句會將所需要的CSS和JS加進來。 ...... </head> 注：運行collectstatic命令，將所依賴的css,js之類的文件復制到{{STATIC_ROOT}}文件夾里面。 8、高級運用： **************** 動態指定imagePath、filePath、scrawlPath、imageManagerPath **************** 這幾個路徑文件用於保存上傳的圖片或附件，您可以直接指定路徑，如： UEditorField('內容',imagePath="uploadimg/") 則圖片會被上傳到"{{MEDIA_ROOT}}/uploadimg"文件夾，也可以指定為一個函數，如： def getImagePath(model_instance=None): return "abc/" UEditorField('內容',imagePath=getImagePath) 則圖片會被上傳到"{{MEDIA_ROOT}}/abc"文件夾。 **************** 使上傳路徑(imagePath、filePath、scrawlPath、imageManagerPath)與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處理這種情況 class UEditorTestModelForm(UEditorModelForm): class Meta: model=Blog 8、其他事項： **本程序版本號采用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 %}，那么當您上傳文件和圖片時會失敗