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

可以是包含了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. 二进制(signed or unsigned)补码

    在计算机系统中,数值一律用补码来表示(存储). 主要原因:使用补码,可以将符号位和其它位统一处理:同时,减法也可按加法来处理.另外,两个用补 码表示的数相加时,如果最高位(符号位)有进位,则进位被舍弃 ...

  2. leetcode452

    public class Solution { public int FindMinArrowShots(int[,] points) { // multidimensional array cann ...

  3. ubuntu 12.04的源更新

    apt-get install vim 安装vim vim /etc/apt/sources.list deb http://mirrors.163.com/ubuntu/ precise main ...

  4. windows 进程监控 Procmon.exe

    windows 进程监控 Procmon.exe window下一个程序打开太慢,可以用此程序监控.在哪一步慢了,读取文件还是注册表. ProcessMonitor3.2 Process Monito ...

  5. IDEA中快速排除maven依赖

    选中该模块 点击show dependenties 切换试图 选中要排除的依赖,右击 选择Execlude,然后选择需要在哪个模块添加排除依赖 完成

  6. 服务器发送邮件出现Could not connect to SMTP host错误 解决办法

    服务器发送邮件出现Could not connect to SMTP host错误 解决办法 功夫不负有心人,最后了解到,除了google的smtp服务器收到请求“smtp”会接受,其他服务器比如qq ...

  7. canvas二进制字符下落

      ?   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 3 ...

  8. Express+MySQL

    初识NodeJS服务端开发(Express+MySQL) http://www.tuicool.com/articles/JfqYN3I 浅析node连接数据库(express+mysql) http ...

  9. php 实现百度文库搭建

    第一步:安装jodconverter,安装之后可以实现doc文档转成pdf. 文件下载地址为http://www.artofsolving.com/opensource/jodconverter 下载 ...

  10. XP下,移动窗口产生重影的问题

    最近做了一个东西,其中有一个小窗口需要跟着主窗口一起移动,结果发现在Xp系统上总是产生重影,需要刷新桌面才能消失. 移动窗口我使用的是MoveWindow,最后一个参数bRepaint传递的是FALS ...