DjangoUeditor

最新推荐文章于 2025-06-16 18:16:06 发布

DreamingCCC

最新推荐文章于 2025-06-16 18:16:06 发布

阅读量516

点赞数

CC 4.0 BY-SA版权

分类专栏： django 学习

本文链接：https://blog.youkuaiyun.com/qq_41747979/article/details/89036111

学习同时被 2 个专栏收录

10 篇文章

订阅专栏

django

5 篇文章

订阅专栏

本文详细介绍如何将百度的Ueditor富文本编辑器整合到Django项目中，并解决使用过程中遇到的问题，包括配置、模型字段定义及错误修复等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ueditor属于百度的一个编辑器，看起来挺好用的，类似于word的操作面板，但功能肯定没有那么全的。

下面说一下怎么把这一编辑器加到我们的django项目中（GitHub地址）
现在github上已经更新到python3，但对django2.1支持好像不太好，所以不建议直接pip安装到库里边，这里我们可以直接拿到源码当成一个应用来加到你的项目中，作修改也方便很多。
git clone https://github.com/twz915/DjangoUeditor3.git 至你项目目录下。

现在按照GitHub一通设置，基本就可以用了。

#setting里install_app里新增，其中DjangoUeditor需要在项目目录，不在的话引入方式自己换
INSTALLED_APPS = [
    'DjangoUeditor',]

#这样配置目录可以保证上传的文件可以通过/static/...访问到，实际部署的时候这就没多大用处了
MEDIA_URL = '/static/media_file/'

#上传文件目录
MEDIA_ROOT = os.path.join(STATICFILES_DIRS[0], 'media_file')

在主urls里你要新增一项

path('ueditor/', include('DjangoUeditor.urls'))

在某模型类里边添加字段，各个参数github上有讲，或者自己查看config.json有更详细的说明

from DjangoUeditor.models import UEditorField
body = UEditorField(width='100%', height=300, toolbars="full",
           imagePath="images/%(basename)s_%(datetime)s.%(extname)s",
           filePath="files/", upload_settings={"imageMaxSize": 10240000}, command=None,
           blank=False, verbose_name='正文')

注册好这个模型类之后就可以在管理台看一下效果了,但很不幸会报错render() got an unexpected keyword argument ‘renderer’，那就百度呗，说的都是改django源码。
仔细分析这个错误其实不就是render函数有一个不知道是什么东西的renderer参数呗，最后在DjangoUeditor目录下的widgets.py看到render函数是这么定义的def render(self, name, value, attrs=None)，这敢情原来都没有renderer这个参数，而django里render函数是有这个参数的，百度好多做法都是注释掉源码，但其实这里可以在render函数里加个参数，修改后为def render(self, name, value, attrs=None, renderer=None)，好了这下不报错了。

为了显示图片你还需要修改下url地址拼接，在DjangoUeditor下的views.py修改url返回参数

'url': urljoin(USettings.gSettings.MEDIA_URL, OutputPathFormat)

由于是在两个服务器上部署，会存在跨域请求，还需在setting.py里新增

#UEDITOR_SETTINGS={ "config":{ #这里放ueditor.config.js里面的配置项....... }, "upload":{ #这里放php/config.json里面的配置项....... } }
#配置跨域访问路径
UEDITOR_SETTINGS = {"upload": {'imageUrlPrefix': SERVER_IP, 'scrawlUrlPrefix': SERVER_IP,
                                'snapscreenUrlPrefix': SERVER_IP, 'fileUrlPrefix': SERVER_IP,
                                "videoUrlPrefix": SERVER_IP}
                    }

原博客