django轻松使用富文本编辑器CKEditor的方法


Posted in Python onMarch 30, 2017

前言

django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便。遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的控件。ckeditor是一款基于javascript,使用非常广泛的开源网页编辑器。它可以和多种编程语言相结合,python当然也不例外。本文就来介绍一下如何在基于django博客系统如何完美地用上ckeditor。

使用方法

1、安装

pip install django-ckeditor

2、将‘ckeditor'settings.py中的INSTALLED_APPS

3、由于djang-ckeditor在ckeditor-init.js文件中使用了JQuery,所以要在settings.py中设置CKEDITOR_JQUERY_URL来指定JQuery库的路径,例如:

CKEDITOR_JQUERY_URL ='https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'

4、设定STATIC_ROOT,执行python manage.py collectstatic,将CKEditor需要的媒体资源拷入STATIC_ROOT指定的路径中。

STATIC_ROOT = os.path.join(BASE_DIR,'static/')

django轻松使用富文本编辑器CKEditor的方法

5、

from django.db import models
from ckeditor.fields import RichTextField

class Blog(models.Model):
 title = models.CharField(max_length=50,verbose_name="标题")
 content = RichTextField(blank=True,null=True,verbose_name="内容")

 def __unicode__(self):
 return self.name

效果:

django轻松使用富文本编辑器CKEditor的方法

文件上传

1、在settings.py中的INSTALLED_APPS中添加ckeditor_uploader

2、CKEditor使用Django的存储API,默认使用Django的文件存储,会用到MEDIA_ROOT和MEDIA_URL,需要在settings.py中定义,此外还可以指定CKEDITOR_UPLOAD_PATH,它位于MEDIA_ROOT下:

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media/')
CKEDITOR_UPLOAD_PATH = 'uploads/'

3、在项目的urls.py中添加CKEditor的URL映射

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

如果不加,可能会出现以下错误:

django轻松使用富文本编辑器CKEditor的方法

4、(可选项) 在settings.py中加入CKEDITOR_IMAGE_BACKEND ,使能thumbnails,例如:

CKEDITOR_IMAGE_BACKEND = 'PIL'
from ckeditor_uploader.fields import RichTextUploadingField
class Post(models.Model):
 content = RichTextUploadingField()

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Python 相关文章推荐
Python开发如何在ubuntu 15.10 上配置vim
Jan 25 Python
python基础教程项目二之画幅好画
Apr 02 Python
python监控文件并且发送告警邮件
Jun 21 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
Apr 15 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
Jul 06 Python
利用python实现.dcm格式图像转为.jpg格式
Jan 13 Python
Python实现自动打开电脑应用的示例代码
Apr 17 Python
Python3-异步进程回调函数(callback())介绍
May 02 Python
Python爬虫获取页面所有URL链接过程详解
Jun 04 Python
Django创建一个后台的基本步骤记录
Oct 02 Python
详解在OpenCV中如何使用图像像素
Mar 03 Python
总结三种用 Python 作为小程序后端的方式
May 02 Python
python下读取公私钥做加解密实例详解
Mar 29 #Python
django开发之settings.py中变量的全局引用详解
Mar 29 #Python
深入理解Python3中的http.client模块
Mar 29 #Python
Python 中迭代器与生成器实例详解
Mar 29 #Python
Python利用Beautiful Soup模块搜索内容详解
Mar 29 #Python
windows系统下Python环境搭建教程
Mar 28 #Python
Python中Django 后台自定义表单控件
Mar 28 #Python
You might like
PHP 动态随机生成验证码类代码
2010/04/09 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
php ci框架验证码实例分析
2013/06/26 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
php成功操作redis cluster集群的实例教程
2019/01/13 PHP
Javascript开发包大全整理
2006/12/22 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
详解JS数值Number类型
2018/02/07 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
python3中数组逆序输出方法
2020/12/01 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
音乐专业应届生教师求职信
2013/11/04 职场文书
物业管理个人自我评价
2013/11/08 职场文书
电子商务个人自荐信
2013/12/12 职场文书
大学生村官演讲稿
2014/04/25 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
导游词之广西漓江
2019/11/02 职场文书