Django项目使用ckeditor详解(不使用admin)


Posted in Python onDecember 17, 2019

效果图:

Django项目使用ckeditor详解(不使用admin)

1.安装django-ckeditor

pip install django-ckeditor

如果需要上传图片或者文件,还需要安装pillow

pip install pillow

2.配置模型字段

如果编辑器需要上传图片或者文件,需要引入RichTextUploadingField,否则只需要引入RichTextField

from ckeditor_uploader.fields import RichTextUploadingField

class Activity(models.Model):
  desc = RichTextUploadingField(verbose_name="活动描述")

3.settings中配置

CKEDITOR_CONFIGS = {
  'default': {
    'toolbar': 'full', #工具栏全部功能
    'height': 300, # 高度
    'width': 730, # 宽度
  },
}
CKEDITOR_UPLOAD_PATH = 'ckeditor/' #上传文件的目录
CKEDITOR_IMAGE_BACKEND = 'pillow'  #pillow做为backend

4.form表单配置

这里只需要使用modelForm,不需要配置

from django import forms

from learntime.activity.models import Activity

class ActivityForm(forms.ModelForm):
  class Meta:
    fields = "__all__" #引入全部字段
    model = Activity

5.urls配置

以下是admin中配置的urls,如果在自己的项目中就不能这样写

urlpatterns = [
  ...
  path('ckeditor/', include('ckeditor_uploader.ckeditor_urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

网上其他教程都是在admin中配置ckeditor,如果按照如上代码可能会发现图片上传失败,点进源码可以看到,图片上传的成功条件为:django的用户表is_staff为True,自己的项目中可能并没有这样设定。

urls源码如下:

from __future__ import absolute_import

from django.conf.urls import url
from django.contrib.admin.views.decorators import staff_member_required
from django.views.decorators.cache import never_cache

from . import views

urlpatterns = [
  url(r'^upload/', staff_member_required(views.upload), name='ckeditor_upload'),
  url(r'^browse/', never_cache(staff_member_required(views.browse)), name='ckeditor_browse'),
]

staff_member_required为装饰器,我们可以把它替换为login_required,即必须登录之后才能上传图片。

修改后的代码如下:

xxx.utils.ckeditor_urls.py

from __future__ import absolute_import

from django.conf.urls import url
from django.contrib.auth.decorators import login_required
from django.views.decorators.cache import never_cache

from ckeditor_uploader import views

urlpatterns = [
  url(r'^upload/', login_required(views.upload), name='ckeditor_upload'),
  url(r'^browse/', never_cache(login_required(views.browse)), name='ckeditor_browse'),
]

urls.py

path('ckeditor/', include('xxx.utils.ckeditor_urls')),

按照如上配置就能完美上传图片和文件了。

Django项目使用ckeditor详解(不使用admin)

以上这篇Django项目使用ckeditor详解(不使用admin)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python基于twisted实现简单的web服务器
Sep 29 Python
python读取文本中数据并转化为DataFrame的实例
Apr 10 Python
Python 2.7中文显示与处理方法
Jul 16 Python
python版opencv摄像头人脸实时检测方法
Aug 03 Python
python TF-IDF算法实现文本关键词提取
May 29 Python
Python hexstring-list-str之间的转换方法
Jun 12 Python
Django Rest framework频率原理与限制
Jul 26 Python
Django上使用数据可视化利器Bokeh解析
Jul 31 Python
python3读取autocad图形文件.py实例
Jun 05 Python
Python pysnmp使用方法及代码实例
Aug 24 Python
Python爬虫使用bs4方法实现数据解析
Aug 25 Python
Python 中面向接口编程
May 20 Python
python主线程与子线程的结束顺序实例解析
Dec 17 #Python
Django通用类视图实现忘记密码重置密码功能示例
Dec 17 #Python
Django集成celery发送异步邮件实例
Dec 17 #Python
python学生信息管理系统实现代码
Dec 17 #Python
pymysql模块的操作实例
Dec 17 #Python
Django异步任务线程池实现原理
Dec 17 #Python
python 求10个数的平均数实例
Dec 16 #Python
You might like
PHP函数学习之PHP函数点评
2012/07/05 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
javascript 触发事件列表 比较不错
2009/09/03 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
js 获取、清空input type="file"的值(示例代码)
2013/12/24 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
2016/06/12 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
微信小程序wx.request拦截器使用详解
2019/07/09 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
python遍历序列enumerate函数浅析
2017/10/17 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Django通过json格式收集主机信息
2020/05/29 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
python编写实现抽奖器
2020/09/10 Python
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
创业计划书如何编写
2014/02/06 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
个人合伙协议书范本
2014/10/14 职场文书
求职自荐信怎么写
2015/03/04 职场文书