说在前面:本项目改造自DjangoUeditor,本文档亦然
Ueditor HTML编辑器是百度开源的HTML编辑器,
本模块帮助在Django应用中集成百度Ueditor HTML编辑器。 安装包中已经集成Ueditor v1.4.33
使用DUEditor非常简单,方法如下:
因为配置个性化问题,本项目暂不支持pip install,如想使用,下载以后,把DUEditor扔到django项目目录即可
INSTALLED_APPS = (
#........
'DUEditor',
)
url(r'^ueditor/',include('DUEditor.urls' )),
from DUEditor.models import UEditorField
class Blog(models.Model):
Name=models.CharField(,max_length=100,blank=True)
Content=UEditorField('内容 ',height=100,width=500,default='test',toolbars='mini',options={"elementPathEnabled":True},blank=True)
说明:
UEditorField继承自models.TextField,因此你可以直接将model里面定义的models.TextField直接改成UEditorField即可。
UEditorField提供了额外的参数:
toolbars:配置你想显示的工具栏,取值为mini,normal,full,besttome, 代表小,一般,全部,涂伟忠贡献的一种样式。如果默认的工具栏不符合您的要求,您可以在settings里面配置自己的显示按钮。参见后面介绍。
options:其他UEditor参数,字典类型。参见Ueditor的文档ueditor_config.js里面的说明。
css:编辑器textarea的CSS样式
width,height:编辑器的宽度和高度,以像素为单位。
class TestUeditorModelForm(forms.ModelForm):
class Meta:
model=Blog
***********************************
如果不是用ModelForm,可以有两种方法使用:
1: 使用forms.UEditorField
from DUEditor.forms import UEditorField
class TestUEditorForm(forms.Form):
Description=UEditorField("描述",initial="abc",width=600,height=800)
2: widgets.UEditorWidget
from UEditor.widgets import UEditorWidget
class TestUEditorForm(forms.Form):
Content=forms.CharField(label="内容",widget=UEditorWidget(width=800,height=500,toolbars={}))
widgets.UEditorWidget和forms.UEditorField的输入参数与上述models.UEditorField一样。
在Django的Settings可以配置以下参数:
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":"" #图片管理器的位置,如果没有指定,默认跟图片路径上传一样
},
}
<head>
......
{{ form.media }} #这一句会将所需要的CSS和JS加进来。
......
</head>
注:运行collectstatic命令,将所依赖的css,js之类的文件复制到{{STATIC_ROOT}}文件夹里面。
{%load ueditor_tags %}
<script id="container" name="container" style="display: inline-block;" type="text/plain">
初始化内容
</script>
{%ueditor "container"%}
- 本程序安装包里面已经包括了Ueditor,不需要再额外安装。
- 目前暂时不支持ueditor的插件
- 别忘记了运行collectstatic命令,该命令可以将ueditor的所有文件复制到{{STATIC_ROOT}}文件夹里面
- Django默认开启了CSRF中间件,因此如果你的表单没有加入{% csrf_token %},那么当您上传文件和图片时会失败
- 不过编辑器里面的图片上传View做了CSRF取消设置