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的Django框架中的QuerySets
Apr 20 Python
Python面向对象类的继承实例详解
Jun 27 Python
使用Python读取二进制文件的实例讲解
Jul 09 Python
Python使用folium excel绘制point
Jan 03 Python
PyCharm 设置SciView工具窗口的方法
Jan 15 Python
TensorFlow 多元函数的极值实例
Feb 10 Python
手把手教你安装Windows版本的Tensorflow
Mar 26 Python
使用pandas库对csv文件进行筛选保存
May 25 Python
Python绘制动态水球图过程详解
Jun 03 Python
Python如何自动获取目标网站最新通知
Jun 18 Python
基于Python实现简单学生管理系统
Jul 24 Python
C站最全Python标准库总结,你想要的都在这里
Jul 03 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中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
2019/01/23 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
详解Python中的join()函数的用法
2015/04/07 Python
python操作oracle的完整教程分享
2018/01/30 Python
Python实现的堆排序算法示例
2018/04/29 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
Wallis官网:英国女装零售商
2020/01/21 全球购物
几个Linux面试题笔试题
2012/12/01 面试题
运动会表扬稿大全
2014/01/16 职场文书
公共场所禁烟倡议书
2014/08/30 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
2015党建工作简报
2015/07/21 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL