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 socket 超时设置 errno 10054
Jul 01 Python
推荐11个实用Python库
Jan 23 Python
使用Node.js和Socket.IO扩展Django的实时处理功能
Apr 20 Python
Python批量创建迅雷任务及创建多个文件
Feb 13 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
May 31 Python
Python实现确认字符串是否包含指定字符串的实例
May 02 Python
使用python来调用CAN通讯的DLL实现方法
Jul 03 Python
解决Python图形界面中设置尺寸的问题
Mar 05 Python
Python loguru日志库之高效输出控制台日志和日志记录
Mar 07 Python
Jupyter Notebook打开任意文件夹操作
Apr 14 Python
如何基于pandas读取csv后合并两个股票
Sep 25 Python
python简单验证码识别的实现过程
Jun 20 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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
JS原型链怎么理解
2016/06/27 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
vue中利用iscroll.js解决pc端滚动问题
2020/02/15 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
Python 私有函数的实例详解
2017/09/11 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
python实现按日期归档文件
2021/01/30 Python
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
毕业生在校学习的自我评价分享
2013/10/08 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
入伍通知书
2015/04/23 职场文书
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript