使用DjangoUeditor將Ueditor移植到Django(BAE環境下)

UEditor是百度出品的開源富文本編輯器,BSD協議,外觀、功能都不錯。

DjangoUeditor是UEditor在Django上的移植版

項目地址https://github.com/zhangfisher/DjangoUeditor

由於UEditor沒有出python版本,所以DjangoUeditor幾乎是最簡便的現成工具,但是要將DjangoUedtor移植到BAE上,還需要做一些改動。


1、下載https://github.com/zhangfisher/DjangoUeditor/archive/master.zip,將DjangoUeditor放到django項目目錄,作爲一個單獨的app。

2、在INSTALL_APPS裏面增加DjangoUeditor app,如下:

INSTALLED_APPS = (    #........
    'DjangoUeditor',
     )

3、把DjangoUeditor / templates /裏的ueditor.html文件移動到你的項目模板根目錄(自己的app/templates目錄中)

4、把 DjangoUeditor / static / 裏的UEditor文件夾改成小寫ueditor,移動到項目的static文件夾中(自己的app靜態資源目錄,我配置的是在/static/中)

5、在urls.py中增加:

url(r'^ueditor/',include('DjangoUeditor.urls' )),

6、在models中這樣定義:

from DjangoUeditor.models import UEditorFieldclass Blog(models.Model):
        Name=models.CharField(,max_length=100,blank=True)
        Content=UEditorField('內容',height=100,width=500,default='test',p_w_picpathPath="uploadimg/",p_w_picpathManagerPath="imglib",toolbars='mini',options={"elementPathEnabled":True},filePath='upload',blank=True)

如果想修改ueditor編輯器的工具欄顯示,可以把toolbars='mini'換成/DjangoUeditor/settings.py裏TOOLBARS_SETTINGS裏的其他字段

 

7、由於BAE中無法直接上傳文件,所以先放棄了圖片上傳的功能。我們可以屏蔽掉不想要的功能,讓它不再顯示出來,方法如下:

編輯/static/ueditor/dialogs/p_w_picpath/p_w_picpath.html

把不需要的tab註釋掉:

<div id="tabHeads">
    <span tabSrc="remote"  class="focus"><var id="lang_tab_remote"></var></span>
    <span tabSrc="local" style="display: none"><var id="lang_tab_local"></var></span>


<!--
    <span tabSrc="imgManager"><var id="lang_tab_imgManager"></var></span>
    <span tabSrc="imgSearch"><var id="lang_tab_imgSearch"></var></span>
-->

</div>

注意:雖然我不需要圖片上傳功能,

但是如果把<span tabSrc="local" ... </span>註釋掉,

<span tabSrc="remote" ... </span>的功能(外鏈圖片)就不能正常使用。

這是個特例!想要完全把圖片上傳功能屏蔽掉,還需要在<span tabSrc="local"里加上 style="display: none",刪除 class="focus" 讓它載入但不顯示。

 

/static/ueditor/dialogs/p_w_picpath/video.html同樣按照這種方法,直接把不需要的tab註釋掉即可。

8、在bootstrap環境下,讓編輯框自動縮放:

修改/templates/ueditor.html,去掉width:` UEditor`.`width `px;,加上class="row-fluid"即可:

<textarea name={{ UEditor.name }} id=id_{{ UEditor.name }} class="row-fluid" style="display:inline-block;{{ UEditor.css }}">`UEditor`.`value`</textarea>

9、在表單中使用非常簡單,與常規的form字段沒什麼差別,如下:

from blog.models import Blogclass TestUeditorModelForm(forms.ModelForm): 
    class Meta:
        model=Blog

10、在模板裏面: <head> ...... ` form`.`media ` #這一句會將所需要的CSS和JS加進來。 ...... </head>

11、關於字數統計等功能設置可以在/static/ueditor/editor_config.js裏修改

12、文件、圖片上傳功能,如果有服務器寫文件權限的話,配置起來相當方便。可是BAE環境下的文件上傳功能目前好像只有上傳到BCS這一個選擇。


其實自己在嘗試給DjangoUeditor在BAE環境下添加圖片上傳功能,但是能力有限,出現了問題沒法解決。

使用DjangoUeditor進行圖片上傳,post得到的file.chunks通過bcs.put_object()上傳到BCS時,出現錯誤:

UnicodeDecodeError at /upload/ 'utf8' codec can't decode byte 0xff in position 0: invalid start byte

求問各位高手問題可能出在了哪?



原文鏈接:http://blog.csdn.net/qtsharp/article/details/8598146 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章