网站文章内容编辑器(如何支持Django的富文本编辑器添加数据？-八维教育)

　　网站文章内容编辑器(如何支持Django的富文本编辑器添加数据？-八维教育)

　　在django admin后台添加数据时，文章内容文本框需要手写Html代码才能发布图文并茂的文章，非常费力，而且图片和文件无法上传. 这显然不是像我这样的高级程序员想要的。

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

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

　　​​​DjangoUeditor.zip​​​​

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

　　​​myblog/settings.py​​​

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

　　将 url 添加到 3、myblog/urls.py。

　　​​myblog/urls.py​​​​

　　from django.urls import path, include<br />#留意上面这行比原来多了一个include<br /><br />urlpatterns = [<br /> path('admin/', admin.site.urls),<br /> path('', views.hello),<br /> path('ueditor/', include('DjangoUeditor.urls')), #添加DjangoUeditor的URL<br />]

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

　　放上原文：

　　​​blog/models.py​​​

　　body = models.TextField()

　　变成：

　　​​blog/models.py​​​

　　from DjangoUeditor.models import UEditorField #头部增加这行代码导入UEditorField<br /><br />body = UEditorField('内容', width=800, height=500, <br /> toolbars="full", imagePath="upimg/", filePath="upfile/",<br /> upload_settings={"imageMaxSize": 1204000},<br /> settings={}, command=None, blank=True<br /> )

　　注意 imagePath="upimg/", filePath="upfile/" 是上传图片和文件的路径。当我们上传文件时，会自动上传到项目根目录下的media文件夹下对应的upimg和upfile目录。这个目录名可以自己定义。有人问，为什么要上传到媒体目录？那是因为我们在基础配置中设置了上传文件目录媒体文章。

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

　　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<br />#上面这行多加了一个re_path<br />from django.views.static import serve<br />#导入静态文件模块<br />from django.conf import settings<br />#导入配置文件里的文件上传配置<br /><br />urlpatterns = [<br /> path('admin/', admin.site.urls),<br /> ....<br /> re_path('^media/(?P.*)$', serve, {'document_root': settings.MEDIA_ROOT}),#增加此行<br />]

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

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