1.安装模块
（pillow是python的一个图像处理库）
pip install django-ckeditor
pip install pillow
2.编辑seetings.py配置文件
INSTALLED_APPS = [ 'ckeditor',#富文本编辑器 'ckeditor_uploader'#富文本编辑器上传图片模块 ] #媒体文件配置 MEDIA_URL = "/media/" MEDIA_ROOT = os.path.join(BASE_DIR, "media") CKEDITOR_UPLOAD_PATH = "images" # 上传图片保存路径，如果没有图片存储或者使用自定义存储位置，那么则直接写 ' ' ,如果是使用django本身的存储方式，那么你就指名一个目录用来存储即可。 # 富文本编辑器ckeditor配置 CKEDITOR_CONFIGS = { #（1）默认配置 # 'default': { # 'toolbar': 'full', # 工具条功能 # 'height': 300, # 编辑器高度 # 'width': 800, # 编辑器宽 # }, #（3）自定义配置带代码块显示 'default': { 'toolbar': ( ['div', 'Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'], ['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', 'ShowBlocks', '-', 'About', 'pbckcode'], ['Blockquote', 'CodeSnippet'], ), 'width': 'auto', # 添加按钮在这里 'toolbar_Custom': [ ['NumberedList', 'BulletedList'], ['Blockquote', 'CodeSnippet'], ], # 插件 'extraPlugins': ','.join(['codesnippet', 'widget', 'lineutils', ]), }, }
3.编辑urls.py路由
from django.conf.urls import url, include from django.contrib import admin from django.conf.urls.static import static from django.conf import settings from editer import views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^ckeditor/', include('ckeditor_uploader.urls')), url(r'^index/', views.index),#测试获取后台编辑的内容用的 ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) ## 没有这一句无法显示上传的图片
4.app应用的models.py中的应用
from django.db import models from ckeditor.fields import RichTextField from ckeditor_uploader.fields import RichTextUploadingField class SPUModel(models.Model): '''这是spu表格''' name = models.CharField(max_length=32, verbose_name='商品名') sales = models.CharField(max_length=20, verbose_name='销售量') desc_pack = RichTextUploadingField(default='', verbose_name='商品详情') def __str__(self): return self.name class Meta: verbose_name = '商品表' db_table = verbose_name verbose_name_plural = verbose_name
5.数据库迁移指令
makemigrations
migrate
6.创建admin超级用户
createsuperuser
7.app应用的admin.py文件中注册表
from django.contrib import admin from editer import models # Register your models here. admin.site.register(models.SPUModel)
8.启动项目，进入admin后台管理编辑即可
9.在templates文件夹中编写测试url返回页面index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CKEditorTest</title> </head> <body> <div> {% for obj in all %} <hr> <h2>第{{ forloop.counter }}篇：</h2> <h2>标题：{{ obj.name }}</h2> <h3>销量：{{ obj.sales }}</h3> {{ obj.desc_pack | safe }} {% endfor %} </div> </body> </html>
10.app应用的views.py文件中编写测试url对应的视图函数
from django.shortcuts import render from editer import models # Create your views here. def index(request): all_obj = list(models.SPUModel.objects.all().all().values('name','sales','desc_pack')) return render(request, 'index.html', {'all': all_obj})
11.重启项目，浏览器测试http://127.0.0.1:8000/index/
参考博客：https://blog.csdn.net/weixin_43158056/article/details/93911844