Ueditor HTML编辑器是百度开源的HTML编辑器,
本模块帮助在Django应用中集成百度Ueditor HTML编辑器。
安装包中已经集成Ueditor v1.3.6
使用Django-Ueditor非常简单,方法如下:
1、安装方法
**方法一:下载安装包,在命令行运行:
python setup.py install
**方法二:使用pip工具在命令行运行(推荐):
pip install DjangoUeditor
2、在INSTALL_APPS里面增加DjangoUeditor app,如下:
INSTALLED_APPS = (
#........
'DjangoUeditor',
)
3、在urls.py中增加:
url(r'^ueditor/',include('DjangoUeditor.urls' )),
4、在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)
说明:
UEditorField继承自models.TextField,因此你可以直接将model里面定义的models.TextField直接改成UEditorField即可。
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:编辑器的宽度和高度,以像素为单位。
5、在表单中使用非常简单,与常规的form字段没什么差别,如下:
class TestUeditorModelForm(forms.ModelForm):
class Meta:
model=Blog
***********************************
如果不是用ModelForm,可以有两种方法使用:
1: 使用forms.UEditorField
from DjangoUeditor.forms import UEditorField
class TestUEditorForm(forms.Form):
Description=UEditorField("描述",initial="abc",width=600,height=800)
2: widgets.UEditorWidget
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一样。
6、Settings配置
在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":"" #图片管理器的位置,如果没有指定,默认跟图片路径上传一样
},
}
7、在模板里面:
<head>
......
{{ form.media }} #这一句会将所需要的CSS和JS加进来。
......
</head>
注:运行collectstatic命令,将所依赖的css,js之类的文件复制到{{STATIC_ROOT}}文件夹里面。
8、高级运用:
****************
动态指定imagePath、filePath、scrawlPath、imageManagerPath
****************
这几个路径文件用于保存上传的图片或附件,您可以直接指定路径,如:
UEditorField('内容',imagePath="uploadimg/")
则图片会被上传到"{{MEDIA_ROOT}}/uploadimg"文件夹,也可以指定为一个函数,如:
def getImagePath(model_instance=None):
return "abc/"
UEditorField('内容',imagePath=getImagePath)
则图片会被上传到"{{MEDIA_ROOT}}/abc"文件夹。
****************
使上传路径(imagePath、filePath、scrawlPath、imageManagerPath)与Model实例字段值相关
****************
在有些情况下,我们可能想让上传的文件路径是由当前Model实例字值组名而成,比如:
class Blog(Models.Model):
Name=models.CharField('姓名',max_length=100,blank=True)
Description=UEditorField('描述',blank=True,imagePath=getUploadPath,toolbars="full")
id | Name | Description
------------------------------------
1 | Tom | ...........
2 | Jack | ...........
我们想让第一条记录上传的图片或附件上传到"{{MEDIA_ROOT}}/Tom"文件夹,第2条记录则上传到"{{MEDIA_ROOT}}/Jack"文件夹。
该怎么做呢,很简单。
def getUploadPath(model_instance=None):
return "%s/" % model_instance.Name
在Model里面这样定义:
Description=UEditorField('描述',blank=True,imagePath=getUploadPath,toolbars="full")
这上面model_instance就是当前model的实例对象。
还需要这样定义表单对象:
from DjangoUeditor.forms import UEditorModelForm
class UEditorTestModelForm(UEditorModelForm):
class Meta:
model=Blog
特别注意:
**表单对象必须是继承自UEditorModelForm,否则您会发现model_instance总会是None。
**同时在Admin管理界面中,此特性无效,model_instance总会是None。
**在新建表单中,model_instance由于还没有保存到数据库,所以如果访问model_instance.pk可能是空的。因为您需要在getUploadPath处理这种情况
class UEditorTestModelForm(UEditorModelForm):
class Meta:
model=Blog
8、其他事项:
**本程序版本号采用a.b.ccc,其中a.b是本程序的号,ccc是ueditor的版本号,如1.2.122,1.2是DjangoUeditor的版本号,122指Ueditor 1.2.2.
**本程序安装包里面已经包括了Ueditor,不需要再额外安装。
**目前暂时不支持ueditor的插件
**别忘记了运行collectstatic命令,该命令可以将ueditor的所有文件复制到{{STATIC_ROOT}}文件夹里面
**Django默认开启了CSRF中间件,因此如果你的表单没有加入{% csrf_token %},那么当您上传文件和图片时会失败
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
本项目是一个Django实现的餐厅点餐系统,主要针对计算机专业学生小的课程设计实现。 包括所有代码,数据库信息等,保证项目可以正常运行 技术: 后端:Python、Django 前端:jquery、bootstrap 数据库:sqlite(Django默认数据库) 系统功能: 用户登录 点餐、加入购物车、对餐品进行评论、对系统进行评论、查看系统新闻以及通知 在数据库管理页面对数据进行管理
资源推荐
资源详情
资源评论
收起资源包目录
Python Django 餐厅点餐项目 (594个子文件)
getContent.ashx 1KB
getContent.asp 420B
bootstrap.css 143KB
bootstrap.min.css 118KB
ueditor.css 43KB
ueditor.min.css 34KB
bootstrap-theme.css 26KB
bootstrap-theme.min.css 23KB
video-js.css 21KB
image.css 19KB
video.css 15KB
attachment.css 15KB
video-js.min.css 11KB
shCoreDefault.css 7KB
style.css 5KB
scrawl.css 4KB
codemirror.css 3KB
charts.css 3KB
background.css 2KB
emotion.css 2KB
home.css 2KB
dialogbase.css 2KB
music.css 2KB
edittable.css 1KB
template.css 1KB
news.css 780B
webuploader.css 515B
products.css 452B
help.css 389B
iframe.css 41B
glyphicons-halflings-regular.eot 20KB
vjs.eot 3KB
UEditorSnapscreen.exe 508KB
UEditorSnapscreen.exe 508KB
wface.gif 49KB
jxface2.gif 40KB
yface.gif 28KB
bface.gif 27KB
icons.gif 20KB
file-icons.gif 20KB
file-icons.gif 20KB
tface.gif 19KB
fface.gif 18KB
cface.gif 8KB
icons-all.gif 4KB
videologo.gif 2KB
newsicon.gif 1KB
cancelbutton.gif 1KB
button-bg.gif 1KB
lock.gif 1KB
alignicon.gif 1KB
word.gif 1019B
icon_doc.gif 1012B
icon_psd.gif 1009B
icon_rar.gif 1007B
icon_xls.gif 1005B
icon_ppt.gif 1001B
icon_mv.gif 1001B
icon_pdf.gif 996B
icon_mp3.gif 986B
icon_txt.gif 970B
icon_jpg.gif 950B
icon_exe.gif 949B
icon_chm.gif 923B
loading.gif 734B
icons.gif 453B
icons.gif 453B
icons.gif 453B
success.gif 445B
success.gif 445B
success.gif 445B
cursor_v.gif 370B
cursor_h.gif 253B
anchor.gif 184B
unhighlighted.gif 111B
highlighted.gif 111B
bg.gif 84B
pagebreak.gif 54B
spacer.gif 43B
0.gif 43B
sectiondemo.html 11KB
home.html 9KB
uparsedemo.html 8KB
base.html 8KB
completeDemo.html 6KB
index.html 6KB
wordimage.html 6KB
map.html 6KB
emotion.html 6KB
filterRuleDemo.html 6KB
image.html 5KB
customToolbarDemo.html 5KB
show.html 5KB
charts.html 5KB
link.html 4KB
productList.html 4KB
insertframe.html 4KB
sortableDemo.html 4KB
video.html 4KB
searchreplace.html 4KB
共 594 条
- 1
- 2
- 3
- 4
- 5
- 6
fromone0
- 粉丝: 5
- 资源: 3
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- QT 调用最新的libusb库和stm32f407进行BULK进行通讯的DEMO
- comsol顺层钻孔瓦斯抽采,考虑瓦斯吸附解吸的双孔隙介质数值模拟模型
- 风储惯量调频仿真模型,风电调频,一次调频,四机两区系统,采用频域模型法使得风电渗透率25%,附加惯性控制,储能附加下垂控制,参与
- 风光储超级电容混合储能HESS三相LC并网仿真系统构成: 光伏发电系统、风力发电系统、混合储能系统、三相逆变、LC滤波、大电网
- 三相风光储LCL并网风光储三相并网直流微电网 仿真系统构成: 光伏发电系统、风力发电系统、储能系统、负载、逆变器lcl大电网 附
- 2023-04-06-项目笔记 - 第二百七十九阶段 - 4.4.2.277全局变量的作用域-277 -2025.10.07
- IF开环切龙伯格观测器永磁同步电机无位置传感器控制全离散化仿真,可生成基于STM32工程代码,仿真工程代码均有 另配有手把手视频
- 上位机通过PCle把数据发送给FPGA,FPGA打包后通过光纤模块发送出去,同时FPGA保存光纤过来的数据到DDR3中,当DDR
- 卡尔曼信号滤波demo,MATLAB仿真,对比算法还有滑动平均,以及高斯滤波算法,有详细的注释,附有文档帮助理解算法
- 数电实验74LS161模7计数器multisim仿真
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
- 3
- 4
前往页