Django建站历程：CKEditor的配置使用

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放到env\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins目录下。注意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则是评论正文字段。

关注我的知乎
我的博客网站
我的微信公众号