使用DjangoUeditor将Ueditor移植到Django（BAE环境下）

最新推荐文章于 2024-04-18 10:12:18 发布

Msro

最新推荐文章于 2024-04-18 10:12:18 发布

阅读量111

点赞数

文章标签： python javascript ViewUI

原文链接：http://www.cnblogs.com/catmelo/archive/2013/02/08/2909306.html

版权

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文件移动到你的项目模板根目录

4、把 DjangoUeditor / static / 里的UEditor文件夹改成小写ueditor,移动到项目的static文件夹中

5、在urls.py中增加：

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

6、在models中这样定义：

from DjangoUeditor.models import UEditorField
class 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>




</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 Blog

class 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

求问各位高手问题可能出在了哪？

转载于:https://www.cnblogs.com/catmelo/archive/2013/02/08/2909306.html

Msro

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用DjangoUeditor将Ueditor移植到Django（BAE环境下）

UEditor是百度出品的开源富文本编辑器，BSD协议，外观、功能都不错。DjangoUeditor是UEditor在Django上的移植版项目地址https://github.com/zhangfisher/DjangoUeditor由于UEditor没有出python版本，所以DjangoUeditor几乎是最简便的现成工具，但是要将DjangoUedtor移植到BAE上，还需要做...
复制链接

扫一扫