flyEn'blog

DjangoUeditor的使用与配置

发表于 | 分类于

git地址——DjangoUeditor

导入项目

  1. 可直接克隆放入项目app目录下
  2. 使用pip工具在命令行运行：pip install DjangoUeditor

配置setting中INSTALL_APPS

1
2
3
4
INSTALLED_APPS = [
	...
    'apps.DjangoUeditor',
    ]

在Django的Settings可以配置以下参数（可选择性配置）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
UEDITOR_SETTINGS={
	"toolbars":{           #定义多个工具栏显示的按钮，允行定义多个
		"name1":[[ 'source', '|','bold', 'italic', 'underline']],
		"name2",[]
	},
	"images_upload":{
		"allow_type":"jpg,png",    #定义允许的上传的图片类型
		"max_size":"2222kb"        #定义允许上传的图片大小，0代表不限制
	},
	"files_upload":{
		"allow_type":"zip,rar",   #定义允许的上传的文件类型
		"max_size":"2222kb"       #定义允许上传的文件大小，0代表不限制
	},,
	"image_manager":{
		"location":""         #图片管理器的位置,如果没有指定，默认跟图片路径上传一样
	},
	
# 若使用默认配置
UEDITOR_SETTINGS = {"config": {'nothing': [[]]}}
}

注册url，在urls.py中增加

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

models中定义

1
2
3
4
5
# 摘自自己项目
from DjangoUeditor.models import UEditorField
class Blog(models.Model):
    rich_text = UEditorField(verbose_name="文章内容", width=800, height=400, toolbars="all", imagePath="richtext/pic/",
                             filePath="richtext/text/", command=None)

UEditorField提供了额外的参数(可选择性填写)：
    toolbars:配置你想显示的工具栏，取值为mini,normal,full,besttome, 代表小，一般，全部,涂伟忠贡献的一种样式。如果默认的工具栏不符合您的要求，您可以在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:编辑器的宽度和高度，以像素为单位。

forms.py中定义

1
2
3
4
5
6
7
8
9
10
11
12
13
# model表单，直接字段名给出即可
class BlogCreateForm(forms.ModelForm):
    class Meta:
        model = Blog
        fields = ('rich_text')
# 常规的form（方法一）
from  DjangoUeditor.forms import UEditorField
class TestUEditorForm(forms.Form):
    Description=UEditorField("描述",initial="abc",width=600,height=800)
# （方法二）
from  DjangoUeditor.widgets import UEditorWidget
class TestUEditorForm(forms.Form):
	Content=forms.CharField(label="内容",widget=UEditorWidget(width=800,height=500, imagePath='aa', filePath='bb',toolbars={}))

widgets.UEditorWidget和forms.UEditorField的输入参数与上述models.UEditorField一样。

模版页里面

1
2
3
4
5
<head>
    ......
    {{ form.media }}        #这一句会将所需要的CSS和JS加进来。
    ......
</head>

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

Fork me on GitHub