1. 使用html丰富页面

15 后台富文本编辑 - 图1 修改artcile_details.html

  1. <p class='article_content'>{{ article.content|safe }}</p>

修改articles_list.html

 <h3 id='bd'>{{ article.content|striptags|truncatewords:15 }}</h3>

2. 使用django-ckeditor

选择标准:

具有基本的富文本编辑功能

可以上传图片

可以查看源码

又持续更新维护

安装

  1. pip install django-ckeditor
  2. settings中注册应用 ckeditor
  3. 配置model 把字段改成richTextField
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    's2aclab',
    'ckeditor', 
]


LANGUAGE_CODE = 'zh-hans'    #    zh-Hans 繁体中文 zh-hans 简体中文

models.py

from ckeditor.fields import RichTextField
content = RichTextField()

2.1 添加图片上传功能

  1. pip install pillow
  2. 注册 ‘ckeditor_uploader’
  3. 配置settings
  4. 配置url
  5. 配置model 把字段你改成RichTextUploadingFeild

2. 注册 ‘ckeditor_uploader’

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    's2aclab',
    'ckeditor',
    'ckeditor_uploader',
]

# 配置media
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'meida')


# 配置ckeditor
CKEDITOR_UPLOAD_PATH = 'upload/'

4. 配置project/urls.py

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('',views.home,name='home'),
    path('admin/', admin.site.urls),

    #meida
    path('ckeditor',include('ckeditor_uploader.urls')),
    path('article/',include('s2aclab.urls')),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  1. 修改models.py
from ckeditor_uploader.fields import RichTextUploadingField

 content = RichTextUploadingField()

15 后台富文本编辑 - 图2

15 后台富文本编辑 - 图3