Django富文本编辑器 清疚 2021-09-17 16:16 518阅读 0赞 # Django富文本编辑器 # 在django模型中,如果将商品详情字段类型设置为TextFiled(),当将该模型加入到后台管理的时候,只会呈现出普通的文本框。但是,我们实际工作中,编辑商品详情需要进行格式的编辑、上传图片、排版、修改文字颜色,这些普通的TextField都是不能实现的。 怎么解决?使用富文本编辑器 富文本编辑器有很多种类,我们项目中采用ckeditor 文档地址:[https://pypi.org/project/django-ckeditor/][https_pypi.org_project_django-ckeditor] 文档中非常详细,具体参考文档,以下是简单入门步骤: #### 在您的python路径中安装或添加django-ckeditor。 #### pip install django-ckeditor #### 将ckeditor添加到您的INSTALLED\_APPS设置中。 #### INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'sp_user.apps.SpUserConfig', # 用户模块 'sp_goods.apps.SpGoodsConfig', # 商品模块 'ckeditor', # 添加ckeditor富文本编辑器 ] #### 配置静态文件路径 #### 看文档:[https://docs.djangoproject.com/en/dev/howto/static-files/][https_docs.djangoproject.com_en_dev_howto_static-files] 删除之前配置的STATICFILES\_DIRS(本来上线就要删除),修改为STATIC\_ROOT #STATICFILES_DIRS = [ # os.path.join(BASE_DIR, "static"), #] # 设置静态文件根目录 上线的时候使用 STATIC_ROOT = os.path.join(BASE_DIR, "static") 使用以下命令,将django中安装在INSTALLED\_APPS的其他应用所有的静态文件收集到STATIC\_ROOT指定目录下 python.exe manage.py collectstatic 这个时候 我们在 static 目录下就能看的 ckeditor 目录,里面就是ckeditor使用到的所有的静态文件(css,js,image)。 这个时候又将之前的修改改回去,现在还没有上线,还得用之前的配置。 STATICFILES_DIRS = [ os.path.join(BASE_DIR, "static"), ] # 设置静态文件根目录 上线的时候使用 # STATIC_ROOT = os.path.join(BASE_DIR, "static") #### 设置ckeditor的上传目录 #### 这个目录是相对目录,相对与 MEDIA\_ROOT CKEDITOR_UPLOAD_PATH = "uploads/" 将ckeditor\_uploader添加到您的INSTALLED\_APPS设置中。 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'sp_user.apps.SpUserConfig', # 用户模块 'sp_goods.apps.SpGoodsConfig', # 商品模块 'ckeditor', # 添加ckeditor富文本编辑器 'ckeditor_uploader', # 添加ckeditor富文本编辑器文件上传部件 ] #### 在主路由中配置 ckeditor 上传文件使用到的url地址 #### ckeditor上传文件内部机制使用 ajax 异步上传文件,需要配置上传访问地址才能被访问到。 urlpatterns = [ url(r'^admin/', admin.site.urls), # 上传部件自动调用的上传地址 url(r'^ckeditor/', include("ckeditor_uploader.urls")), # 用户模块 url(r'^user/', include("sp_user.urls", namespace="sp_user")), # 其他模块 ] #### 安装pillow(已经安装的不用重复安装) #### ckeditor上传文件使用pillow #### 设置ckeditor在后台显示的样式(显示效果) #### 使用默认配置就行,具体看文档修改 # 编辑器样式配置 CKEDITOR_CONFIGS = { 'default': { 'toolbar': 'full', }, } #### 将商品SPU表的详情字段修改RichTextUploadingField,使用ckeditor为们单独提供的字段类型,修改完后,后台自动显示富文本编辑器样式,可以上传图片 #### # 导入ckeditor上富文本编辑器自带字段 from ckeditor_uploader.fields import RichTextUploadingField class GoodsSPU(BaseModel): """ 商品SPU表 """ spu_name = models.CharField(verbose_name='商品SPU名称', max_length=20, ) # 使用ckeditor为我们提供的字段,不用重新迁移就可以 content = RichTextUploadingField(verbose_name="商品详情") def __str__(self): return self.spu_name class Meta: verbose_name = "商品SPU" verbose_name_plural = verbose_name #### 前台模板显示 #### \{ \{content|safe\}\} [https_pypi.org_project_django-ckeditor]: https://pypi.org/project/django-ckeditor/ [https_docs.djangoproject.com_en_dev_howto_static-files]: https://docs.djangoproject.com/en/dev/howto/static-files/
还没有评论,来说两句吧...