Django建站历程：CKEditor的配置使用
1、安装django-ckeditor
pip install django-ckeditor2、全局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
