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