首页 > 其他分享 >Django博客开发教程:使用富文本编辑器添加数据

Django博客开发教程:使用富文本编辑器添加数据

时间:2023-08-08 14:13:34浏览次数:43  
标签:文本编辑 DjangoUeditor settings py 教程 Django urls path

在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富文本编辑器发布图文并茂的文章了。

标签:文本编辑,DjangoUeditor,settings,py,教程,Django,urls,path
From: https://www.cnblogs.com/yoloooo/p/17614011.html

相关文章

  • Django博客开发教程:用Admin管理后台管理数据
    上节我们我们把数据库迁移到数据库里去了,那么现在我们数据库里是个什么样的情况呢?我们点击Pycharm右上角的Database,然后在网站项目里选中我们的数据库文件db.sqlite3,把它拖到Database框里。然后点击db,就可以查看到我们的网站数据库,我们可以对数据进行增、删、改、查操作。更多......
  • Docker使用教程及常用命令
    Docker是一个开源的应用容器引擎,允许开发者将应用以及依赖打包到一个可移植的容器中,然后发布到任何流行的Linux机器或Windows上。它非常适用于持续集成与持续交付(CI/CD)。1.安装Docker首先,你需要在你的服务器上安装Docker。根据你的操作系统,可以选择适合的安装方法。(1)对于Ubunt......
  • 无涯教程-Perl - exp函数
    描述此函数将e(自然对数底数)返回到EXPR的幂。如果省略EXPR,则给出exp($_)。语法以下是此函数的简单语法-expEXPRexp返回值此函数不返回任何值。参考链接https://www.learnfk.com/perl/perl-exp.html......
  • odoo系统局域网及外网访问?快解析内网穿透方案教程
    首先,带着大家了解一下odoo是什么?前身是OpenERP。Odoo是一个广泛使用的开源ERP(企业资源规划)系统,它的主要特点之一就是高度模块化的设计。此套装可满足中小型企业的一切应用需求,例如,企业基本的进销存、采购、销售、MRP生产制造、产品保质量保障、企业招聘、员工合同、休假、午餐管......
  • odoo系统局域网及外网访问?快解析内网穿透方案教程
    首先,带着大家了解一下odoo是什么?前身是OpenERP。Odoo是一个广泛使用的开源ERP(企业资源规划)系统,它的主要特点之一就是高度模块化的设计。此套装可满足中小型企业的一切应用需求,例如,企业基本的进销存、采购、销售、MRP生产制造、产品保质量保障、企业招聘、员工合同、休假、午餐管......
  • 免费获取最新WebStorm激活码,永久激活WebStorm教程
    分享的WebStorm2023.2最新激活注册码,可免费永久激活,亲测有效,下面是详细文档哦~申明:本教程WebStorm激活码收集于网络,请勿商用,仅供个人学习使用,如有侵权,请联系作者删除。若条件允许,希望大家购买正版!PS:本教程最新更新时间:2023年08月08日~前言前端开发工具中,有小伙伴们......
  • 传奇开区教程 开新区为何要清理数据
    最开始在游戏里用GM号在后台里点各种初始化,然后点玩家数据清理,清理完毕后就下线!进行以下操作!1.清除玩家帐号数据库删除:D:\xMirServer\loginsrv\IDDB下的两个文件ID.DB和ID.DB.IDX2.清除玩家物品数据库删除:D:\xMirServer\Dbserver\FDB 下的三个文件Hum.db和Mir.db和Mir.db.idx3......
  • Django博客开发教程:基础配置
    创建项目之后,我们需要对项目进行最基础的配置。这些配置是我们做项目的时候必须要配置的,所以我们先提前配置好。我们打开myblog目录下的settings.py文件。一、设置域名访问权限myblog/settings.pyALLOWED_HOSTS = []      #修改前ALLOWED_HOSTS = ['*']   #修改......
  • 视频融合平台视频汇聚平台LiteCVR用户反馈接入设备显示离线处理教程
    LiteCVR视频融合平台是一款基于云边端一体化架构的应用程序,旨在提供强大的数据接入、处理和分发功能。该平台支持多种协议接入,包括市场主流标准协议和厂家私有协议及SDK,例如国标GB28181、RTMP、RTSP/Onvif、海康Ehome、海康SDK、宇视SDK等。我们收到了用户的反馈,他们在长时间使用Li......
  • Midjourney API 申请和接入小白教程
    MidjourneyAPI为开发者提供了快速接入Midjourney平台的能力,它允许开发者通过简单的代码调用来访问Midjourney平台上的生成高质量的图像能力。本文将提供一份MidjourneyAPI的入门教程,以帮助开发者快速了解如何申请和接入该API。申请APIKey申请MidjourneyAPI的第一......