Django嵌入富文本编辑器

最近几个晚上主要是做了两件事，一件是增加验证码功能，另外一件就是研究富文本编辑器（自己搭建网站才知道drupal这种CMS框架还是很厉害的，下载个模块就可以增加富文本编辑器），目前了解到的有两种，一种是百度的UEditor，官网没有提供python后端介绍，但实际上是可以使用的，需要多查些文档，本次使用的是django-ckeditor（很新），可以很方便的和django自带的admin后台结合起来。

安装：

pip install django-ckeditor

新建一个app专门用于管理文章：

python manage.py startapp Articles

在配置文件中添加如下内容到INSTALLED_APPS列表，第一个是管理后台，第二个是文章模型，如果你不需要上传图片，那么没必要添加ckeditor_uploaderAPP。

'django.contrib.admin',
'Articles',
'ckeditor',
'ckeditor_uploader',

定义文章模型，主要是文章有哪些字段，其中定义的RichTextUploadingField待会访问后台就可以看见编辑器了：

# Articles models.py
from django.contrib.auth.models import User  #在models里面导入user表
from ckeditor.fields import RichTextField  
from ckeditor_uploader.fields import RichTextUploadingField  #可以上传本地图片
import django.utils.timezone as timezone
class Categorys(models.Model): #分类表
    name = models.CharField(max_length=100) #名字规定一个大小，不浪费存储空间
    def __str__(self):
        return self.name
class Articles(models.Model):  #文章表
    title = models.CharField(max_length=100) #标题是字符串类型，规定一个最大字符
    profile  = models.CharField(max_length=100,null=True)
    thumbnail = models.ImageField(upload_to="uploadImg",null=True)
    # body = RichTextField()
    body = RichTextUploadingField()
    create_time = models.DateTimeField(default = timezone.now) #创建时间
    modified_time = models.DateTimeField(auto_now=True) #修改文章时间
    category = models.ForeignKey("Categorys",on_delete=models.CASCADE) #分类表，外键关联（models.ForeignKey）关联category表， Django2.0以上版本一定要加上on_delete，意思是：当删除文章所属的分类时，这篇文章也会被删除，级联删除
    author = models.ForeignKey(User,on_delete=models.CASCADE)
    def __str__(self):
        return self.title

在admin里面添加我们创建好的Articles和Categorys表

# admin.py
# Register your models here.
from.models import Articles,Categorys
admin.site.register(Articles)
admin.site.register(Categorys)

定义文章列表页视图和文章详情页视图，利用ListView快速搭建分类页，上面是一个列表视图类，下面是一个函数定义了文章内页，基本就是之前快速建立翻页文章的内容

# Articles views.py
from django.shortcuts import render
from Articles.models import Articles
from django.views.generic import ListView
#文章分类页
class ArticlesListView(ListView):
    template_name = 'html/articles/articles-list.html'
    model = Articles
    page_kwarg = 'p'
    paginate_by = 2
    ordering = 'pk'
    context_object_name = 'articles'
    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        res = self.getPaginationInfo(context['paginator'], context['page_obj'])
        context.update(res)
        return context
    def getPaginationInfo(self, paginator, page_obj):
        current_page = page_obj.number
        left_has_more = False
        right_has_more = False
        if current_page > 1:
            left_has_more = True
        if current_page < paginator.num_pages:
            right_has_more = True
        return {
            'left_has_more': left_has_more,
            'right_has_more': right_has_more,
            'num_pages': paginator.num_pages
        }

def getDetailedArticle(request,pk):
    res = Articles.objects.filter(pk=pk).first()
    context = {'res':res}
    # return HttpResponse("1")
    return render(request, "html/articles/articles-detail.html",context=context)

定义媒体文件路径及访问的url：

#settings.py
import os
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
# 配置ckeditor，即富文本编辑器上传所在路径，默认会对其分年月日
CKEDITOR_UPLOAD_PATH = 'upload/'

需要注意的是MEDIA_URL只在DEBUG时生效，如果在生产环境中，没有配置web服务器（例如nginx）去分发静态资源，你会发现各种图片丢失，官方也只推荐此种方式用于测试，我们可以收集静态资源，在上线后使用nginx定义别名来解决

#urls.py
from django.contrib import admin
from Articles.views import ArticlesListView,getDetailedArticle
urlpatterns = [
    path('admin', admin.site.urls),
    path('ckeditor', include('ckeditor_uploader.urls')),
    path("articles", ArticlesListView.as_view(),name="my_articles"),
    path("articles/<pk>", getDetailedArticle,name="detail-article"),
]

# 用于上传图片的路径,仅在测试时生效
from django.conf import settings
from django.conf.urls.static import static
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

准备工作做完了，开始配置迁移脚本，创建超级用户

python manage.py createsuperuser

登录django后台之后的界面如下，红色框内就是我新建的模型：

打开文章列表如下，可以看到富文本编辑器已经应用上去了：

当然，这只是将文章存储到数据库里面的过程，添加几篇文章，再利用之前创建的分类页和详情页将其展示在前台，配合一些css样式，看起来效果还是可以！

参考：

#django-ckeditor
https://github.com/django-ckeditor/django-ckeditor

YOLO813

Django嵌入富文本编辑器