网站搭建 (第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目录下 ...
随机推荐
- Vue.js的简介
vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大 ...
- git分支与主干合并操作
git分支与主干合并操作1.主干合并分支在主干上合并分支 branch (master)git merge branch --squash 提交合并后的代码 (master)git commit -m ...
- burp抓取ios设备https数据包
参考了网上其他相关教程,自己动手试了一次,有效的方法可确定为: 1.让PC机和移动端处于同一局域网, 2.burp设定监听所有接口,并监听一个端口 3.手机端设置代理,方式为手动,ip地址填PC在局域 ...
- ElasticSearch - 信息聚合系列之聚合过滤
摘要 聚合范围限定还有一个自然的扩展就是过滤.因为聚合是在查询结果范围内操作的,任何可以适用于查询的过滤器也可以应用在聚合上. 版本 elasticsearch版本: elasticsearch-2. ...
- 多线程深入:synchronized(转,有删减)
原文:https://www.cnblogs.com/hapjin/p/4678773.html synchronized 修饰方法时锁定的是调用该方法的对象.它并不能使调用该方法的多个对象在执行顺序 ...
- 爬虫下载QQ音乐:获取所有歌手-每个歌手的专辑-每个专辑里的歌曲
# coding=utf-8 # !/usr/bin/env python ''' author: dangxusheng desc : 稍微有点难度,需要多次请求获取key date : 2018- ...
- linux touch命令 创建文件
touch 创建文件,用法,touch test.txt,如果文件存在,则表示修改当前文件时间 [root@MongoDB ~]# touch /data/text.txt [root@MongoDB ...
- Git常用功能记录
1. git查看某个文件的修改历史 git log --pretty 然后使用下面的命令可列出文件的所有改动历史,注意,这里着眼于具体的一个文件,而不是git库,如果是库,那改动可多了去了- git ...
- PyCharm更换sublime类似主题
1. 下载jar主题包 下载地址:https://github.com/spasserby/PyCharm-monokai 2.导入pycharm设置 导入方法:file-->Import Se ...
- LeetCode 15 输入无序、有重复,输出排重版 3-Sum
V1 粗暴的遍历,时间复杂度O(N³) func threeSumClosest(nums []int, target int) int { min := 0 result := 0 for i := ...