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的类变量和成员变量用法实例教程
Aug 25 Python
谈谈Python进行验证码识别的一些想法
Jan 25 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
Apr 11 Python
Django实现组合搜索的方法示例
Jan 23 Python
点球小游戏python脚本
May 22 Python
使用memory_profiler监测python代码运行时内存消耗方法
Dec 03 Python
使用PYTHON解析Wireshark的PCAP文件方法
Jul 23 Python
python mqtt 客户端的实现代码实例
Sep 25 Python
wxPython窗体拆分布局基础组件
Nov 19 Python
python实现简单图书管理系统
Nov 22 Python
Django单元测试中Fixtures的使用方法
Feb 26 Python
使用pytorch实现线性回归
Apr 11 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编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
js验证上传图片的方法
2015/05/12 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
详解Python装饰器
2019/03/25 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
python与idea的集成的实现
2020/11/20 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
播音主持专业个人自我评价
2014/01/09 职场文书
学生爱国演讲稿
2014/01/14 职场文书
学生宿舍管理制度
2014/01/30 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
创业计划书之便利店
2019/09/05 职场文书
python APScheduler执行定时任务介绍
2022/04/19 Python