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操作Mysql实例代码教程在线版(查询手册)
Feb 18 Python
python使用range函数计算一组数和的方法
May 07 Python
python Django模板的使用方法
Jan 14 Python
用pandas中的DataFrame时选取行或列的方法
Jul 11 Python
Python检查和同步本地时间(北京时间)的实现方法
Dec 03 Python
Python2和Python3之间的str处理方式导致乱码的讲解
Jan 03 Python
Python 200行代码实现一个滑动验证码过程详解
Jul 11 Python
利用Python检测URL状态
Jul 31 Python
Python3 利用face_recognition实现人脸识别的方法
Mar 13 Python
关于Keras Dense层整理
May 21 Python
keras读取h5文件load_weights、load代码操作
Jun 12 Python
利用django创建一个简易的博客网站的示例
Sep 29 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
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
2017/08/31 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
koa源码中promise的解读
2018/11/13 Javascript
Vue中props的详解
2019/05/16 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
python操作CouchDB的方法
2014/10/08 Python
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
用python发送微信消息
2020/12/21 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
幼儿园安全检查制度
2014/01/30 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
教育见习报告范文
2014/11/03 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
工作证明格式范文
2015/06/15 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
基于Redis延迟队列的实现代码
2021/05/13 Redis