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中使用pyhook实现键盘监控的例子
Jul 18 Python
浅析Python编写函数装饰器
Mar 18 Python
Python开发的实用计算器完整实例
May 10 Python
python matplotlib 在指定的两个点之间连线方法
May 25 Python
python os.path模块常用方法实例详解
Sep 16 Python
django 微信网页授权登陆的实现
Jul 30 Python
python多进程并行代码实例
Sep 30 Python
python3获取文件中url内容并下载代码实例
Dec 27 Python
python tkinter GUI绘制,以及点击更新显示图片代码
Mar 14 Python
基于Python的身份证验证识别和数据处理详解
Nov 14 Python
PyQt 如何创建自定义QWidget
Mar 24 Python
python基础之类方法和静态方法
Oct 24 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
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
php分页函数完整实例代码
2014/09/22 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
python在不同层级目录import模块的方法
2016/01/31 Python
Python的组合模式与责任链模式编程示例
2016/02/02 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
Python实现上下文管理器的方法
2020/08/07 Python
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
Room Mate Hotels美国:西班牙酒店品牌
2018/04/10 全球购物
结构工程个人自荐信范文
2013/11/30 职场文书
幼儿园感谢信
2015/01/21 职场文书
2015年财务部工作总结
2015/04/10 职场文书
公司禁烟通知
2015/04/23 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书