CKEditor富文本编辑器

1. 安装

pip install django-ckeditor

2. 添加应用

在INSTALLED_APPS中添加

INSTALLED_APPS = [
...
'ckeditor', # 富文本编辑器
'ckeditor_uploader', # 富文本编辑器上传图片模块
...
]

3. 添加CKEditor设置

在settings/dev.py中添加

# 富文本编辑器ckeditor配置
CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'full', # 工具条功能
'height': 300, # 编辑器高度
# 'width': 300, # 编辑器宽
},
}
CKEDITOR_UPLOAD_PATH = '' # 上传图片保存路径,使用了FastDFS,所以此处设为''

4. 添加ckeditor路由

在总路由中添加

url(r'^ckeditor/', include('ckeditor_uploader.urls')),

5. 为模型类添加字段

ckeditor提供了两种类型的Django模型类字段

  • ckeditor.fields.RichTextField 不支持上传文件的富文本字段
  • ckeditor_uploader.fields.RichTextUploadingField 支持上传文件的富文本字段

在商品模型类(SPU)中,要保存商品的详细介绍、包装信息、售后服务,这三个字段需要作为富文本字段

from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField class Goods(BaseModel):
"""
商品SPU
"""
...
desc_detail = RichTextUploadingField(default='', verbose_name='详细介绍')
desc_pack = RichTextField(default='', verbose_name='包装信息')
desc_service = RichTextUploadingField(default='', verbose_name='售后服务')

Django中CKEditor富文本编译器的使用的更多相关文章

  1. django中ckeditor富文本编辑器使用

    1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...

  2. Django中添加富文本编辑器

    使用的是CKeditor这个模块 1.安装: pip install django-ckeditor 2.将ckeditor注册到settings.py文件中, 并添加ckeditor的url到你项目 ...

  3. Django添加ckeditor富文本编辑器

    源码 https://github.com/django-ckeditor/django-ckeditor 通过pip安装. pip3 install django-ckeditor pip3 ins ...

  4. python 中的富文本编译器

    第一种方式: 1,pip install django-tinymce 2,在INSTALL_APPS里面添加tinymce        在站点中使用: 配置setting.py TINYMCE_D ...

  5. Django项目中添加富文本编辑器django-ckeditor

    django-ckeditor库的使用步骤: 1.在命令行下安装django-ckeditor这个库: 命令:pip install django-ckeditor 2.安装成功后,配置Django项 ...

  6. CKEditor富文本编辑器

    CKEditor 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑 ...

  7. day82:luffy:课程详情页面显示&章节和课时显示&视频播放组件&CKEditor富文本编辑器

    目录 1.初始课程详情页面 2.视频播放组件 3.课程详情页面后端接口实现 4.课程详情页面-前端 5.CKEditor富文本编辑器 6.课程章节和课时显示-后端接口 7.课程章节和课时显示-前端 1 ...

  8. Django中使用富文本编辑器Uedit

    Uedit是百度一款非常好用的富文本编辑器 一.安装及基本配置 官方GitHub(有详细的安装使用教程):https://github.com/zhangfisher/DjangoUeditor 1. ...

  9. 项目页面集成ckeditor富文本编辑器

    步骤一.引入ckeditor.js (注:本实例以ThinkPHP3.2框架为载体,不熟悉ThinkPHP的朋友请自行补习,ckeditor文件代码内容也请去ckeditor官网自行下载) 作为程序员 ...

随机推荐

  1. 分布式之分布式事务、分布式锁、接口幂等性、分布式session

    一.分布式session session 是啥?浏览器有个 cookie,在一段时间内这个 cookie 都存在,然后每次发请求过来都带上一个特殊的 jsessionid cookie,就根据这个东西 ...

  2. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  3. android中的菜单Menu

    Menu是一个接口, 他有2个子接口, SubMenu和ContextMenu; 前者菜单常见于按home键就会出现 ,后者是一个上下文菜单, 一般点击某个条目会在手机屏幕中出现一个类似悬浮窗口的菜单 ...

  4. 大数据平台搭建 - cdh5.11.1 - hbase集群搭建

    一.简介 HBase是一种构建在HDFS之上的分布式.面向列的存储系统.在需要实时读写.随机访问超大规模数据集时,可以使用HBase. 尽管已经有许多数据存储和访问的策略和实现方法,但事实上大多数解决 ...

  5. 多线程——Runnable接口

    以实现Runable接口的方式创建线程比继承Thread类有很大的优越性,因为类不能多重继承,即一个类只能继承一个类,那么如果该类已经继承了一个类,就不能实现多线程了,但是可以通过实现Runable接 ...

  6. TestNG(十五)xml文件实现多线程测试

    package com.course.testng.thread; import org.testng.annotations.Test; public class ThreadOnXml { @Te ...

  7. 25 (OC)* iOS网络HTTP、TCP、UDP、Socket 知识总结

    应用层:1.用户接口.应用程序:2.Application典型设备:网关:3.典型协议.标准和应用:TELNET.FTP.HTTP 表示层:1.数据表示.压缩和加密presentation2.典型设备 ...

  8. [scikit-learn] 特征二值化

    1.首先造一个测试数据集 #coding:utf-8 import numpy import pandas as pd from sklearn.preprocessing import OneHot ...

  9. jenkins自动化部署项目1--下载安装启动(linux)

    前面是在windows上搭建jenkins环境,最近有同事要我帮忙在linux上搭建一套,因此在此记录下过程. 因为jenkins.msi只能在windows上运行安装,因此在linux上安装jenk ...

  10. CSS从大图中抠图然后显示其中的一部分

    相信大家在使用css时会遇到一个情况吧 就是一张大图片里面什么都有 各种图标都有 然而自己就是不太会使用其中的小图标 这是我最近的一次学习 首先上图 这么大一张图片 那么这么使其只显示一部分 并且为我 ...