CKEditor富文本编辑器
CKEditor
富文本即具备丰富样式格式的文本。在运营后台,运营人员需要录入课程的相关描述,可以是包含了HTML语法格式的字符串。为了快速简单的让用户能够在页面中编辑带格式的文本,我们引入富文本编辑器。
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 = '' # 上传图片保存路径
4. 添加ckeditor路由
在总路由中添加
url(r'^ckeditor/', include('ckeditor_uploader.urls')),
5. 为模型类添加字段
ckeditor提供了两种类型的Django模型类字段
ckeditor.fields.RichTextField
不支持上传文件的富文本字段ckeditor_uploader.fields.RichTextUploadingField
支持上传文件的富文本字段\
修改course/models.py里面的字段信息,记得要重新数据迁移
from ckeditor_uploader.fields import RichTextUploadingField
class Course(models.Model):
"""
专题课程
"""
... brief = RichTextUploadingField(max_length=2048, verbose_name="课程概述", null=True, blank=True)
CKEditor富文本编辑器的更多相关文章
- 项目页面集成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编辑器(富文本编辑器) ...
- Django添加ckeditor富文本编辑器
源码 https://github.com/django-ckeditor/django-ckeditor 通过pip安装. pip3 install django-ckeditor pip3 ins ...
- ckeditor富文本编辑器的基本配置设置:
原文地址:http://blog.csdn.net/wei365456yin/article/details/54618970?locationNum=5&fps=1 1.首先下载ckedit ...
- PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能
一:前端页面代码 <script src="/www/res/ckeditor/ckeditor.js"></script> <textarea id ...
- Extjs整合CKEditor富文本编辑器插件
CKEditor插件官方下载地址: http://ckeditor.com/download/releases 我使用的版本是 ExtJS5.1.0 CKEditor4.4.8 参考文章: http ...
随机推荐
- 5、 LwIP协议栈规范翻译——操作系统仿真层
为了使lwIP可移植,操作系统特定的函数调用和数据结构不直接在协议的代码中使用.相反,当需要这样的函数调用和数据结构时,直接使用操作系统仿真层. 操作系统仿真层为操作系统服务提供统一的接口,如定时器, ...
- JAVA spring 常用包作用详解(转)
转载地址:https://www.cnblogs.com/Tmc-Blog/p/6093162.html <project xmlns="http://maven.apache.org ...
- TableExport导出失败问题
本周有一个需求,将一个网页上一个js导出成csv文件,供数据分析使用 找到一个插件,TableExport,可以很方便的将table导出(默认设置的话,仅需一行代码) 但是,这导出文件较大(6.2M) ...
- Eclipse安装fatjar(不用自己下载fatjar包)
.安装Eclipse-jee-luna-SR2-win32-x86_64版本的插件支持 方法如下: Help -> Install New Software... -> Work with ...
- js实现多行文本溢出省略
实现效果: css: position: relative; line-height: 20px; max-height: 60px; js: function overflowHiddon(el) ...
- 论文阅读(XiangBai——【AAAI2017】TextBoxes_A Fast Text Detector with a Single Deep Neural Network)
XiangBai——[AAAI2017]TextBoxes:A Fast Text Detector with a Single Deep Neural Network 目录 作者和相关链接 方法概括 ...
- 抓包工具 GOOGLE
chrome://net-internals/#events GOOGLE浏览器直接输入
- Ubuntu编译Android源码步骤
Android4.4源码编译 需要准备以下文件: 源码包名:x4412_kitkat_rtm.tar.bz2 Jdk版本为jdk1.6.0_27 gcc 4.4 g++ 4.4 第一步:安装Ubunt ...
- php 根据日期获取星座
根据日期获取星座 /* * * 获取星座 * 星座是按阳历来计算的 * $month 阳历月份 * $day 阳历日期 * */ public static function get_xingzuo( ...
- Html from 标签
Html from 标签 <html> <body> <!-- form 提交表单设置 --> <form> <input type=" ...