使用DjangoUeditor将Ueditor移植到Django(BAE环境下)
2015-06-10 18:26
441 查看
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,如下:
把不需要的tab注释掉:
但是如果把<span tabSrc="local" ... </span>注释掉,
<span tabSrc="remote" ... </span>的功能(外链图片)就不能正常使用。
这是个特例!想要完全把图片上传功能屏蔽掉,还需要在<span tabSrc="local"里加上 style="display: none",删除 class="focus" 让它载入但不显示。
/static/ueditor/dialogs/image/video.html同样按照这种方法,直接把不需要的tab注释掉即可。
8、在bootstrap环境下,让编辑框自动缩放:修改/templates/ueditor.html,去掉width:{{ UEditor.width }}px;,加上class="row-fluid"即可:
原文链接:http://blog.csdn.net/qtsharp/article/details/8598146
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',imagePath="uploadimg/",imageManagerPath="imglib",toolbars='mini',options={"elementPathEnabled":True},filePath='upload',blank=True)如果想修改ueditor编辑器的工具栏显示,可以把toolbars='mini'换成/DjangoUeditor/settings.py里TOOLBARS_SETTINGS里的其他字段 7、由于BAE中无法直接上传文件,所以先放弃了图片上传的功能。我们可以屏蔽掉不想要的功能,让它不再显示出来,方法如下:编辑/static/ueditor/dialogs/image/image.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/image/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=Blog10、在模板里面: <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
相关文章推荐
- Inverse = true,cascade=all
- 【Win 10 应用开发】打印UI元素
- 将UIImage转化成NSData在转化成NSString(将UIImage转化成Base64的字节流)
- Building and Testing with Gradle
- 异步模块定义AMD
- UIView与CALayer的区别,很详细
- oralce10g 安装dbvault出错OUI-25031
- 【MySql】Column count doesn't match value count at row 1 解决方法
- UVA11995:I Can Guess the Data Structure
- 得到UIImage的方法
- iOS UITableView的Section Footer添加按钮
- iOS UITableView的Section Footer添加按钮
- Android Bluetooth开发
- 详细解析BluetoothAdapter的详细api
- GRE的issue写作要求
- 在storyboard中的静态UITableView中拖入 UISearchBar and Search Display Controller出现的奇怪问题
- request response 编码设置
- IOS开发—UITableViewCell的四种类型
- rust map的使用:获取某个key对应的value,如果不存在就插入一个
- message queue & event loop