这几天开发一个电商项目,需要后台写文章,前台展示,这显然是富文本比较合适,但是在使用过ckeditor之后,发现功能太少了,而且连基本的文本居中功能都没有,于是就想试试其他富文本编辑器,在体验过后,发现UEditor的体验是目前最好的,直接在Word文档里编辑,之后直接复制粘贴就等得到同样的效果。

配置

安装DjangoUeditor

  1. git clone https://github.com/twz915/DjangoUeditor3.git

  2. python setup.py install

也可以选择直接使用pip install git+https://github.com/twz915/DjangoUeditor3.git

据了解DjangoUeditor仅支持Python2,对于Python3并不友好,所有Github上有人适配了Python3

GitHub地址:https://github.com/twz915/DjangoUeditor3.git

但是这个不适配版本大于2.0的Django,问题出在urls里面,Django2.0之后urls去除了url函数,改为了re_path,所以需要在urls.py中修改一下引入

image.png

在APP中注册DjangoUeditor

INSTALLED_APPS = [
......
'DjangoUeditor',
]

配置DjangoUeditor

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": "" # 图片管理器的位置,如果没有指定,默认跟图片路径上传一样
}
}

另外需要配置MEDIA_URLMEDIA_ROOT,即富文本中图片默认上传的位置

注册路由

urlpatterns = [
......
re_path(r'^ueditor/', include('DjangoUeditor.urls'))
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

在Modes中绑定Ueditor

from DjangoUeditor.models import UEditorField
class Article(models.Model):
content = UEditorField('文章内容', height=400, width=1000, imagePath='article/', toolbars='full')

imagePath为上传图片路径,即MEDIA_ROOT + imagePath

另外还可添加参数filePath 文件上传的路径

其他一些详细的参数,可以参考Github上的说明

效果

image.png