这几天开发一个电商项目，需要后台写文章，前台展示，这显然是富文本比较合适，但是在使用过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中修改一下引入

088f89f7cf03ec4829827587cf884f1c.webp

在APP中注册DjangoUeditor

1
2
3
4

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

配置DjangoUeditor

在settings.py中添加下面配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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_URL和MEDIA_ROOT，即富文本中图片默认上传的位置

注册路由

1
2
3
4

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

在Modes中绑定Ueditor

1
2
3

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上的说明

效果

4c90a989d49cd308d9ddc24ad5ddc7c0.webp