Django建站历程:CKEditor的配置使用
1、安装django-ckeditor
pip install django-ckeditor
2、全局settings.py添加APP
需要添加 'ckeditor', 'ckeditor_uploader' 两个APP。
# Application definition
INSTALLED_APPS = [
'ckeditor',
'ckeditor_uploader'
]
3、指定CKEditor文件上传保存路径
在全局settings下添加,这里我加到了MEDIA路径之后:
# 媒体文件
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
CKEDITOR_UPLOAD_PATH = 'ckeditor_upload'
CHEDITOR_UPLOAD_PATH的作用是设定你通过ckeditor所上传的文件的存放目录。需要注意的是,这是一个相对路径,它相对与你设置的的MEDIA_ROOT。也就是文件会被上传到media/ckeditor_upload 路径下。
4、添加CKEditor全局路由
在全局urls.py文件中添加路由:
urlpatterns = [
path('ckeditor/', include('ckeditor_uploader.urls')),
]
5、修改model属性字段
之前的文章内容是用的TextField,这里我们修改为 RichTextUploadingField
from ckeditor_uploader.fields import RichTextUploadingField
body = RichTextUploadingField(verbose_name='内容', default='请输入文章内容....')
6、同步数据库
修改完model属性字段后,最后一步就是同步数据库咯。
python manage.py makemigrations
python manage.py migrate
此时,运行服务器打开后台管理点击新增文章,可以发现文章内容的编辑框已经成了富文本编辑,但是貌似工具栏按钮不是很全?在项目的全局setting里添加配置:
# ckeditor
CKEDITOR_CONFIGS = {
'default': {
'skin': 'moono-lisa',
'toolbar_Basic': [
['Source', '-', 'Bold', 'Italic']
],
'toolbar_Full': [
[ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ],
[ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ],
[ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ],
[ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ],
'/',
[ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ],
[ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ],
[ 'Link','Unlink','Anchor' ],
[ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ],
'/',
[ 'Styles','Format','Font','FontSize' ] ,
[ 'TextColor','BGColor' ] ,
[ 'Maximize', 'ShowBlocks','-','About' ] ,
],
'toolbar': 'Full',
}
}
再次运行,可以看到非常全的工具栏!
运行后打开发现,怎么是html格式的?没关系,将“{{article.body}}”修改为“{{article.body|safe}}”就完美解决!
7、添加代码段按钮
Code Snippet 是CKEditor的一个扩展组件,非常好用,只需要将“codesnippet”添加到配置文件即可:
# ckeditor
CKEDITOR_CONFIGS = {
'default': {
'skin': 'moono-lisa',
'toolbar_Basic': [
['Source', '-', 'Bold', 'Italic']
],
'toolbar_Full': [
[ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ],
[ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ],
[ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ],
[ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ],
'/',
[ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ],
[ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ],
[ 'Link','Unlink','Anchor' ],
[ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ],
'/',
[ 'Styles','Format','Font','FontSize' ] ,
[ 'TextColor','BGColor' ] ,
[ 'Maximize', 'ShowBlocks','-','About' ] ,
['CodeSnippet'], #代码段按钮
],
'toolbar': 'Full',
'extraPlugins': 'codesnippet', #代码段插件
}
}
重新运行服务器,进入后台就可以看到添加代码的按钮了,还能选择语言。
8.代码高亮
代码高亮需要添加额外的插件Prism。在Prism插件官方页面下载(也可以点击这里直接下载)后,将解压出来的prism
放到envLibsite-packagesckeditorstaticckeditorckeditorplugins
目录下。注意env是你创建的虚拟环境的目录。然后在Prism官网选择主题:
- 根据喜好选择一个喜欢的主题
- 然后选择需要高亮的语言。不清楚就可以全选
- 勾选行号插件
- 最后点击
DOWNLOAD CSS
下载样式
在静态文件目录static
中新建prism
目录,将下载好的CSS文件放进去。
然后在需要代码高亮的模板文件中引用prism的静态文件,对代码进行渲染:
<script src="{% static 'prism/prism_patched.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'prism/prism.css' %}">
将Prism、widget、lineutils插件添加到配置文件中。后面两个编辑器自带,不用单独下载,添上就可以了:
my_blog/settings.py
...
CKEDITOR_CONFIGS = {
'default': {
...
# 添加 Prism 相关插件
'extraPlugins': ','.join(['codesnippet', 'prism', 'widget', 'lineutils']),
}
}
9.在评论中使用Ckeditor
首先需要把评论的表单传递到文章详情页面中。因此修改article_detail
视图:
blog/views.py
# 引入评论表单
from comment.forms import CommentForm
# 引入评论表单
comment_form = CommentForm()
context = { 'comment_form': comment_fo, }
然后将detail.html
原来评论表单中的正文部分替换如下:
templates/blog/detail.html
{{ comment_form.media }}
{{ comment_form.body }}
其中的comment_form.media
是编辑器自身的渲染代码,comment_form.body
则是评论正文字段。
10.注意
在项目部署上线后可能文章详情页面ckeditor 无法加载请针对错误提示进相关的修改,一般是css文件的问题.
关注我的博客
www.jeiban.comwww.jeiban.com关注我的公众号
关注我的CSDN