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

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

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

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

DjangoUeditor.zip

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

myblog/settings.py

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

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

myblog/urls.py

from django.urls import path, include
#留意上面这行比原来多了一个includeurlpatterns = [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 #头部增加这行代码导入UEditorFieldbody = 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'

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

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

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

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

留意，如果我们在富文本编辑器里，上传图片，在编辑器内容里不显示上传的图片。那我们还需要进行如下设置，打开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富文本编辑器发布图文并茂的文章了。

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

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

Django 3.2.5博客开发教程:用Admin管理后台管理数据
上节我们我们把数据库迁移到数据库里去了,那么现在我们数据库里是个什么样的情况呢?我们点击Pycharm右上角的Database,然后在网站项目里选中我们的数据库文件db.sqlite3,把它拖到Dat ...
Django实现的博客系统中使用富文本编辑器ckeditor
操作系统为OS X 10.9.2,Django为1.6.5. 1.下载和安装 1.1 安装 ckeditor 下载地址 https://github.com/shaunsephton/django-c ...
Django 3.2.5博客开发教程:一些常用的模板使用方法
一.django static文件的引入方式 1.在django project中创建 static文件夹 2.settings.py中配置要在 STATIC_URL = '/static/' 下边 ...
Django 3.2.5博客开发教程:基础配置
创建项目之后,我们需要对项目进行最基础的配置.这些配置是我们做项目的时候必须要配置的,所以我们先提前配置好. 我们打开myblog目录下的settings.py文件. 一.设置域名访问权限 myblo ...
Django 3.2.5博客开发教程:HelloWorld欢迎页面
基础配置做好了之后,我们就可以先迁移数据到数据库,然后启动我们的项目,感受Django的魅力. 在Pycharm左下角底部的Terminal,会弹出Terminal终端窗口,Pycharm自动会帮我们 ...
Django 3.2.5博客开发教程:URL与视图函数
在讲URL与视图函数之前我们先给大家简单介绍一下用户访问网站的流程.我们访问一个网站的时候,一般先打开浏览器,然后在浏览器的地址栏里输入一个网址,也就是URL,然后回车,我们就可以在浏览器里看到这个网 ...
Django 3.2.5博客开发教程:体验django模板
上面我们有说过,用户发送请求的时候,视图会返回一个响应,响应可以是一个重定向,一个404错误,一个XML文档,一张图片或者是一个HTML内容的网页.前面几个返回的信息比较有限,我们重点更多是放在HTM ...
Django 3.2.5博客开发教程:体验数据查询
进行数据查询之前,我们需要先进入我们的管理后台,在里面添加一些数据.然后我们用Pycharm打开我们的数据库.具体操作方法:用Pycharm可视化操作数据库我们的数据结构长这般模样: 双击blog_ ...
Django 3.2.5博客开发教程:实现模板之前的分析与准备
在之前的体验django模板.体验数据查询以及一些常用的模板使用方法文章里,向大家介绍了如何将数据库的数据展现到网页上,和一些简单的模板使用方法.之后我们就开始实现各种页面的展现. 在此之前,我们先从 ...

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

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

最新文章

热门文章