1. 我的环境 Python3.8 虚拟环境 + win10
django-simpleui + django admin 显示
(python38_imooc) C:\python_practice\wleducation>pip list
Package Version
--------------- --------
asgiref 3.3.1
Django 3.1.5
django-ckeditor 6.0.0
django-js-asset 1.2.2
django-simpleui 2021.1.1
future 0.18.2
mysqlclient 2.0.3
Pillow 8.1.0
pip 20.3.3
pytz 2020.5
reverse 0.1.0
setuptools 49.6.0
six 1.15.0
sqlparse 0.4.1
wheel 0.36.2
一， 先安装依赖包，可以使用豆瓣源
pip install django-ckeditor==6.0.0 -i https://pypi.doubanio.com/simple
pip install Pillow==8.1.0 -i https://pypi.doubanio.com/simple
二，配置你的setting.py文件.
INSTALLED_APPS= [
'simpleui',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'education.apps.EducationConfig',
#1. 添加富文本编辑器配置
'ckeditor',
'ckeditor_uploader',
]
#2. ckeditor 中文设置
LANGUAGE_CODE ='zh-hans' #简体中文设置，区分大小写字母
TIME_ZONE ='Asia/Shanghai'
#3. ckeditor 路径以及样式等设置
# add for the ckeditor start
MEDIA_URL ='/media/'
# 放在django项目根目录，同时也需要创建media文件夹
MEDIA_ROOT = os.path.join(BASE_DIR,'media')
CKEDITOR_UPLOAD_PATH ='upload/'
CKEDITOR_IMAGE_BACKEND ='pillow'
STATIC_ROOT = os.path.join(BASE_DIR,'static')#
# add for the ckeditor end
# 这个配置，有很多样式，可以自己去官网找样式。
STATIC_URL ='/static/'
CKEDITOR_CONFIGS = {
'default': {
'toolbar':'full',
# 添加按钮在这里
'toolbar_Custom': [
['Blockquote','CodeSnippet'],
],
},
}
CKEDITOR_JQUERY_URL ='https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'
三，配置路由。
urlpatterns = [
path('admin/', admin.site.urls),
# path(r'^xadmin/', xadmin.site.urls)
# 添加富文本url
url(r'^ckeditor/', include('ckeditor_uploader.urls')),
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
#最后一定要加static 的设置，否则在富文本里面，图片显示有问题。
四，运行python manage.py collectstatic
这一步大概意思是收集静态文件，把这些文件放到一起是为了用 apache/nginx 等部署的时候更方便
五，开发 models.py
from ckeditor_uploader.fieldsimport RichTextUploadingField
from django.dbimport models
# Create your models here.
from ckeditor.fieldsimport RichTextField
class Article(models.Model):
content = RichTextField() #不支持上传文件的富文本字段
answer = RichTextUploadingField() #支持上传文件的富文本字段
六，添加 code 到 admin.py
from django.contribimport admin
# Register your models here.
from djangoimport forms
from django.contribimport admin
from ckeditor.widgetsimport CKEditorWidget
from education.modelsimport Article
class ArticelAdminForm(forms.ModelForm):
content = forms.CharField(widget=CKEditorWidget())
class Meta:
model = Article
fields ="__all__"
class ArticeAdmin(admin.ModelAdmin):
form = ArticelAdminForm
admin.site.register(Article, ArticeAdmin)
七， 数据库
settings.py:
DATABASES = {
'default': {
'ENGINE':'django.db.backends.mysql',# 或者使用 mysql.connector.django
'NAME':'educationdb',
'USER':'root',
'PASSWORD':'root',
'HOST':'localhost',
'PORT':'3306',
'OPTIONS': {},
'init_command':'SET storage_engine=INNODB,'
'SESSION TRANSACTION ISOLATION LEVEL READ COMMITTED, autocommit=1, names "utf8";',
}
}
八， 数据库 migrate
python manage.py makemigrations
python manager.py migrate
#创建superuser
python manage.py createsuperuser
admin/admin
九，测试
localhost:8000/admin
admin/admin
content 部分：
answer 部分：
经过测试， 上传图片和直接黏贴图片，都没有问题， ckeditor 富文本安装测试完成。