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 %}，那么当您上传文件和图片时会失败
Vue+Django生鲜电商项目-MxShop.zip
需积分: 0 12 浏览量
更新于2023-11-04
收藏 20.64MB ZIP 举报
Vue和Django是两个在Web开发领域非常流行的框架，它们分别负责前端和后端的开发。Vue.js 是一个轻量级的渐进式JavaScript框架，以其易用性、灵活性和可扩展性受到开发者喜爱；而Django则是一个强大的Python Web框架，提供了完整的MVC（模型-视图-控制器）架构，支持快速开发和安全应用。"Vue+Django生鲜电商项目-MxShop"是一个综合性的电商应用实例，结合了这两者的优点，构建了一个高效的在线购物平台。
在该项目中，Vue.js主要用于构建用户界面，提供丰富的组件库，如Vue Router用于路由管理，Vuex用于状态管理，以及axios用于与后台API进行数据交互。Vue的单文件组件（Single File Components, SFC）使得代码结构清晰，易于维护。开发者可以通过Vue CLI工具快速初始化项目，并利用Vue的生命周期钩子函数处理页面加载、更新等逻辑。
Django则作为后端服务器，负责处理业务逻辑、数据库操作和API接口的实现。在Django中，模型（Model）定义了数据结构，视图（View）处理HTTP请求并返回响应，模板（Template）负责渲染HTML。此外，Django的ORM（对象关系映射）层简化了数据库操作，内置的管理员界面方便了数据管理和维护。Django REST Framework是一个强大的扩展，可以便捷地构建RESTful API，与Vue.js前端进行数据交换。
在生鲜电商项目中，可能涉及的功能模块包括商品展示、购物车、订单系统、支付接口集成、用户登录注册、评论系统等。商品展示通常会通过API从Django后端获取数据，然后在Vue前端动态渲染。购物车功能需要实现添加、删除商品，以及计算总价等功能，这些逻辑可以通过Vuex来管理。订单系统需要处理用户的购买行为，包括生成订单、保存用户地址、选择支付方式等。支付接口集成通常涉及到第三方支付平台如支付宝或微信支付，需要调用其提供的SDK来完成支付流程。用户系统则需要处理注册、登录、密码找回等操作，确保用户信息安全。
为了保证项目的稳定运行，还需要考虑性能优化，如使用缓存策略减少数据库查询压力，采用CDN加速静态资源的加载，以及利用Vue的懒加载特性按需加载组件。此外，测试是必不可少的一环，单元测试、集成测试和端到端测试能确保每个功能的正确性。
"Vue+Django生鲜电商项目-MxShop"是一个全面的实战项目，涵盖了前后端开发的多个方面，对学习和理解Vue.js和Django的整合应用有很高的参考价值。开发者通过研究这个项目，不仅可以提升Web开发技能，还能了解到电商应用的常见设计模式和实现方法。
Vue+Django生鲜电商项目-MxShop.zip （1232个子文件） 
getContent.ashx 1KB getContent.asp 420B config 335B bootstrap.css 123KB bootstrap.min.css 100KB ueditor.css 43KB ueditor.min.css 34KB font-awesome.css 21KB video-js.css 21KB bootstrap-theme.css 19KB select2.css 19KB image.css 18KB font-awesome.min.css 17KB bootstrap-theme.min.css 17KB selectize.bootstrap2.css 15KB video.css 15KB attachment.css 14KB selectize.default.css 11KB video-js.min.css 11KB selectize.legacy.css 11KB selectize.bootstrap3.css 10KB datepicker.css 10KB selectize.css 8KB xadmin.main.css 8KB shCoreDefault.css 7KB xadmin.responsive.css 4KB bootstrap-modal.css 4KB scrawl.css 4KB bootstrap-clockpicker.css 4KB xadmin.form.css 3KB bootstrap-image-gallery.css 3KB bootstrap-clockpicker.min.css 3KB codemirror.css 3KB bootstrap-timepicker.css 3KB charts.css 3KB bootstrap-image-gallery.min.css 2KB bootstrap-timepicker.min.css 2KB background.css 2KB xadmin.widget.select-transfer.css 2KB bootstrap-xadmin.css 2KB emotion.css 2KB dialogbase.css 2KB music.css 2KB xadmin.mobile.css 1KB edittable.css 1KB snap.css 1KB xadmin.plugin.formset.css 1KB xadmin.widget.editable.css 1KB template.css 1KB xadmin.page.dashboard.css 790B webuploader.css 515B help.css 389B xadmin.plugin.quickfilter.css 248B xadmin.plugins.css 175B xadmin.plugin.aggregation.css 95B iframe.css 41B bootstrap-multiselect.css 0B fontawesome-webfont.eot 37KB glyphicons-halflings-regular.eot 20KB iconfont.fcaaa27.eot 12KB 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 loading.gif 4KB icons-all.gif 4KB select2-spinner.gif 2KB ajax-loader.gif 2KB videologo.gif 2KB 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共 1232 条
- 1
- 2
- 3
- 4
- 5
- 6
- 13
5星 · 资源好评率100%192 浏览量
2023-06-08 上传
193 浏览量
2019-10-04 上传
187 浏览量
5星 · 资源好评率100% 5星 · 资源好评率100%140 浏览量
171 浏览量
2021-05-03 上传
2023-08-26 上传
2024-07-26 上传
155 浏览量
2023-11-27 上传
2024-01-31 上传
资源评论
武昌库里写JAVA
- 粉丝: 6994
- 资源: 3205
最新资源
- Matlab根据flac、pfc或其他软件导出的坐标及应力、位移数据再现云图 案例包括导出在flac6.0中导出位移的fish代码（也可以自己先准备软件导出的坐标数据及对应点的位移或应力数据，可根据需
- 拳皇97.exe拳皇972.exe拳皇973.exe
- 捕鱼达人1.exe捕鱼达人2.exe捕鱼达人3.exe
- 医疗骨折摄像检测29-YOLO（v5至v9）、COCO、CreateML、Darknet、Paligemma数据集合集.rar
- ks滑块加密算法与源代码
- 医护人员检测23-YOLOv8数据集合集.rar
- 1.电力系统短路故障引起电压暂降 2.不对称短路故障分析 包括：共两份自编word＋相应matlab模型 1.短路故障的发生频次以及不同类型短路故障严重程度，本文选取三类典型的不对称短路展开研究
- C#连接sap NCO组件 X64版
- 开源基于51单片机的多功能智能闹钟设计，课设毕设借鉴参考
- 深度强化学习电气工程复现文章，适合小白学习 关键词：能量管理 深度学习 强化学习 深度强化学习 能源系统 优化调度 编程语言：python平台 主题：用于能源系统优化调度的深度强化学习算法的性能比较
