當(dāng)前位置：首頁(yè) > 编程语言 > python >内容正文

python

ueditor版本python3_GitHub - crazyinstall/DjangoUeditor3: Django Ueditor 兼容Python3改进，Python2上也可用...

發(fā)布時(shí)間：2025/5/22 python 23 豆豆

生活随笔收集整理的這篇文章主要介紹了 ueditor版本python3_GitHub - crazyinstall/DjangoUeditor3: Django Ueditor 兼容Python3改进，Python2上也可用... 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

本模塊幫助在Django應(yīng)用中集成百度Ueditor HTML編輯器,Django是Python世界最有影響力的web框架。

Ueditor HTML編輯器是百度開源的在線HTML編輯器,功能非常強(qiáng)大，像表格可以直接拖動(dòng)調(diào)整單元格大小等。

更新歷史

###[2015-1-17] Ver:1.9.143

Fix:當(dāng)models.py中toolbars變量使用unicode字符時(shí)，編輯器無(wú)法加載的問題

###[2014-7-8] Ver:1.8.143

Fix:當(dāng)admin使用inlines生成多實(shí)例時(shí)widget命名不正確的問題

###[2014-6-27] Ver:1.7.143

Fix:解決在admin管理后臺(tái)的使用問題。

增加year,month,day的上傳路徑變量

###[2014-6-25]

由于Ueditor從1.4版本開始，API發(fā)生了非常大的改動(dòng)和不兼容，導(dǎo)致DjangoUeditor上一個(gè)版本的升級(jí)后上傳功能不能用等，因此

本次重新設(shè)計(jì)了API，后端上傳的代碼幾乎完全重寫了。

更新到1.5.143，即版本號(hào)為1.5，使用了Ueditor 1.4.3版本。

重新設(shè)計(jì)了UeditorWidget、UeditorField。

新增了自定義Ueditor按鈕的功能

注意：本次升級(jí)與之前版本不兼容，但是在使用體驗(yàn)上差別不大。

###[2014-6-16]

更新到Ueditor 1.4.3

###[2014-5-15]

增加不過濾 script,style ,不自動(dòng)轉(zhuǎn)div為p的腳本

修復(fù)在django 1.6和python2.7下的警告

使用 json 代替 django 中的 simplejson

用content_type 代替原來(lái)的 mime_type

###[2014-5-7]

更新到Ueditor 1.3.6

BUGfix:更新UEditor文件夾名字，避免在linux出現(xiàn)找不到靜態(tài)文件問題

添加一種樣式，besttome, 希望大家喜歡

###[2013-2-22]

更新到Ueditor 1.2.5

BUGfix:更新UEditor文件夾名字，避免在linux出現(xiàn)找不到靜態(tài)文件問題

BUGfix:現(xiàn)在支持south更新了

針對(duì)csrf導(dǎo)致上傳圖片失敗的問題，現(xiàn)在默認(rèn)上傳視圖開啟了csrf_exempt裝飾

使用方法

##1、安裝方法

* 方法一：將github整個(gè)源碼包下載回家，在命令行運(yùn)行：

python setup.py install

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

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'內(nèi)容',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時(shí)除了可以直接傳入models.TextFieldUEditorField提供的參數(shù)外，還可以傳入U(xiǎn)EditorField提供的額外的參數(shù)

來(lái)控制UEditorField的外觀、上傳路徑等。

UEditorField的參數(shù)如下：

width，height :編輯器的寬度和高度，以像素為單位。

toolbars :配置你想顯示的工具欄，取值為mini,normal,full，代表小，一般，全部。如果默認(rèn)的工具欄的按鈕數(shù)量不符合您的要求，您可以在settings里面配置自己的顯示按鈕。參見后面介紹。

imagePath :圖片上傳后保存的路徑,如"images/",實(shí)現(xiàn)上傳到"{{MEDIA_ROOT}}/images"文件夾。

注意：如果imagePath值只設(shè)置文件夾，則未尾要有"/"

imagePath可以按python字符串格式化：如"images/%(basename)s_%(datetime)s.%(extname)s"。這樣如果上傳test.png，則文件會(huì)

被保存為"{{MEDIA_ROOT}}/images/test_20140625122399.png"。

imagePath中可以使用的變量有：

time :上傳時(shí)的時(shí)間，datetime.datetime.now().strftime("%H%M%S")

date ：上傳時(shí)的日期，datetime.datetime.now().strftime("%Y%m%d")

datetime ：上傳時(shí)的時(shí)間和日期，datetime.datetime.now().strftime("%Y%m%d%H%M%S")

year : 年

month : 月

day : 日

rnd : 三位隨機(jī)數(shù)，random.randrange(100,999)

basename ：上傳的文件名稱，不包括擴(kuò)展名

extname : 上傳的文件擴(kuò)展名

filename : 上傳的文件名全稱

filePath : 附件上傳后保存的路徑，設(shè)置規(guī)則與imagePath一樣。

upload_settings : 字典值,

例:upload_settings={

imagePathFormat:"images/%(basename)s_%(datetime)s.%(extname)s",

imageMaxSize:323232

fileManagerListPath:"files"

}

upload_settings的內(nèi)容就是ueditor/php/config.json里面的配置內(nèi)容，因此，你可以去看config.json或者官方文檔內(nèi)容來(lái)決定

該如何配置upload_settings,基本上就是用來(lái)配置上傳的路徑、允許上傳的文件擴(kuò)展名、最大上傳的文件大小之類的。

上面的imagePath和filePath被單獨(dú)提取出來(lái)配置，原因是因?yàn)檫@兩個(gè)參數(shù)是最常使用到的，imagePath就相當(dāng)于upload_settings里面的

imagePathFormat，filePath就相當(dāng)于upload_settings里面的filePathFormat。

您upload_settings里面設(shè)置了imagePathFormat,也可以在UeditorField里面設(shè)置imagePath，效果是一樣的。但是如果兩者均設(shè)置，

則imagePath優(yōu)先級(jí)更高。

涂鴉文件、截圖、遠(yuǎn)程抓圖、圖片庫(kù)的xxxxPathFormat如果沒有配置，默認(rèn)等于imagePath.

遠(yuǎn)程文件庫(kù)的xxxxPathFormat如果沒有配置，默認(rèn)等于filePath.

settings : 字典值,配置項(xiàng)與ueditor/ueditor.config.js里面的配置項(xiàng)一致。

command : 可以為Ueditor新增一個(gè)按鈕、下拉框、對(duì)話框,例：

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")

])

以上代碼可以會(huì)Ueditor增加一個(gè)按鈕和一個(gè)下拉框。command是一個(gè)UEditorCommand的實(shí)例列表。如果你要在Ueditor的工具欄上增加一個(gè)

自定義按鈕，方法如下：

from DjangoUeditor.commands import UEditorButtonCommand,UEditorComboCommand

#定義自己的按鈕命令類

class myBtn(UEditorButtonCommand):

def onClick(self):

return u"""

alert("爽!"); //這里可以寫自己的js代碼

editor.execCommand(uiName);

"""

def onExecuteAjaxCommand(self,state):

""" 默認(rèn)在command代碼里面加入一段ajax代碼，如果指定了ajax_url和重載本方法，則在單點(diǎn)按鈕后

會(huì)調(diào)用ajax_url.本方法重載是可選的。

"""

if state=="success":

return u"""

alert("后面比較爽!"+xhr.responseText);//這里可以寫ajax成功調(diào)用的js代碼

"""

if state=="error":

return u"""

alert("討厭，摸哪里去了！"+xhr.responseText);//這里可以寫ajax錯(cuò)誤調(diào)用的js代碼

"""

UEditorButtonCommand有初始化參數(shù):

uiName:按鈕名稱

title:按鈕提示信息

index:按鈕顯示的位置索引

ajax_url：單擊時(shí)調(diào)用的ajax url

UEditorComboCommand可以在Ueditor上增加一個(gè)下拉框

UEditorDialogCommand可以在Ueditor上增加一個(gè)對(duì)話框，一般與UEditorButtonCommand配合使用。暫未實(shí)現(xiàn)

event_handler : 用來(lái)為Ueditor實(shí)例綁定事件偵聽，比較當(dāng)選擇區(qū)改變時(shí)將按鈕狀態(tài)置為禁止。

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創(chuàng)建自己的事件偵聽類，例如上面myEventHander，然后在myEventHander中

增加on_eventname的方法，在里面返回偵聽該event的js代碼。例如上例on_selectionchange,就會(huì)在前端js中

生成id_Description.addListener('selectionchange', function () {.......});

如果要偵聽contentchange事件，就在myEventHander中增加一個(gè)on_contentchange方法，然后在該方法中返回js代碼。

##5、在表單中使用非常簡(jiǎn)單，與常規(guī)的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="內(nèi)容",widget=UEditorWidget(width=800,height=500, imagePath='aa', filePath='bb',toolbars={}))

widgets.UEditorWidget和forms.UEditorField的輸入?yún)?shù)與上述models.UEditorField一樣。

說明關(guān)于第一種方法，需要在代碼中建立相應(yīng)的類(比如就在views.py中)，并且需要在views.py渲染視圖的時(shí)候返回到模板(template)中，對(duì)于上面的代碼，具體使用可能如下(在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這個(gè)模板(template)里面，只需要在模板相應(yīng)位置輸出form即可：

##6、Settings配置

在Django的Settings可以配置以下參數(shù)：

UEDITOR_SETTINGS={

"config":{

#這里放ueditor.config.js里面的配置項(xiàng).......

"upload":{

#這里放php/config.json里面的配置項(xiàng).......

}

##7、在模板里面：

......

{{ form.media }} #這一句會(huì)將所需要的CSS和JS加進(jìn)來(lái)。

......

注：運(yùn)行collectstatic命令，將所依賴的css,js之類的文件復(fù)制到{{STATIC_ROOT}}文件夾里面。

##8、高級(jí)運(yùn)用：

****************

動(dòng)態(tài)指定imagePathFormat等文件路徑

****************

這幾個(gè)路徑文件用于保存上傳的圖片或附件，您可以直接指定路徑，如：

UEditorField('內(nèi)容',imagePath="uploadimg/")

則圖片會(huì)被上傳到"{{MEDIA_ROOT}}/uploadimg"文件夾，也可以指定為一個(gè)函數(shù)，如：

def getImagePath(model_instance=None):

return "abc/"

UEditorField('內(nèi)容',imagePath=getImagePath)

則圖片會(huì)被上傳到"{{MEDIA_ROOT}}/abc"文件夾。

****************

使上傳路徑(如imagePathFormat)與Model實(shí)例字段值相關(guān)

****************

在有些情況下，我們可能想讓上傳的文件路徑是由當(dāng)前Model實(shí)例字值組名而成，比如：

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"文件夾。

該怎么做呢，很簡(jiǎn)單。

def getUploadPath(model_instance=None):

return "%s/" % model_instance.Name

在Model里面這樣定義：

Description=UEditorField('描述',blank=True,imagePath=getUploadPath,toolbars="full")

這上面model_instance就是當(dāng)前model的實(shí)例對(duì)象。

還需要這樣定義表單對(duì)象：

from DjangoUeditor.forms import UEditorModelForm

class UEditorTestModelForm(UEditorModelForm):

class Meta:

model=Blog

特別注意：

**表單對(duì)象必須是繼承自UEditorModelForm，否則您會(huì)發(fā)現(xiàn)model_instance總會(huì)是None。

**同時(shí)在Admin管理界面中，此特性無(wú)效，model_instance總會(huì)是None。

**在新建表單中，model_instance由于還沒有保存到數(shù)據(jù)庫(kù)，所以如果訪問model_instance.pk可能是空的。因?yàn)槟枰趃etUploadPath處理這種情況

##9、其他事項(xiàng)：

**本程序版本號(hào)采用a.b.ccc,其中a.b是本程序的號(hào)，ccc是ueditor的版本號(hào)，如1.2.122，1.2是DjangoUeditor的版本號(hào)，122指Ueditor 1.2.2.

**本程序安裝包里面已經(jīng)包括了Ueditor，不需要再額外安裝。

**目前暫時(shí)不支持ueditor的插件

**別忘記了運(yùn)行collectstatic命令，該命令可以將ueditor的所有文件復(fù)制到{{STATIC_ROOT}}文件夾里面

**Django默認(rèn)開啟了CSRF中間件，因此如果你的表單沒有加入{% csrf_token %}，那么當(dāng)您上傳文件和圖片時(shí)會(huì)失敗

總結(jié)

以上是生活随笔為你收集整理的ueditor版本python3_GitHub - crazyinstall/DjangoUeditor3: Django Ueditor 兼容Python3改进，Python2上也可用...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： gis属性表怎么导成excel_第022
下一篇： hht时频谱 matlab 乱序_频谱、