CKEditor富⽂本编辑器
在运营后台,运营⼈员需要录⼊商品并编辑商品的详情信息,⽽商品的详情信息不是普通的⽂本,
可以是包含了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富⽂本编辑器的更多相关文章
- CKEditor富文本编辑器
CKEditor 富文本即具备丰富样式格式的文本.在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串.为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑 ...
- 项目页面集成ckeditor富文本编辑器
步骤一.引入ckeditor.js (注:本实例以ThinkPHP3.2框架为载体,不熟悉ThinkPHP的朋友请自行补习,ckeditor文件代码内容也请去ckeditor官网自行下载) 作为程序员 ...
- django中ckeditor富文本编辑器使用
1.安装模块 (pillow是python的一个图像处理库) pip install django-ckeditor pip install pillow 2.编辑seetings.py配置文件 IN ...
- day82:luffy:课程详情页面显示&章节和课时显示&视频播放组件&CKEditor富文本编辑器
目录 1.初始课程详情页面 2.视频播放组件 3.课程详情页面后端接口实现 4.课程详情页面-前端 5.CKEditor富文本编辑器 6.课程章节和课时显示-后端接口 7.课程章节和课时显示-前端 1 ...
- 搭建自己的博客(十三):为博客后台添加ckeditor富文本编辑器
使用django默认的编辑器感觉功能太少了,所以集成一下富文本编辑器. 1.安装和使用 (1).安装 pip install django-ckeditor (2).注册应用 在django的sett ...
- ckeditor富文本编辑器的使用和图片上传,复制粘贴图片上传
自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...
- ckeditor富文本编辑器的基本配置设置:
原文地址:http://blog.csdn.net/wei365456yin/article/details/54618970?locationNum=5&fps=1 1.首先下载ckedit ...
- Django添加ckeditor富文本编辑器
源码 https://github.com/django-ckeditor/django-ckeditor 通过pip安装. pip3 install django-ckeditor pip3 ins ...
- PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能
一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id ...
随机推荐
- maven 安装 过程
maven 安装 过程 1 下载: apache-maven-3.0.3-bin.zip 压缩包 2 将压缩包解压到需要安装的目录文件中. 比如解压到: Z:\zr_anzhungwenjian\ap ...
- Halcon学习之两幅图像处理
sub_image ( ImageMinuend, ImageSubtrahend : ImageSub : Mult, Add : ) 对两幅图像做减法 g' := (g1 - g2) * Mu ...
- Mycat基本搭建
1.Java环境检查与安装(略) [检查] [root@mysqldb tmp]# java -verson -bash: java: command not found [直接解压安装] [root ...
- asp.net js 存取cookie
asp.net //传进来的 public BaseController(BaseHttpHandler handler, HttpContext context) // { //根据地址设置cook ...
- 移植RT2870无线网卡驱动到s3c2416
公司项目要用到usb无线网卡,芯片是ralink的RT2870.以下是将其驱动移植到s3c2416的步骤. 1.下载驱动源码,雷凌官网的下载地址是: http://www.ralinktech.com ...
- Uboot详细解析2
1.第二阶段的主线函数位于u-boot-2010.06/arch/arm/lib/board.c. 第二阶段的功能: <1> 初始化本阶段要使用到的硬件设备. 设置时钟.初始化串口. bo ...
- 第一篇 UCOS介绍
第一篇 UCOS介绍 这个大家都知道.呵呵.考虑到咱们学习的完整性还是在这里唠叨一下.让大家再熟悉一下.高手们忍耐一下吧! uC/OS II(Micro Control Operation Syste ...
- 判断Android系统net和wap接入点的开发实例
判断Android系统net和wap接入点的开发实例 分类标签: Activity 我们使用Android设备连接网络时,如果是wap接入点就需要设置代理,而电信和移动联通的代理并不相同,移动和联 ...
- SQL Server2012中的Throw语句尝试 RAISERROR和THROW比较
SQL SERVER2012实现了类似C#抛出异常的Throw语句.相比较于SQL Server2005之前使用@@ERROR,和SQL Server2005之后使用RAISERROR()引发异常都是 ...
- 10. Regular Expression Matching字符串.*匹配
[抄题]: Given an input string (s) and a pattern (p), implement regular expression matching with suppor ...