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
求問各位高手問題可能出在了哪?