百度編輯器UEditor插件DjangoUeditor使用方法

2024-04-25 20:31:23

字體：大中小

來源：轉載

供稿：網友

百度編輯器UEditor插件DjangoUeditor安裝方法

* 方法一：將github整個源碼包下載回家，在命令行運行：

python setup.py install

* 方法二：使用pip工具在命令行運行(推薦)：

pip install DjangoUeditor

2、在Django中安裝DjangoUeditor

在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里面配置自己的顯示按鈕。參見后面介紹。

magePath :圖片上傳后保存的路徑,如"images/",實現上傳到"{{MEDIA_ROOT}}/images"文件夾。注意：如果imagePath值只設置文件夾，則未尾要有"/" imagePath可以按python字符串格式化：如"images/%(basename)s_%(datetime)s.%(extname)"。這樣如果上傳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)", 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新增一個按鈕、下拉框、對話框,例：

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一樣。

6、Settings配置

在Django的Settings可以配置以下參數：
UEDITOR_SETTINGS={
"config":{
#這里放ueditor.config.js里面的配置項.......
},
"upload":{
#這里放php/config.json里面的配置項.......
}
}

7、在模板里面：

<head>
......
{{ form.media }} #這一句會將所需要的CSS和JS加進來。
......
</head>
注：運行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 %}，那么當您上傳文件和圖片時會失敗

百度編輯器UEditor插件DjangoUeditor

百度編輯器UEditor

上一篇：VBS中InStrRev函數的第三個參數(Start)使用要注意事項

下一篇：js返回前一頁時刷新本頁重載頁面