釋出百度ueditor編輯器 for django
阿新 • • 發佈：2019-02-10
近在學習Django框架，按照網上教程整合DjangoUeditor時，出現錯誤，錯誤提示為：
from widgets import UEditorWidget,AdminUEditorWidget
ImportError: No module named ‘widgets’
經查發現，DjangoUeditor是基於Python 2.7的，對Python3的支援有問題。導致widgets.py檔案出錯，不能import。解決方法為修改widgets.py或者採用網上修改好的版本DjangoUeditor3
本模組幫助在Django應用中整合百度Ueditor HTML編輯器，Ueditor HTML編輯器是百度開源的HTML編輯器，
使用Django-Ueditor非常簡單，方法如下：
1、安裝方法
**方法一：下載安裝包，在命令列執行：
python setup.py install
**方法二：使用pip工具在命令列執行(推薦)：
pip install DjangoUeditor
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，代表小，一般，全部。如果預設的工具欄不符合您的要求，您可以在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", #定義允許的上傳的圖片型別
"path":"", #定義預設的上傳路徑
"max_size":"2222kb" #定義允許上傳的圖片大小，0代表不限制
},
"files_upload":{
"allow_type":"zip,rar", #定義允許的上傳的檔案型別
"path":"" #定義預設的上傳路徑
"max_size":"2222kb" #定義允許上傳的檔案大小，0代表不限制
},,
"image_manager":{
"path":"" #圖片管理器的位置,如果沒有指定，預設跟圖片路徑上傳一樣
},
"scrawl_upload":{
"path":"" #塗鴉圖片預設的上傳路徑
}
}
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
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 %}，那麼當您上傳檔案和圖片時會失敗