django博客开发：添加富⽂本编辑器ckeditor
Markdown⽤的不太习惯，于是决定添加⼀个富⽂本编辑器。ckeditor是⼀个⽼牌的编辑器，GitHub上有⼀个第三⽅模块django-ckeditor封装了所有功能，把import到我们的项⽬⾥，然后设置⼀下参数，就可轻松使⽤了。
EDIT：通过⽹友反应的⼀些问题，以及后来我对djangk-ckeditor的深⼊使⽤，决定对本⽂重新编辑⼀下，让各位学友少踩⼀些坑，同时增加⼀些功能的介绍。
开发环境： Python 3.5、Django 1.10
安装
使⽤pip安装 django-ckeditor 和 pillow，pillow⽤于⽣成缩略图，⽤来在编辑器⾥浏览上传的图⽚
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_ROOT 和 MEDIA_URL，CKEDITOR_UPLOAD_PATH = 'upload/'，图⽚将上传到项⽬下的media/upload路径下，图⽚的url是/media/upload/
3. 设置CKEDITOR_IMAGE_BACKEND = 'pillow', ⽤于⽣成图⽚缩略图，在编辑器⾥浏览上传的图⽚
4. 在project/urls.py⾥，加⼊ ckeditor_uploader.url
f.urls import url,include
f.urls.static import static
f import settings
ib import admin
urlpatterns =[
url(r'', include('ckeditor_uploader.urls')),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)#没有这⼀句⽆法显⽰上传的图⽚
注意
在开发环境⾥debug模式下，static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) 这句是必不可少的，没有的话，你上传的图⽚将⽆法显⽰。将这段代码Python shell⾥运⾏⼀下，会发现其实就是解析了media_url
当我们在服务器部署时，需要⽤nginx来配置静态资源，在nginx的配置⽂件⾥
location /media {
alias /path-to/media;
}
4. 在blog/models.py的Post类，让正⽂字段使⽤ RichTextUploadingField()
from ckeditor_uploader.fields import RichTextUploadingField
class Post(models.Model):
content = RichTextUploadingField(verbose_name='正⽂')
5. 最后还是不要忘了迁移数据库
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的源码进⾏修改
django admin 自定义页面在ckeditor_uploader/urls.py⾥，它的upload 和 browse⽅法⽤了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
'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')
添加代码功能
写技术博客的话，我们的编辑器⾃然需要添加代码块的功能。需要⽤到插件codesnippet，ckeditor的插件放在
了ckeditor/static/ckeditor/ckeditor/plugins/路径下。
当我们添加⼀个功能插件时，需要在CKEDITOR_CONFIGS⾥的extraPlugins对应的value⾥添加该插件的名字（名字字母⼩写），如果该插件还有相对应的按钮，则在toolbar对应的value⾥添加名字（⾸
字母⼤写），以codesnippet为例，在下⾯代码的第16⾏和21⾏分别添加
了 'CodeSnippet' 和 'codesnippet'
NOTICE
在21⾏的extraPlugins⾥还添加了 'uploadimage'，这个插件的作⽤是允许⽤户直接在编辑器⾥粘贴（ctrl + v）图⽚
'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官⽹下载（点这⾥直接下载），然后将其解压到ckeditor/static/ckeditor/ckeditor/plugins路径下，同样的我们需要
在CKEDITOR_CONFIGS⾥将extraPlugins对应的value⾥加⼊插件 'prism' 和另外两个插件"lineutils"、"widget" ，这两个插件⽆须下载，在django-ckeditor中已经有了
'extraPlugins':','.join(['codesnippet','uploadimage','prism','widget','lineutils',]),
然后在模板中引⽤静态⽂件
<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>
当然还有另外⼀种⽅法，本质上跟前者⼀样的
<form>
{{ dia }}
{{ myform.as_p }}
<input type="submit"/>
</form>
编辑框响应式
1. 需要CKEDITOR_CONFIGS⾥设置 'width': 'auto'
2.
<script>
$(".django-ckeditor-widget").removeAttr('style');
</script>
原⽂地址：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论