Django中如何增加CKeditor富文本编辑框中的编辑工具

大家在前端或者admin中使用django-ckeditor时，可能觉得默认的编辑工具太少，比如没有文本居中，没有缩进控制。尽管个人觉得这个还是让前端控制的好。但是这里和大家分享一下如何让CKeditor看起来更丰满的小技巧。

多两句嘴，为什么推荐使用CKeditor，首先，这个东西比较符合普通用户的使用习惯，editormd那个东西太变态了。其实百度的ueditor也不错，比这个更加符合中文用户的使用习惯，可惜不维护了。其次，最主要的，CKeditor只要pip安装一下即可，后续再没有乱七八糟的各种css、js一大串静态文件需要导入。尤其是有些编辑器，需要修改css或者js，这个对后端太痛苦了。

原来的样子：

在settings里面，放置如下配置：

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': (
            ['div', 'Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
            ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
            ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
            ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
            ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
            ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
            ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
            ['Link', 'Unlink', 'Anchor'],
            ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
            ['Styles', 'Format', 'Font', 'FontSize'],
            ['TextColor', 'BGColor'],
            ['Maximize', 'ShowBlocks', '-', 'About', 'pbckcode'],
        ),
    }
}

变成如下样子：

看着丰满多了。

---------------------------------------------------------------------------------------------------------------------------------------------

横线一下仅供参考，从别处copy过来的。原链接：https://www.jianshu.com/p/65d2a748634b

http://yshblog.com/blog/193

Django + django-ckeditor富文本编辑器

富文本编辑器提供了类似 Microsoft Word 的编辑功能，即使不会编写 html 代码的用户也可以设置各种文本格式

django-ckeditor

• 安装

先安装依赖：pip install Pillow

$ pip install django-ckeditor

• 注册

 

# settings.py
...
# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
    # 将 django-ckeditor 注册到该列表中
    'ckeditor',
]

• 创建模型

 在 models.py 中导入 RichTextField 类

 

# blog/models.py
from django.db import models
from ckeditor.fields import RichTextField

# 博客模型
class Blog(models.Model):
    title = models.CharField(max_length=254, unique=True)
    # 博客的内容为 RichTextField 对象
    body = RichTextField()

    def __str__(self):
        return self.title

• 数据库迁移
   模型代码完成之后进行数据库迁移

 

$ python manage.py makemigrations
$ python manage.py migrate

• 注册该模型使其在后台显示

 

# blog/admin.py
from django.contrib import admin
from .models import Blog

#注册该模型
@admin.register(Blog)
class BlogAdmin(admin.ModelAdmin):
    # 列表页面显示字段
    list_display = ['title', 'body']

• 在后台使用富文本编辑器编写文章

 打开 http://127.0.0.1:8000/admin 进入后台

image

 在 Blog 一栏点击 Add 按钮添加博客文章

image

 

 可以看到，文章的 body 部分已经替换成一个富文本编辑框了

 之所以显示成英文，是因为 django 的默认语言就是英文，只需要在配置文件 settings.py 中修改一下设置就好了

 

# settings.py
...
LANGUAGE_CODE = 'zh-hans'

TIME_ZONE = 'Asia/Shanghai'
...

image

定制

 默认只有一行工具，虽然一般情况下可以满足用户的需要，但有时也会需要用到其他的功能，这个时候就需要自己进行配置

image

• 插件（这里以插入代码片段为例）

 作为一名程序员，在写博客的时候免不了要插入一些代码片段，所以就需要插入的代码在前端根据不同的编程语言显示出不同的格式。

 这个功能插件默认是不再工具栏显示的，但是是已经存在的，存放在 ...\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins\ 目录中，名称是 codesinppet

• 配置

 在 settings.py 中添加自己的 ckeditor 配置，如下

 

# settings.py
...
# ckeditor
CKEDITOR_CONFIGS = {
    # 将这份配置命名为 my_config
    'my_config': {
        'skin': 'moono-lisa',
        'toolbar_Basic': [
            ['Source', '-', 'Bold', 'Italic']
        ],
        'toolbar_Full': [
            ['Styles', 'Format', 'Bold', 'Italic', 'Underline', 'Strike', 'SpellChecker', 'Undo', 'Redo'],
            ['Link', 'Unlink', 'Anchor'],
            ['Image', 'Flash', 'Table', 'HorizontalRule'],
            ['TextColor', 'BGColor'],
            ['Smiley', 'SpecialChar'],
            # 在工具栏中添加该功能的按钮
            ['CodeSnippet'], ['Source'],

        ],
        'toolbar': 'Full',
        'height': 291,
        'width': 835,
        'filebrowserWindowWidth': 940,
        'filebrowserWindowHeight': 725,
        # 添加的插件
        'extraPlugins': 'codesnippet',
    }
}
...

 添加好新的配置，只需要在初始化时添加参数 config_name 引用改配置就可以了

 

# blog/models.py
...
class Blog(models.Model):
    title = models.CharField(max_length=254, unique=True)
    # 添加参数 config_name 指定使用的配置
    body = RichTextField(config_name='my_config')

    def __str__(self):
        return self.title

 修改后必须重启服务器才会生效

image

• 更多

 如果需要其他功能插件，只需要按照前面的办法就可添加，而 django-ckeditor 没有自带的，只需要在网上把插件下载到 ckeditor\static\ckeditor\ckeditor\plugins\ 目录中，再进行配置即可。

图片上传的问题

  默认情况下，ckeditor 是不能图片上传，而我个人也是觉得没有必要添加这个功能，直接引用链接显示就可以了，毕竟服务器也是贼贵，没必要再弄一个来存放上传的图片，除非是刚需。

 所有这里不会再讲这部分内容，想看的话可以移步这里

代码高亮

 在后台管理页面中，编辑器中的代码块已经有高亮效果了，然而在普通页面中显示却没有效果。这是因为编辑器已经默认引用了 highlight.js 库,而在普通页面中，只需要手动添加 highlight.js 就可以使代码达到高亮的效果。代码如下：

 

...
    <link rel="stylesheet" href="/static/css/googlecode.css">
    <script src="/static/js/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
...

solarized_dark

• googlecode.css 是 google 风格高亮效果的样式文件，也可以选择其他的比如默认的 default.css 或者 solarized_dark.css 等等，在 highlight.js demo
  中可以看到具体的效果，而这些文件可以在 “...\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins\codesnippet\lib\highlight\styles” 目录中找到(没有的话就在下面的链接中去下载)。
• highlight.pack.js 就是需要引用的 js 库(可在“...\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins\codesnippet\lib\highlight”目录中找到，也可以直接下载)
• 通过 hljs.initHighlightingOnLoad() 进行调用
• document page ,download page

作者：fbckf
链接：https://www.jianshu.com/p/65d2a748634b
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。