在运营后台,运营⼈员需要录⼊商品并编辑商品的详情信息,⽽商品的详情信息不是普通的⽂本,

可以是包含了HTML语法格式的字符串。为了快速简单的让⽤户能够在⻚⾯中编辑带格式的⽂本,我们引⼊富⽂本编辑器。富⽂本即具备丰富样式格式的⽂本。

我们使⽤功能强⼤的CKEditor富⽂本编辑器。

1. 安装

pip install django-ckeditor 

2. 添加应⽤

在INSTALLED_APPS中添加
INSTALLED_APPS = [
...
'ckeditor', # 富⽂本编辑器
'ckeditor_uploader', # 富⽂本编辑器上传图⽚模块
...
]

3. 添加CKEditor设置
在settings/dev.py中添加

CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'full', # ⼯具条功能
'height': 300, # 编辑器⾼度
# 'width': 300, # 编辑器宽
},
}
CKEDITOR_UPLOAD_PATH = ''

4. 添加ckeditor路由
在总路由中添加

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

5. 为模型类添加字段
ckeditor提供了两种类型的Django模型类字段

• ckeditor.fields.RichTextField 不⽀持上传⽂件的富⽂本字段

• ckeditor_uploader.fields.RichTextUploadingField ⽀持上传⽂件的富⽂本字段

用法:

desc_detail = RichTextUploadingField(default='', verbose_name='详细介绍')
desc_pack = RichTextField(default='', verbose_name='包装信息')

CKEditor富⽂本编辑器的更多相关文章

  1. CKEditor富文本编辑器

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

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

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

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

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

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

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

  5. 搭建自己的博客(十三):为博客后台添加ckeditor富文本编辑器

    使用django默认的编辑器感觉功能太少了,所以集成一下富文本编辑器. 1.安装和使用 (1).安装 pip install django-ckeditor (2).注册应用 在django的sett ...

  6. ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  7. ckeditor富文本编辑器的基本配置设置:

    原文地址:http://blog.csdn.net/wei365456yin/article/details/54618970?locationNum=5&fps=1 1.首先下载ckedit ...

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

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

  9. PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能

    一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id ...

随机推荐

  1. spring-boot restful put方式提交表单

    使用spring-boot 做接口,如果按restful的路由形式想使用put方式进行表单提交,第一个参数应该为文件参数,代码如下: @PutMapping("/http-put" ...

  2. 1.4 Application应用

    使用celery第一件要做的最为重要的事情是需要先创建一个Celery实例,我们一般叫做celery应用,或者更简单直接叫做一个app.app应用是我们使用celery所有功能的入口,比如创建任务,管 ...

  3. pandas层级索引

    层级索引(hierarchical indexing) 下面创建一个Series, 在输入索引Index时,输入了由两个子list组成的list,第一个子list是外层索引,第二个list是内层索引. ...

  4. Hadoop IO基于文件的数据结构详解【列式和行式数据结构的存储策略】

    Charles所有关于hadoop的文章参考自hadoop权威指南第四版预览版 大家可以去safari免费阅读其英文预览版.本人也上传了PDF版本在我的资源中可以免费下载,不需要C币,点击这里下载. ...

  5. deeplearning.ai 旁听如何做课后编程作业

    在上吴恩达老师的深度学习课程,在coursera上. 我觉得课程绝对值的49刀,但是确实没有额外的钱来上课.而且课程提供了旁听和助学金. 之前在coursera上算法和机器学习都是直接旁听的,这些课旁 ...

  6. swift之弹出一个背景半透明的UIViewController

    坑爹的背景半透明,按网上给出oc的方法,动画结束之后,半透明效果消失.通过各种折腾,各种试验,终于搞定了. let viewController=storyboard.instantiateViewC ...

  7. 面试题:JavaIO流分类详解与常用流用法实例

    Java流概念: Java把所有的有序数据都抽象成流模型,简化了输入输出,理解了流模型就理解了Java IO.可以把流想象成水流,里面的水滴有序的朝某一方向流动.水滴就是数据,且代表着最小的数据流动单 ...

  8. OpenCV---resize

    转自http://www.cnblogs.com/korbin/p/5612427.html 在图像处理过程中,有时需要把图像调整到同样大小,便于处理,这时需要用到图像resize() 原函数void ...

  9. EZOJ #201

    传送门 分析 这个题和寿司晚宴有点像 我们知道大于$\sqrt n$的质因子最高就是一次 于是我们对所有数以他的大质数为关键字排序 设dp[i][p2][p3][p5][p7][p11][p13][0 ...

  10. SQL将表中某一类型的一列拼接成一行

    SELECT TypeName ,(SELECT ','+ UserName FROM [ContainerMembers] t WHERE TypeName= aa.TypeName FOR XML ...