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生成随机数的方法
Jan 14 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
Mar 26 Python
Python 实现购物商城,含有用户入口和商家入口的示例
Sep 15 Python
python flask中静态文件的管理方法
Mar 20 Python
python 把文件中的每一行以数组的元素放入数组中的方法
Apr 29 Python
详解Django-restframework 之频率源码分析
Feb 27 Python
python多线程共享变量的使用和效率方法
Jul 16 Python
windows上安装python3教程以及环境变量配置详解
Jul 18 Python
python机器学习包mlxtend的安装和配置详解
Aug 21 Python
python学生信息管理系统实现代码
Dec 17 Python
Python使用正则实现计算字符串算式
Dec 29 Python
基于python实现计算两组数据P值
Jul 10 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
是否存在第一台收音机的说法
2021/03/01 无线电
php 网上商城促销设计实例代码
2012/02/17 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python利用tkinter实现屏保
2019/07/30 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
文科教师毕业的自我评价
2014/01/16 职场文书
初三家长会邀请函
2014/01/18 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
CSS3实现指纹特效代码
2022/03/17 HTML / CSS
vue组件vue-esign实现电子签名
2022/04/21 Vue.js