Tugqi Biz

Ueditor在Django中的使用

以前写过Ueditor在Django中的使用方法（虽然跟着上一个博客一起丢了），在此不赘述了。想学可以看看这位朋友的分享： Django中使用Ueditor

http://mushapi.sinaapp.com/using-ueditor-in-django-with-xadmin.html

1.安装

pip install DjangoUeditor

2.启用

在INSTALL_APPS里面增加DjangoUeditor app，如下：
INSTALLED_APPS = (
        #........
            'DjangoUeditor',
        )
在urls.py中增加：
    url(r'^ueditor/',include('DjangoUeditor.urls' )),

3.使用

在models中这样使用：
from DjangoUeditor.models import UEditorField
    class Blog(models.Model):
        Name=models.CharField(,max_length=100,blank=True)
        Content=UEditorField(u'内容   ',height=100,width=500,default='test',imagePath="uploadimg/",imageManagerPath="imglib",toolbars='mini',options={"elementPathEnabled":True},filePath='upload',blank=True)

'''
说明：
    UEditorField继承自models.TextField,因此你可以直接将model里面定义的models.TextField直接改成UEditorField即可。
    UEditorField提供了额外的参数：
        toolbars:配置你想显示的工具栏，取值为mini,normal,full，代表小，一般，全部。如果默认的工具栏不符合您的要求，您可以在settings里面配置自己的显示按钮。参见后面介绍。
        imagePath:图片上传的路径,如"images/",实现上传到"{{MEDIA_ROOT}}/images"文件夹
        filePath:附件上传的路径,如"files/",实现上传到"{{MEDIA_ROOT}}/files"文件夹
        scrawlPath:涂鸦文件上传的路径,如"scrawls/",实现上传到"{{MEDIA_ROOT}}/scrawls"文件夹,如果不指定则默认=imagepath
        imageManagerPath:图片管理器显示的路径，如"imglib/",实现上传到"{{MEDIA_ROOT}}/imglib",如果不指定则默认=imagepath。
        options：其他UEditor参数，字典类型。参见Ueditor的文档`ueditor_config.js`里面的说明。
        css:编辑器textarea的CSS样式
        width，height:编辑器的宽度和高度，以像素为单位。
'''
在表单中使用,如下：(使用表单时注意{% csrf_token %})

在ModelForm中：（Ueditor的配置来自Model，所以在此不需import）

class TestUeditorModelForm(forms.ModelForm):
        class Meta:
            model=Blog

在普通Form中：

from  DjangoUeditor.forms import UEditorField
    class TestUEditorForm(forms.Form):
        Description=UEditorField("描述",initial="abc",width=600,height=800)
在模板里面使用：
<head>
        ......
        {{ form.media }}        #这一句会将所需要的CSS和JS加进来。
        ......
    </head>

**注：运行collectstatic命令，将所依赖的css,js之类的文件复制到{{STATIC_ROOT}}文件夹里面。**

4.定制

在setting.py中配置:
UEDITOR_SETTINGS={
                "toolbars":{           #定义多个工具栏显示的按钮，允行定义多个
                    "name1":[[ 'source', '|','bold', 'italic', 'underline']],
                    "name2",[]
                },
                "images_upload":{
                    "allow_type":"jpg,png",    #定义允许的上传的图片类型
                    "path":"",                   #定义默认的上传路径
                    "max_size":"2222kb"        #定义允许上传的图片大小，0代表不限制
                },
                "files_upload":{
                     "allow_type":"zip,rar",   #定义允许的上传的文件类型
                     "path":""                   #定义默认的上传路径
                     "max_size":"2222kb"       #定义允许上传的文件大小，0代表不限制
                 },,
                "image_manager":{
                     "path":""         #图片管理器的位置,如果没有指定，默认跟图片路径上传一样
                },
                "scrawl_upload":{
                    "path":""           #涂鸦图片默认的上传路径
                }
            }

Published

Category

It

Tags