django-ckeditor使用
django-ckeditor
1 安装
pip install ckeditor
2 配置
INSTALLED_APPS中添加
'ckeditor',修改写入字段的格式
主题相关配置(settings)
CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'full',
'height': 300,
'width': 600,
'tabSpaces': 4,
'extraPlugins': 'codesnippet', # 配置代码插件
}
}
静态文件相关配置(图片)
1 INSTALLED_APPS 中添加
'ckeditor_uploader', 2 文件相关
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') CKEDITOR_UPLOAD_PATH = 'Article_media'
URLconfig
- 引入包
from django.conf.urls import url,include
from django.views.static import serve
- urlpatterns
urlpatterns = [
...
url(r'^ckeditor/', include('ckeditor_uploader.urls'),),
url(r'^media/(?P<path>.*)', serve, {"document_root": develop.MEDIA_ROOT}),
...
] 或 urlpatterns = [
...
url(r'^ckeditor/', include('ckeditor_uploader.urls'),),
...
] + static(settings.MEDIA_URL, documnets_root = settings.MEDIA_ROOT)
3 使用
1 通用的方式,可以用在前台页面也可以用在后台管理页面
# 重写admin/Xadmin表单,在form添加装饰,而不需要修改对象模型,需要重写clean 方法,将表单拿到的数据替换成需要模型中真正存在的字段。
from ckeditor_uploader.widgets import CKEditorUploadingWidget
class ArticleAdminForm(forms.ModelForm):
# 模型中并不存在 content_ck 只是在表单中存在, 将在clean 中 提换,将页面数据和模型分离开 可以做一些其他操作
content_ck = forms.CharField(widget=CKEditorUploadingWidget(), label='正文', required=False)
# 模型中的真实字段
content = forms.CharField(widget=forms.HiddenInput(), required=False)
class Meta:
model = Article
fields = (
'category', 'tag', 'desc', 'title',
'editor_type', 'content', 'content_ck',
'status'
)
def clean(self):
content = self.cleaned_data.get('content_ck')
if not content:
self.add_error('content_ck', '必填项!')
return
self.cleaned_data['content'] = content
return super().clean()
2 在Admin/Xadmin后台使用
直接修改模型字段将全部的事情交给admin 虽然省事,不灵活也不利于后期开发维护
from ckeditor.fields import RichTextField
class Article(models.Model):
title = models.CharField(max_length=254, unique=True)
body = RichTextField()
def __str__(self):
return self.title
django-ckeditor使用的更多相关文章
- django + ckeditor + 七牛云,图片上传到七牛云
传送门 本人使用的是 Django 的自带的管理后台,安装 ckeditor 富文本编辑器后,上传图片的时候直接传到七牛云的.
- Django ckeditor增加编辑代码 功能
前言 使用ckeditor这个组件的时候 对于长写博客的同学当然希望能有 增加代码这个功能按钮 而这个按钮 需要自己配置 我们的编辑器自然需要添加代码块的功能. 需要用到插件codesnippet,c ...
- Django创建完全独立的APP
我们之前已经完成了项目的结构搭建,但是,在Django当中,我们强调的一个重要概念是app,比如Django自带的admin就是一个成功的app典范,那么我们应该如果整理自己的项目结构,才能让我们的a ...
- Django博客开发-数据建模与样式设定
开发流程介绍 之前Django的学习过程当中已经把基本Django开发学完了,现在以Django 的博客项目完成一遍课程的回顾和总结.同时来一次完整开发的Django体验. 一个产品从研究到编码我们要 ...
- django下的ckeditor 5.0 文本编辑器上传功能。
完整的后台界面怎么可以没有文本编辑器,但是django的admin界面很疑惑,没有自带文本编辑器,好在网上有不少成型的库可以用 我用的是ckeditor编辑器,安装和配置我引用别人的博客 这篇博客配置 ...
- Django中使用CKEditor代码高亮显示插件Code Snippet
Django使用CKEditor可以安装django-ckeditor这个模块,具体步骤可按照这里进行:http://www.nanerbang.com/article/2/ 我在富文本编辑器中想使用 ...
- 在django中集成ckeditor富文本
目前用的比较多的富文本插件有百度的ueditor.ckeditor.kindeditor等,其中ueditor和kindeditor比较美观,ckeditor的皮肤较少.但是ueditor加载较慢,k ...
- ckeditor django admin 中使用
ckeditor settings配置 ############ # CKEDITOR # ############ MEDIA_ROOT = os.path.join(BASE_DIR, 'medi ...
- django使用ckeditor上传图片
1.在模型类中设置字段为富文本类型,这里需要注意引入的是RichTextUploadingField,以允许上传图片,需要和RichTextField区分开 from ckeditor_uploade ...
- Django添加ckeditor富文本编辑器
源码 https://github.com/django-ckeditor/django-ckeditor 通过pip安装. pip3 install django-ckeditor pip3 ins ...
随机推荐
- Node.js 阻塞 回调函数
回调例程 N所有API都支持回调函数,可以处理大量并发请求.回调函数一般作为最后一个参数出现: function foo1(name, age, callback){ } function foo2( ...
- 中山普及Day17——普及
今天换教室,本来教室多好嘛,易守难攻,结果...今天今天仅下午就被熊抄了2次,熊超真TMD不是人呐,走路连脚步声都没有. 然后,播报分数: 爆0了!!!
- 攻防世界web进阶区(1)
1.题目地址:http://111.198.29.45:43589 页面提示打开robots文件,则: 页面有提示输入fl0g.php,那么 获取flag. 2.题目地址:http://111.198 ...
- 吴裕雄--天生自然HADOOP操作实验学习笔记:qq好友推荐算法
实验目的 初步认识图计算的知识点 复习mapreduce的知识点,复习自定义排序分组的方法 学会设计mapreduce程序解决实际问题 实验原理 QQ好友推荐算法是所有推荐算法中思路最简单的,我们利用 ...
- status 后面的P和I是什么单词的缩写
我不是很肯定,有大概印象:P 为 performed, 已完成I 为 incomplete 未完成
- 用 lastIndexOf()、substr()、split()方法截取一段字符串
lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索. split() 方法用于把一个字符串分割成字符串数组,抽取到分割符前面部分. subst ...
- java程序员的就业指导(重点)
想要成为合格的Java程序员或工程师到底需要具备哪些专业技能,面试者在面试之前到底需要准备哪些东西呢?本文陈列的这些内容既可以作为个人简历中的内容,也可以作为面试的时候跟面试官聊的东西,你可以把这些内 ...
- jquery 操作单选框,复选框,下拉列表实现代码
1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码代码如下: <form> 您爱好的运动是: <input type ...
- window进行缩放时左侧菜单高度随之变化
window.onresize = function(){ $(); }
- 【rabbitmq】Queueingconsumer被废止后老代码如何做的解决方案
amqp-client 3.x之前的rabbitmq版本有个消费者的写法是借助于Queueingconsumer的: QueueingConsumer consumer = new QueueingC ...