Django博客开发教程封面
Django博客开发教程 · 第 9 / 20 节

使用富文本编辑器添加数据

吴秀峰 44709 次阅读 39 条评论 ↓
适用 Django
尚未标注
适用 Python
尚未标注
学习难度
尚未标注
最近核验
尚未核验

教程适用范围尚待核验，示例行为可能随框架版本不同而变化。

在Django admin后台添加数据的时候，文章内容文本框想发布一篇图文并茂的文章需就得手写Html代码，这十分吃力，也没法上传图片和文件。这显然不是我等高大上程序猿想要的。

2.jpg

为提升效率，我们可以使用富文本编辑器添加数据。支持Django的富文本编辑器很多，这里我推荐使用DjangoUeditor，Ueditor是百度开发的一个富文本编辑器，功能强大。下面教大家安装如何使用DjangoUeditor。

1、首先我们先下载DjangoUeditor包。点击下面的链接进行下载！下载完成然后解压到项目根目录里。

DjangoUeditor.zip

2、settings.py里注册APP，在INSTALLED_APPS里添加'DjangoUeditor',。

myblog/settings.y
INSTALLED_APPS = [
    'django.contrib.admin',
    ....
    'DjangoUeditor', #注册APP应用
]

3、myblog/urls.py里添加url。

myblog/urls.py
...
from django.urls import path, include
#留意上面这行比原来多了一个include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.hello),
    path('ueditor/', include('DjangoUeditor.urls')), #添加DjangoUeditor的URL
]

4、修改blog/models.py里需要使用富文本编辑器渲染的字段。这里面我们要修改的是Article表里的body字段。

把原来的：

blog/models.py

body = models.TextField()

修改成：

blog/models.py
from DjangoUeditor.models import UEditorField #头部增加这行代码导入UEditorField

body = UEditorField('内容', width=800, height=500, 
                    toolbars="full", imagePath="upimg/", filePath="upfile/",
                    upload_settings={"imageMaxSize": 1204000},
                    settings={}, command=None, blank=True
                    )

留意里面的imagePath="upimg/", filePath="upfile/" 这两个是图片和文件上传的路径，我们上传文件，会自动上传到项目根目录media文件夹下对应的upimg和upfile目录里，这个目录名可以自行定义。有的人问，为什么会上传到media目录里去呢？那是因为之前我们在基础配置文章里，设置了上传文件目录media。

上面步骤完成后，我们启动项目，进入文章发布页面。提示出错：

render() got an unexpected keyword argument 'renderer'

3.jpg

错误页面上有提示，出错的地方是下面文件的93行。

F:\course\myblog\myblogvenv\lib\site-packages\django\forms\boundfield.py in as_widget, line 93

我这里使用的是最新版本的Django2.1.1所以报错，解决办法很简单。打开这个文件的93行，注释这行即可。

4.jpg

修改成之后，重新刷新页面，就可以看到我们的富文本编辑器正常显示。

5.jpg

留意，如果我们在富文本编辑器里，上传图片，在编辑器内容里不显示上传的图片。那我们还需要进行如下设置，打开myblog/urls.py文件，在里面输入如下代码：

myblog/urls.py
....
from django.urls import path, include, re_path
#上面这行多加了一个re_path
from django.views.static import serve
#导入静态文件模块
from django.conf import settings
#导入配置文件里的文件上传配置

urlpatterns = [
    path('admin/', admin.site.urls),
    ....
    re_path('^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),#增加此行
]

设置好了之后，图片就会正常显示。这样我们就可以用DjangoUeditor富文本编辑器发布图文并茂的文章了。


把学习连起来

登录后可保存阅读位置、标记章节完成，并在其他设备继续学习。

登录并保存学习进度 →
联系站长

微信：VIPdjango。技术问题建议先在 社区讨论 中交流，方便更多人参与和查阅。

章节讨论 39

  • 社区成员5323
    社区成员5323

    问题：报错 In template D:\开发者工具\Python3\lib\site-packages\django-2.2.5-py3.7.egg\django\contrib\admin\templates\admin\includes\fieldset.html, error at line 1

    参考：https://www.cnblogs.com/python-boy/p/11290606.html

  • 社区成员5670
    社区成员5670

    老师好，做到抛异常，我安装的是Django 最新的4.0版本,Python 3.10.2

    File "", line 883, in exec_module File "", line 241, in call_with_frames_removed File "D:\DEV\python\myblog\myblog\urls.py", line 19, in from django.conf.urls import include, url ImportError: cannot import name 'url' from 'django.conf.urls' (D:\DEV\python\myblog\venv\lib\site-packages\django\conf\urls_init.py)

    展开回复
  • 社区成员5692
    社区成员5692

    ImportError: cannot import name 'url' from 'django.conf.urls' 富文本这个包老是报错，最近Django4.0 又移除了url 这个方法，暂时不明白咋整了，求指导...谢谢

  • 汲
    汲

    Watching for file changes with StatReloader Exception in thread django-main-thread: Traceback (most recent call last): File "D:\360安全浏览器下载\Python37_64\lib\threading.py", line 927, in _bootstrap_inner self.run() File "D:\360安全浏览器下载\Python37_64\lib\threading.py", line 870, in run self._target(self.args, **self.kwargs) File "D:\课上练习\Django\test\blog2\venv\lib\site-packages\django\utils\autoreload.py", line 64, in wrapper fn(*args, **kwargs) File "D:\课上练习\Django\test\blog2\venv\lib\site-packages\django\core\management\commands\runserver.py", line 110, in inner_run autoreload.raise_last_exception() File "D:\课上练习\Django\test\blog2\venv\lib\site-packages\django\utils\autoreload.py", line 87, in raise_last_exception raise exception[1] File "D:\课上练习\Django\test\blog2\venv\lib\site-packages\django\core\management_init.py", line 375, in execute autoreload.check_errors(django.setup)() File "D:\课上练习\Django\test\blog2\venv\lib\site-packages\django\utils\autoreload.py", line 64, in wrapper fn(*args, **kwargs) File "D:\课上练习\Django\test\blog2\venv\lib\site-packages\django_init.py", line 24, in setup apps.populate(settings.INSTALLED_APPS) File "D:\课上练习\Django\test\blog2\venv\lib\site-packages\django\apps\registry.py", line 114, in populate app_config.import_models() File "D:\课上练习\Django\test\blog2\venv\lib\site-packages\django\apps\config.py", line 301, in import_models self.models_module = import_module(models_module_name) File "D:\360安全浏览器下载\Python37_64\lib\importlib_init.py", line 127, in import_module return _btstr._gcd_import(name[level:], package, level) File "", line 1006, in _gcd_import File "", line 983, in _find_and_load File "", line 967, in _find_and_load_unlocked File "", line 677, in _load_unlocked File "", line 728, in exec_module File "", line 219, in call_with_frames_removed File "D:\课上练习\Django\test\blog2\post\models.py", line 45, in class Article(models.Model): File "D:\课上练习\Django\test\blog2\post\models.py", line 56, in Article settings={}, command=None, blank=True) File "D:\课上练习\Django\test\blog2\venv\lib\site-packages\django\db\models\fields_init.py", line 2117, in init super().init(args, **kwargs) TypeError: init() got an unexpected keyword argument 'width' 请教一下添加富文本编辑器之后为什么那么多错误啊

  • 社区成员7310
    社区成员7310

    renderer报错的地方 可以看这个链接https://www.cnblogs.com/python-boy/p/11290606.html

    还有就是DjangoUeditor\urls.py里修改 高级版本的话，使用from django.urls import re_path 而不是from django.urls import re_path

    #DjangoUeditor\urls.p
from .views import get_ueditor_controller
from django.urls import re_path
# 这里需要修改from django.urls import url 为 from django.urls import path
urlpatterns = [
    re_path(r'^controller/$', get_ueditor_controller),
]