首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Django添加ckeditor富文本编辑器

在 templates 中使用内容 {{ content | safe }} django使用ckeditor上传图片 1、在模型类中设置字段为富文本类型,这里需要注意引入的是RichTextUploadingField...,并手动设置文件上传的请求路径,默认请求路径为live-server的路径,必须设置为服务器的域名和端口 }, }); 5、后端设置总路由,'ckeditor_uploader.urls'中会将接收到的请求进行...csrf校验免除,并限制了只有登录用户才可以上传图片,ckeditor默认应用的是django-admin的用户校验方法,django-admin的校验方法不允许跨域请求,我们需要使上传图片的类试图函数继承自...如何设置默认选择的字体及大小?如何设置默认使用的字体及大小? 前者,需要修改 ckeditor/contents.css 里的设置。...config.tabSpaces = 0; 设置当用户键入TAB键时,鼠标走过的空格数。当值为0时,焦点将移出编辑框。 八.使用序列标号的时候,页面溢出?

2.2K31

django-富文本-ckeditor配置

# 博客模型 class Blog(models.Model): title = models.CharField(max_length=254, unique=True) # 博客的内容为...,是因为 django 的默认语言就是英文,只需要在配置文件 settings.py 中修改一下设置就好了 # settings.py ......定制 默认只有一行工具,虽然一般情况下可以满足用户的需要,但有时也会需要用到其他的功能,这个时候就需要自己进行配置 插件(这里以插入代码片段为例) 作为一名程序员,在写博客的时候免不了要插入一些代码片段...这个功能插件默认是不再工具栏显示的,但是是已经存在的,存放在 ......图片上传的问题 默认情况下,ckeditor 是不能图片上传,而我个人也是觉得没有必要添加这个功能,直接引用链接显示就可以了,毕竟服务器也是贼贵,没必要再弄一个来存放上传的图片,除非是刚需。

2.1K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    在django-admin中使用django-ckeditor

    在最新学习python中,使用django搭建博客系统,管理后台直接使用django自带的admin模块,所以遇到富文本编辑的问题,经过查阅资料,发现了django-ckeditor这个小插件,下面小威就分享一点点来自小白的经验吧...~ 首先安装django-ckeditor pip install django-ckeditor 其次,需要安装pillow(pillow是python的一个图形处理库,此次用到的django-ckeditor...ckeditor上传的图片所存放的目录,这里的路径是一个相对路径哟,相对于设置的“MEDIA_URL”。...这块有啥具体问题建议还是可以前往django官方文档查看哟~ 至此,我们的配置已经完成了,那接下来我们是不是可以愉快的使用了呢?...是不能上传图片的) 2.然后把你需要是富文本的字段修改下即可,如:content = RichTextUploadingField(verbose_name='内容') from ckeditor_uploader.fields

    1.6K30

    django使用ckeditor上传图片

    1、在模型类中设置字段为富文本类型,这里需要注意引入的是RichTextUploadingField,以允许上传图片,需要和RichTextField区分开 from ckeditor_uploader.fields...pip install django-ckeditor INSTALLED_APPS = [ ...   ...,并手动设置文件上传的请求路径,默认请求路径为live-server的路径,必须设置为服务器的域名和端口 }, }); 5、后端设置总路由,'ckeditor_uploader.urls'中会将接收到的请求进行...csrf校验免除,并限制了只有登录用户才可以上传图片,ckeditor默认应用的是django-admin的用户校验方法,django-admin的校验方法不允许跨域请求,我们需要使上传图片的类试图函数继承自...())), # 为富文本编辑器添加总路由 6、在应用中改写路由和类视图,使用permission_classes对请求权限进行限制 # 配置路由 urlpatterns = [ url(r'^

    2.5K10

    前端面试题-每日练习(3)

    (4)、 get 传送的数据量较小,不能大于 2KB 。post 传送的数据量较大,一般被默认为不受限制。但理论上, IIS4 中最大量为 80KB , IIS5 中为 100KB 。...(3)、c为属性选择器,伪类选择器和class类选择器的数量。...备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高。...建议:推荐使用,建议定义公共类,以减少CSS代码。...相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(默认16px)。

    15420

    Django 的 admin后台使用富文本编辑器,保存数据之后,还要在html页面展示

    目录 admin后台使用富文本编辑器 CKEditor 实现的效果 CKEditor的安装 在setting.py中的下面几个配置 关于CKEditor的路由 使用 前端如何使用 admin后台使用富文本编辑器...CKEditor 实现的效果 CKEditor的安装 pip install django-ckeditor pip install pillow 在setting.py中的下面几个配置 INSTALLED_APPS...CHEDITOR_UPLOAD_PATH的作用是设定你通过ckeditor所上传的文件的存放目录。...需要注意的是,如果使用django自带的存储,那么路径是一个相对路径,它相对与你设置的的MEDIA_ROOT。...支持上传文件的富文本字段; 例如: 前端如何使用 登录admin后台,使用富文本编辑器就可以进行保存数据了,保存到数据库中,就是一大段的html标签弄出的代码 查询出这个字段,在页面直接展示就可以

    1.3K20

    Web前端上万字的知识总结

    属性:     (1)  dir: 文本的显示方向,默认是从左向右     (2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文     (3) version:定义创作文档的HTML...Left:左对齐(默认)     Right:右对齐     Center:居中     Class:用一个名称来标记标题,标记名称指向在外部定义的样式表     Id:为段落设置一个标记,将来可以在一个超链接中明确的引用这个标记...事例:   (2)、文档样式表用标签表示     属性:dir       lang        title         media(文档要使用的媒介类型...)      type(样式类型)       级联样式表type的属性值都是text/css,javascript使用的样式表都是text/javascript     Media的属性值:       ...:                 exp:        td{color:red;font-size:8pt}     (b)、类样式表:能够在文档样式表或外部样式表中为同一个元素创建不同的样式,在文档后面通过设置

    3.7K100

    web前端基础知识总结

    属性: (1)  dir: 文本的显示方向,默认是从左向右 (2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文 (3) version:定义创作文档的HTML的标准版本 2、<head...Center:居中 Class:用一个名称来标记标题,标记名称指向在外部定义的样式表 Id:为段落设置一个标记,将来可以在一个超链接中明确的引用这个标记,以便作为样式表的选择器 Style:创建标题内容的内联样式...的属性值都是text/css,javascript使用的样式表都是text/javascript Media的属性值:screen 计算机显示屏(默认)  tv(电视) projection 剧场  ...charset href media rel rev (4)/样式表语法 (a)、HTML重新定义标签样式表语法: exp: td{color:red;font-size:8pt} (b)、类样式表:...能够在文档样式表或外部样式表中为同一个元素创建不同的样式,在文档后面通过设置class属性 来选择特定的样式。

    3.9K60

    HTML+CSS基础到精通系统学习

    1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像、超链接相关标签,实现图文并茂的页面...--图像的位置,宽度,高度,为图形添加的提示性文字(鼠标移动到图形上)--> 的位置,分为三类: 行内样式: 使用场景:如果希望某段文字和其他段落的文字显示风格不一样, 那么使用用“行内样式”。...:#D4BFFF; color:#2A00FF} 类选择器的定义格式为: .类名{ …样式规则;} 应用类选择器:class="类名(不含 . )"; ID 选择器: #fire...标签: 1)如果有多种样式,如果规定的样式没有冲突,则叠加; 2)如果有冲突,则最先考虑行内样式表显示,如果没有,再考虑内嵌样式显示,如果还 没有,最后采用外面样式表显示,否则就按HTML的默认样式显示

    3.2K50

    HTML+CSS纯干货就业前基础到精通系统学习201693

    1:HTML纯干货学习后的达到的效果 (1):会使用HTML的基本结构,创建网页 (2):会使用文本字体相关标签,实现文字修饰和布局 (3):会使用图像、超链接相关标签,实现图文并茂的页面 (4):会使用表格相关标签...--图像的位置,宽度,高度,为图形添加的提示性文字(鼠标移动到图形上)--> <!...color:#2A00FF} 类选择器的定义格式为: .类名{ …样式规则;} 应用类选择器:class="类名(不含 . )"; ID 选择器: #fire { color:red; font-size...> 第三步:浏览查看各网页 样式文件:newstyle.css P{…..}; 4.3:样式的混合使用 行内样式表、内嵌样式表、外部样式表各有优势,实际的开发中常常需要混合使用: 有关整个网站统一风格的样式代码...,则叠加; 2)如果有冲突,则最先考虑行内样式表显示,如果没有,再考虑内嵌样式显示,如果还 没有,最后采用外面样式表显示,否则就按HTML的默认样式显示。

    4.2K90

    Day4:html和css

    important声明的规则 使用内嵌声明 使用id选择器 使用类选择器,属性选择器,伪元素和伪类选择器 使用元素选择器 只包含一个通用选择器 同一类选择器则遵循就近原则 总结:权重是优先级的算法,层叠是优先级的表现...背景图片 语法: background-image : none | url (url) // none :  无背景图(默认的) // url :  使用绝对或相对地址指定背景图像 如果图片不重复地话...(默认的) no-repeat :  背景图像不平铺 repeat-x :  背景图像在横向上平铺 repeat-y :  背景图像在纵向平铺 设置背景图片时,默认把图片在水平和垂直方向平铺以铺满整个元素...(url) none :  无背景图(默认的) url :  使用绝对或相对地址指定背景图像 // 背景平铺(repeat) background-repeat : repeat | no-repeat...(默认值) solid:边框为单实线(最为常用的) dashed:边框为虚线 dotted:边框为点线 double:边框为双实线 border-top-style:样式; border-top-width

    4K20

    河南计算机职称考试模块选择,2016职称计算机考试模块Dreamweaver选择冲刺题1

    ( A ),否则在上传到因特网上时可能导致浏览不正常。...下面关于使时间线动画更加流畅的说法错误的是: A.不要使用太大的图像 B.在两关键帖之间加入若干的帧 C.可以增大Fps(每秒播放的帧数)的数值 D.尽量使用位图图像 答案:D 26....下面关于代码格式参数设置说法错误的是: A.通过代码格式的参数设置可以增加程序的可读性 B.在代码格式参数设置时有空格和制作符两种缩近方式 C.在代码格式参数设置时可以设置默认标签的大小写 D.在代码格式参数设置时只能使用...下面关于Edit Style Sheet(编辑样式表)对话框的设置说法错误的是: A.可以设置连接独立的外部样式表文件 B.可以新建一个HTML元素样式 C.可以同时编辑存在样式表中的两个元素样式 D....下面关于制作跳转菜单的说法错误的是: A.利用跳转菜单可以使用很小的网页空间来做更多的链接 B.在设置跳转菜单属性时,可以调整各链接的顺序 C.在插入跳转菜单时,可以选择是否加上Go按钮 D.默认是有Go

    79820

    HTML5 & CSS3初学者指南(2) – 样式化第一个网页

    让我们开始使用网页的基本样式来改善页面效果,我们将会使用到 CSS 的功能。 正式开始 CSS 是层叠样式表的缩写,它是为网页添加样式的通用语言,在所有浏览器中都支持。...类名不要以数字开头注意以下关于类选择器的几点: 类名不要以数字开头 当你想要选择网页中的一组元素时,请使用类 选择器的链接 如果一些元素需要设置为相同的样式,我们可以通过最少量的代码将它们一起设置...下面是起作用的优先级顺序(从高到低): 内嵌样式表(内部 HTML 元素) 内部样式表(内部 head 部分) 外部样式表(外部的 .css 文件) 浏览器默认的(没有指定任何样式表...background-repeat:repeat-y; 背景位置 需要固定背景图像到屏幕的某些位置上,设置 backgroung-position属性为“top right”。...让我们一起检查一下浏览器的输出。第一段是100%的字体大小,默认使用 CSS 中的 body 选择器。相比较,第二段为50%的字体大小。对于第3段和第4段,他们的字体大小相同。

    2.2K70

    HTML以及CSS初级操作

    ;gif格式是在网页中使用最广泛、最普遍的一种图像格式,他是图像交换格式(Graphics Interchange Format)的缩写,gif支持透明色,使得Gif图像在网页的背景和一些多层特效的显示上使用得非常多...Web页面中的一块独立区域 article 独立的文章内容 aside 相关内容或应用(常用于侧边栏) nav 导航类辅助内容 1.4 使用CSS美化页面元素 1.4.1 什么是css css全称层叠样式表..." 指的是在页面中使用这个外部样式表 type中的值为text/css指的是文件的类型为样式表文件 导入式...垂直居中对齐的值多为middle text-shadow的第一个值为x轴位移 之后分别为 y轴位移 以及模糊半径 1.5.2 设置超链接和列表样式 伪类名称 含义 a:link 单击访问前的超链接样式...、不同的部分 背景属性 背景颜色 在css中使用backgroun-color来设置背景颜色,与color用法相同 背景图像 在css中使用backgroun-image属性设置背景图片,通常会与background-position

    2.5K30

    CSS入门

    CSS (层叠样式表——Cascading Style Sheets,缩写为 CSS),简单的说,它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。...2.1.3 外部样式表 外部样式表是CSS附加到文档中的最常见和最有用的方法,因为您可以将CSS文件链接到多个页面,从而允许您使用相同的样式表设置所有页面的样式。...,建议使用外部样式表。....box { background-color: #567895; } 背景图 该background-image属性允许在元素的背景中显示图像。使用url函数指定图片路径。...基本布局 内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。在 CSS 中,width 和 height 指的是内容区域的宽度和高度。

    4K20

    OpenCV3 和 Qt5 计算机视觉:1~5

    设置应用的样式 Qt 支持使用QStyle类和 Qt 样式表的应用中的样式。 QStyle是 Qt 中所有样式的基类,它封装了 Qt 用户界面的样式。...现在,让我们看一下在 Qt 中设置样式表时的一些重要概念。 选择器类型 以下是可以在 Qt 样式表中使用的选择器类型。...每个窗口小部件的样式都将取决于级联规则,这意味着每个窗口小部件还将获得在父窗口小部件或应用中设置的样式规则(如果为其设置了样式表)。...,然后在运行时加载并设置样式表来执行相同的操作,就像我们在本章后面为综合计算机视觉应用的基础构建时所做的那样。...例如,我们可以使用它来存储设置为QGraphicsPixmapItem的图像的路径,或者存储与特定项目相关的任何其他类型的信息。

    6K20

    基于 Django 的个人网站(2)

    django-ckeditor 的安装 django-ckeditor 的安装非常简单,直接:pip install django-ckeditor 就行了,安装完成之后如图所示。 ? ?...django-ckeditor 的使用 使用 django-ckeditor 非常简单,因为我这里安装的是 django-ckeditor-5,和 django-ckeditor 差不多,但是也还是有一些区别的...我们可以发现按钮太少了,连代码块都没有,只不过仔细观察 CKEDITOR_5_CONFIGS 可以发现里面一共有两个设置,一个是 default,一个是 extends,默认用的是 default,很明显...extends 功能更多,要想使用 extends,我们只要把 extends 改成 default,然后把 default 的键值对给删除不就行了吗?...ArticleDetailView 就是文章详情页面视图类,接着去编写其对应的模板 html 文件,打开 templates\article_detail.html,代码如下: <!

    2.2K20

    Java学习笔记-全栈-web开发-02-css必备基础

    外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 样式表解决了html的内容与表现分离 使用样式表极大的提高了工作效率。...浏览器会从mystyle.css文件中读取样式,并对页面上的html进行修饰。 外部样式表,以css为后缀来保存,可以使用任意文本编辑器对css文件进行编辑。...5.1 id选择器 id选择器使用#引入,它引用的是id属性中的值。 ? ? 5.2 类选择器 类选择器使用时,需要在类名前加一个点号(.) 项目中,绝大部都是用类选择器排版。 ?...5.9 分类 CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。...border-width:简写属性,用于为元素的所有边框设置宽度,或则单独地为各边边框设置宽度 border-top:简写属性,用于把上边框的所有属性设置到一个声明中 border-right:简写属性

    1.7K30
    领券