Django27——使用django-ckeditor富文本编辑器

使用富文本编辑器在后台对博文、景点信息等进行操作。

1、安装django-ckeditor

pip install django-ckeditor

2、在在settings.py中注册app

INSTALLED_APPS = [
    ...
    'ckeditor',
    ...
]

3、修改模型

用django-ckeditor库自己的富文本字段RichTextField替换普通的文本字段TextField：

from ckeditor.fields import RichTextField
content = RichTextField(verbose_name='景点正文')

4、迁移数据

每次修改模型后要迁移数据

python manage.py makemigrations
python manage.py migrate

5、将模型注册到后台

from django.contrib import admin
from .models import Comment

admin.site.register(Comment)

@admin.register(TourismInfo)
class TourismInfoAdmin(admin.ModelAdmin):
    list_display = ['title', 'created','updated','reading',
                    'likes','comments','keywords',
                    'order','photo','type' ]

6、登录后台，进行验证

启动服务器，进入后台，发现已经可以使用django-ckeditor了：

功能相当齐全，字体、字号、颜色、链接、表情应有尽有。

点击图片按钮

7、配置富文本编辑器

如果只需要部分功能怎么办呢？比如插入flash动画基本就用不到。另外似乎也没看到插入代码块的功能。

ckeditor允许你在settings.py中进行自定义配置：

CKEDITOR_CONFIGS = {
    # django-ckeditor默认使用default配置
    'default': {
        # 编辑器宽度自适应
        'width':'auto',
        'height':'250px',
        # tab键转换空格数
        'tabSpaces': 4,
        # 工具栏风格
        'toolbar': 'Custom',
        # 工具栏按钮
        'toolbar_Custom': [
            # 表情 代码块
            ['Smiley', 'CodeSnippet'], 
            # 字体风格
            ['Bold', 'Italic', 'Underline', 'RemoveFormat', 'Blockquote'],
            # 字体颜色
            ['TextColor', 'BGColor'],
            # 链接
            ['Link', 'Unlink'],
            # 列表
            ['NumberedList', 'BulletedList'],
            # 最大化
            ['Maximize']
        ],
        # 加入代码块插件
        'extraPlugins': ','.join(['codesnippet']),
    }
}

在toolbar_Custom中定义需要使用的功能模块；没列出的功能就不再显示了。代码块功能是编辑器自带的插件，需要在extraPlugins中指定使用。效果如下：

如果感觉工具栏中的工具比较少，可配置如下：

# 配置CKeditor
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'],
        ),
    }
}

8、富文本在前台显示

编辑富文本搞定后，还需要在前台界面中展示出来。富文本是以类似html的格式进行保存的，因此还要在展示评论的代码加入|safe过滤器，防止浏览器进行转义。

<!-- 显示评论 -->
<h4>共有{{ comments.count }}条评论</h4>
<div>
    {% for comment in comments %}
        ...
        <!-- 修改这里 -->
        <div>{{ comment.body|safe }}</div>
    {% endfor %}
</div>