django博客开发:添加富文本编辑器ckeditor

ckeditor是一个老牌的编辑器,GitHub上有一个第三方模块django-ckeditor封装了所有功能,把import到我们的项目里,然后设置一下参数,就可轻松使用了

github地址: https://github.com/django-ckeditor/django-ckeditor

开发环境: Python 3.5、Django 1.10

安装

使用pip安装 django-ckeditorpillowpillow用于生成缩略图,用来在编辑器里浏览上传的图片

pip install django-ckeditor
pip install pillow

QUICK START

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'
  1. 首先将 'ckeditor''ckeditor_uploader'加入到INSTALLED_APPS
  2. 设置 MEDIA_ROOTMEDIA_URLCKEDITOR_UPLOAD_PATH = 'upload/',图片将上传到项目下的media/upload路径下,图片的url是/media/upload/
  3. 设置CKEDITOR_IMAGE_BACKEND = 'pillow', 用于生成图片缩略图,在编辑器里浏览上传的图片
Paste_Image.png
  1. 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) #没有这一句无法显示上传的图片

NOTICE:在开发环境里debug模式下,static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
这句是必不可少了,没有的话,你上传的图片将无法显示。将这段代码Python shell里运行一下,会发现其实就是解析了media_url


当我们在服务器部署时,需要用nginx来配置静态资源,在nginx的配置文件里

location /media {
                alias /path-to/media;
        }
  1. blog/models.py的Post类,让正文字段使用 RichTextUploadingField()
from ckeditor_uploader.fields import RichTextUploadingField

class Post(models.Model):
    content = RichTextUploadingField(verbose_name='正文')
  1. 最后还是不要忘了迁移数据库
pyhton manage.py makemigrations
python manage.py migrate

进入admin后台去添加文章,就会发现编辑器已经在那里了,是不是很开心啊

其他可选配置

CKEDITOR_ALLOW_NONIMAGE_FILES = False 不允许非图片文件上传,默认为True
CKEDITOR_BROWSE_SHOW_DIRS = True 在编辑器里浏览上传的图片时,图片会以路径分组,日期排序
CKEDITOR_RESTRICT_BY_USER = True 限制用户浏览图片的权限,只能浏览自己上传的图片,图片会传到以用户名命名的文件夹下,超级管理员依旧可以看所有图片

NOTICE:django-ckeditor默认的只允许管理员(staff member)上传图片,当普通用户使用编辑器时(比如评论区、留言板、发帖子),如果要使他们上传图片的话,需要对django-ckeditor的源码进行修改

ckeditor_uploader/urls.py里,它的uploadbrowse方法用了staff_member_required装饰器,把它换成login_required装饰器即可

if django.VERSION >= (1, 8):
    urlpatterns = [
        url(r'^upload/', login_required(views.upload), name='ckeditor_upload'),
        url(r'^browse/', never_cache(login_required(views.browse)), name='ckeditor_browse'),
    ]

自定义编辑器

如果想要自定义编辑器,添加或删除一些按钮的话,需要在settings.py里设置 CKEDITOR_CONFIGS

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',]),
    }
}

当配置名称是 'default',django-ckeditor会默认使用这个配置,CKEDITOR_CONFIGS里可以添加多个配置,比如

CKEDITOR_CONFIGS = {
    # 配置名是default时,django-ckeditor默认使用这个配置
    'default': {

    }  
    # 名为custom的配置  
    'custom': {

    }
}

当需要使用非默认配置是,需要在 RichTextUploadingField() 里指定该配置名称

class Post(models.Model):
    content = RichTextUploadingField(config_name='custom')

添加代码功能

写技术博客的话,我们的编辑器自然需要添加代码块的功能。需要用到插件codesnippet,ckeditor的插件放在了ckeditor/static/ckeditor/ckeditor/plugins/路径下。
当我们添加一个功能插件时,需要在CKEDITOR_CONFIGS里的extraPlugins对应的value里添加该插件的名字(名字字母小写),如果该插件还有相对应的按钮,则在toolbar对应的value里添加名字(首字母大写),以codesnippet为例,在下面代码的第16行和21行分别添加了 'CodeSnippet''codesnippet'
NOTICE:在21行的extraPlugins里还添加了 'uploadimage',这个插件的作用是允许用户直接在编辑器里粘贴(ctrl + v)图片

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.jsckeditor.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>

原文链接:http://www.aaron-zhao.com/post/1/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 143,540评论 1 302
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 61,539评论 1 258
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 95,005评论 0 213
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 41,159评论 0 180
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 48,946评论 1 258
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 38,864评论 1 178
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,468评论 2 273
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,218评论 0 167
  • 想象着我的养父在大火中拼命挣扎,窒息,最后皮肤化为焦炭。我心中就已经是抑制不住地欢快,这就叫做以其人之道,还治其人...
    爱写小说的胖达阅读 29,070评论 6 234
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 32,574评论 0 213
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,353评论 2 215
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 30,683评论 1 232
  • 白月光回国,霸总把我这个替身辞退。还一脸阴沉的警告我。[不要出现在思思面前, 不然我有一百种方法让你生不如死。]我...
    爱写小说的胖达阅读 24,270评论 0 32
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,168评论 2 214
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 31,591评论 3 210
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,638评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,035评论 0 166
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 33,590评论 2 232
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 33,685评论 2 233

推荐阅读更多精彩内容