Django框架是用Python进行Web开发的重要框架,进行Web开发通常会用到网页编辑器,百度的Ueditor网页编辑器功能非常强大,不直接支持python,但有Django第三方插件支持这就是DjangoUeditor编辑器。现把使用方法整理出来供大家开发时参考:
1、下载Ueditor,最后版本:1.4.3.3
UEditor - 下载ueditor.baidu.com任意下载一个版本,如:PHP版,解压后,放在Django目录下。
2、安装DjangoUeditor
在线安装版本比较旧,不支持Python 3。从GitHub下载支持python3的DjangoUeditor3:
https://github.com/twz915/DjangoUeditor3/github.com然后离线安装,执行python setup.py install 安装。
3、配置DjangoUeditor
(1)、settings.py中的配置
在settings.py 最后添加设置及文件上传路径
UEDITOR_SETTINGS = {
"toolbars": { #定义多个工具栏显示的按钮,允行定义多个
"name1": [['source', '|', 'bold', 'italic', 'underline']],
"name2": []
},
"images_upload":{
"allow_type":"jpg,png,gif", #定义允许的上传的图片类型
"max_size":"10222kb" #定义允许上传的图片大小,0代表不限制
},
"files_upload":{
"allow_type":"zip,rar,pdf,docx,doc,xls,xlsx,ppt,pptx,mp4,flv,swf", #定义允许的上传的文件类型
"max_size":"102222kb" #定义允许上传的文件大小,0代表不限制
},
"image_manager": {
"location": "" #图片管理器的位置,如果没有指定,默认跟图片路径上传一样
}
}
# DjangoEditor上传目录配置
MEDIA_URL='/static/ueupload/'
MEDIA_ROOT='./ExamWeb/static/ueupload/'
(2)、urls.py 中添加路由
url(r'^ueditor/', include('DjangoUeditor.urls'))
4、models.py中引入UEditorField并绑定
from DjangoUeditor.models import UEditorField
5、模板页面使用
(1)、引入JS脚本
<script src="{% static '/plugs/ueditor/ueditor.config.js'%}"></script>
<script src="{% static '/plugs/ueditor/ueditor.all.min.js'%}"></script>
(2)、绑定富文本框
<script>var ue = UE.getEditor('qcontent',{
'initialFrameWidth':1000,
'initialFrameHeight':150,
'serverUrl': "/ueditor/controller/?imagePathFormat=images/&filePathFormat=files/"
});
</script>
提示:settings.py 中关于上传路径的配置一定要注意,曾在这里浪费很多时间,无法正常上传。注意MEDIA_ROOT的设置,在服务器中目录的配置会有问题,用BASE_DIR来设置APP目录,否则在Aapache下上传目录会建到C盘或Aapache目录。
MEDIA_URL='/static/ueupload/'
MEDIA_ROOT=BASE_DIR+'/static/ueupload/'