网站搭建 (第06天) Ckeditor编辑器
一、前言
富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,这是百度百科的对富文本编辑器的解释。我们可以借助富文本编辑器,编辑出来一个包含html的页面,从而页面的显示效果,可以由网站管理员定义,而不用完全依赖于开发的人员。我之前使用的是一个叫tinymce的富文本编辑,它比较精简,功能不是很丰富。在使用了一段tinymce后,就转用了django-ckeditor,后来发现是真的好用,当然还有一个叫做Ueditor的编辑器,听说也还不错,但我这里就用ckeditor来布置了。
在这里,我会将步骤大致记录下来,但还是要推荐给大家一篇非常棒的关于ckeditor配置的文章,也是我之前参考学习的。Django博客开发:添加富文本编辑器ckeditor,网上大部分教程与此类似,但个人感觉都没有这篇写的详细,写的易懂。
二、安装环境
使用pip安装 django-ckeditor 和 pillow,pillow用于生成缩略图,用来在编辑器里浏览上传的图片。
pip install django-ckeditor
pip install pillow
在 project/settings.py 里进行如下设置:
INSTALLED_APPS = [
'ckeditor',
'ckeditor_uploader',
] MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
CKEDITOR_UPLOAD_PATH = 'upload/'
CKEDITOR_IMAGE_BACKEND = 'pillow'
在project/urls.py里,加入 ckeditor_uploader.url。
from django.conf.urls import url,include
from django.conf.urls.static import static
from django.conf import settings
from django.contrib import admin urlpatterns = [
url(r'', include('ckeditor_uploader.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) #没有这一句无法显示上传的图片
在blog/models.py的Post类,让正文字段使用 RichTextUploadingField()。
from ckeditor_uploader.fields import RichTextUploadingField class Post(models.Model):
content = RichTextUploadingField(verbose_name='正文')
迁移数据库,做完这一步就可以在后台编辑文章时发现编辑器已经添加成功了。
pyhton manage.py makemigrations
python manage.py migrate
三、自定义编辑器
如果想要自定义编辑器,添加或删除一些按钮的话,需要在settings.py里设置 CKEDITOR_CONFIGS。
CKEDITOR_CONFIGS = {
# 配置名是default时,django-ckeditor默认使用这个配置
'default': {
# 使用简体中文
'language':'zh-cn',
# 编辑器的宽高请根据你的页面自行设置
'width':'auto',
'height':'150px',
'image_previewText':' ',
'tabSpaces': 4,
'toolbar': 'Custom',
# 添加按钮在这里
'toolbar_Custom': [
['Bold', 'Italic', 'Underline', 'Format', 'RemoveFormat'],
['NumberedList', 'BulletedList'],
['Blockquote', 'CodeSnippet'],
['Image', 'Link', 'Unlink'],
['Maximize']
],
# 插件
'extraPlugins': ','.join(['codesnippet','uploadimage','widget','lineutils',]),
}
}
当配置名称是 'default',django-ckeditor会默认使用这个配置,CKEDITOR_CONFIGS里可以添加多个配置,比如
CKEDITOR_CONFIGS = {
# 配置名是default时,django-ckeditor默认使用这个配置
'default': { }
# 名为custom的配置
'custom': { }
}
当需要使用非默认配置时,需要在 RichTextUploadingField() 里指定该配置名称。
class Post(models.Model):
content = RichTextUploadingField(config_name='custom')
四、添加代码功能
为什么从tinymce编辑器传到ckeditor很大原因就是为平时都会用编辑器写一些代码,所以编辑器自然需要添加代码块的功能,tinymce似乎没有这个功能,至少我目前没有找到。而ckeditor只需要用到插件codesnippet,并且ckeditor的插件放在了ckeditor/static/ckeditor/ckeditor/plugins/路径下。以codesnippet为例,在下面代码的第16行和21行分别添加了 'CodeSnippet' 和 'codesnippet' 。
CKEDITOR_CONFIGS = {
# 配置名是default时,django-ckeditor默认使用这个配置
'default': {
# 使用简体中文
'language':'zh-cn',
# 编辑器的宽高请根据你的页面自行设置
'width':'730px',
'height':'150px',
'image_previewText':' ',
'tabSpaces': 4,
'toolbar': 'Custom',
# 添加按钮在这里
'toolbar_Custom': [
['Bold', 'Italic', 'Underline', 'Format', 'RemoveFormat'],
['NumberedList', 'BulletedList'],
['Blockquote', 'CodeSnippet'],
['Image', 'Link', 'Unlink'],
['Maximize']
],
# 插件
'extraPlugins': ','.join(['codesnippet','uploadimage','widget','lineutils',]),
}
}
五、代码高亮、代码行数
从ckeditor官网下载 插件prism(点这里直接下载),然后将其解压到ckeditor/static/ckeditor/ckeditor/plugins路径下,同样的还需要在CKEDITOR_CONFIGS里将extraPlugins对应的value里加入插件 'prism' 和另外两个插件"lineutils"、"widget" ,这两个插件无须下载,在django-ckeditor中已经有了。
'extraPlugins': ','.join(['codesnippet','uploadimage','prism','widget','lineutils',]),
去prismjs官网下载css文件http://prismjs.com/download.html,选择喜欢的主题,勾选支持的语言,以及选择line-numbers功能,下载后把解压到static/blog/css下。
然后在模板中引用静态文件。
<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'blog/css/prism.css' %}">
六、在admin以外的地方使用django-ckeditor
如果在admin以外的地方使用django-ckeditor,比如添加评论功能。
在渲染表单的那个页面需要引入 ckeditor-init.js 和 ckeditor.js 两个文件,否则编辑器无法显示。
{% load static %}
<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>
七、编辑框响应式
需要CKEDITOR_CONFIGS里设置 'width': 'auto'。
<script>
$(".django-ckeditor-widget").removeAttr('style');
</script>
原文出处:https://jzfblog.com/detail/54,文章的更新编辑以此链接为准。欢迎关注源站文章!
网站搭建 (第06天) Ckeditor编辑器的更多相关文章
- node.js express安装及示例网站搭建
1.首先肯定是要安装Node.JS windows cmd依次输入如下命令: cd C:\Program Files\nodejs\ npm install -g expressnpm install ...
- linux下网站搭建
我们知道windows网站搭建一般是:IIS+Asp+Sqlserver,而 linux网站搭建是:Apache+php+Mysql.两者之间个有千秋,但是为什么我们许多的门户网站搭建都选择linux ...
- javascript获取ckeditor编辑器的值(实现代码)
CKeditor编辑器是FCKeditor的升级版本想对于FCK来说,确实比较好用,加载速度也比较快以下是如果通过JS获取CKeditor编辑器的值,用于表单验证 if(CKEDITOR.instan ...
- 关于wordpress中更换CKEditor编辑器
wordpress中自带的编辑器实在是功能太简,连插入表格都没有,使用插件的方式太过于麻烦,干脆就直接更换编辑器了,在网上找了一些方法,下文引自http://down.chinaz.com/try/2 ...
- ckeditor编辑器在java项目中配置
一.基本使用: 1.所需文件架包 A. Ckeditor基本文件包,比如:ckeditor_3.6.2.zip 下载地址:http://ckeditor.com/download 2.配置使用 A.将 ...
- springMVC+angular+bootstrap+mysql的简易购物网站搭建
springMVC+angular+bootstrap+mysql的简易购物网站搭建 介绍 前端的css框架用了bootstrap, 以及bootstrap的JS组件, 以及很好用的angular(a ...
- 简易漫画网站搭建-漫画喵Server版
小喵的唠叨话:寒假的时候写了一个漫画爬虫,爬取了好几个漫画,不过一直没有找到合适的漫画阅读的工具.因此最近就试着自己写一个漫画的网站,放在公网上或者局域网里,这样就能随时随地用手机.Pad看漫画了. ...
- [个人网站搭建]·Django增加评论功能(Python3)
[个人网站搭建]·Django增加评论功能 个人主页--> https://xiaosongshine.github.io/ 个人网站搭建github地址:https://github.com/ ...
- PHP如何搭建百度Ueditor富文本编辑器
本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下 ...
随机推荐
- TPS6116x 1-wire总线的分析与驱动实现
1-wire总线的特点 1-wire协议是用一条数据线作为总线进行数据通信的协议. 1-wire总线有以下特点: 1. 可以组建网络,个数没有限制. 2. 使用GPIO的特性就可以,不需要专门的控制器 ...
- NABCD---生活日历
本软件的主体为日历.如今人们的生活趋于现代化,大家主要通过手机来查看日期,但我们每一天都有想要做或未完成的事情,也存在对自己有特殊意义的日子.每天人们都会有或大或小的支出与收入,想要系统的记录这些支出 ...
- robotframework RF使用中需要安装的工具和库
确保 Python 3.6.2 安装成功 安装 如下 RF使用中需要的工具和库 1. RF 在两个Python中安装 robotframework执行命令 pip install robotframe ...
- 线性表->应用->一元多项式
文字描述 在数学上,一个一元多项式可以按升幂写成如下形式. 它由n+1个系数唯一确定.因此,在计算机里,可以用一个线性表P来表示,P中每一项的指数i隐含在其系数pi的序号里. 但是在通常的应用中, ...
- Win10 将slim加入PYTHONPYTH
1.LINUX 命令 export PYTHONPATH=$PYTHONPATH:'pwd':'pwd'/slim 2.Windows 命令 SET PYTHONPATH=%cd%;%cd%\slim ...
- python celery多worker、多队列、定时任务
python celery多worker.多队列.定时任务
- VM中centos设置子网内虚拟机ip
,首先应该设置vm的网络,打开编辑->虚拟网络编辑器,弹出框及具体设置如下图 2,选中相应的虚拟机,右键设置,并设置相应的选项,具体设置如下图 3.设置完成后,打开虚拟机,等待虚拟机启动后,输入 ...
- JVM深入:JDK8-废弃永久代(PermGen)迎来元空间(Metaspace)(转)
转载自:https://www.cnblogs.com/yulei126/p/6777323.html 1.背景 2.为什么废弃永久代(PermGen) 3.深入理解元空间(Metaspace) 4. ...
- XLSReadWriteII5使用参考
varxls: TXLSReadWriteII5 xls.Filename 文件名xls.Read 开始读取xls.Count sheet总数xls.Sheets[i].Name sheet名xls. ...
- jQuery通过ajax请求php遍历json数组到table中的代码
html代码(test.html),js在html底部 具体代码如下所示: <!DOCTYPE html> <html lang="en"> <hea ...