django-ckeditor富文本编辑器安装教程

django-ckeditor富文本编辑器是django开发比较常用的富文本编辑器，不像百度编辑器和其他类型编辑一样，django-ckeditor和Django的兼容性相对更好一些(个人感觉)。下面就来演示一下django-ckeditor富文本编辑器安装的完整流程。

1.首先安装模块，pillow是处理图片的模块

pip install django-ckeditor
pip install pillow

2.配置settings.py，注册应用

在settings.py文件中，将ckeditor、ckeditor_uploader添加到INATALLED_APPS中

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'apps',
    'ckeditor',
    'ckeditor_uploader',
]

在settings.py文件中，添加CKEDITOR_UPLOAD_PATH配置项 : CKEDITOR_UPLOAD_PATH = ""  配置文件存储路径

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')  # 配置文章中流媒体上传路径

CKEDITOR_UPLOAD_PATH = ""
CKEDITOR_IMAGE_BACKEND = "pillow"

3.配置编辑器功能显示

ckeditor编辑器有自己默认的功能，但是部分富，这里我们最好能配置一下，原有的功能如下

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',  # 工具条功能
        'height': 600,  # 编辑器高度
        'width': "auto",  # 编辑器宽
    },

在settings.py最下面配置我们自己想要的功能

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'],
            ['Blockquote', 'CodeSnippet'],
        ),
        'width': 'auto',
        # 添加按钮在这里
        'toolbar_Custom': [
            ['NumberedList', 'BulletedList'],
            ['Blockquote', 'CodeSnippet'],
        ],
        # 插件
        # 'extraPlugins': ','.join(['codesnippet', 'widget', 'lineutils', ]),
    },
}

4.配置项目总路由

from django.contrib import admin
from django.urls import path,re_path,include # 导入include来路由分发
from django.views.static import serve # 导入媒体文件资源
from project_name import settings # 导入项目的配置文件，这里用project_name代替项目名称

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include("app_name.urls")),
    re_path(r'^ckeditor/',include('ckeditor_uploader.urls')), # ckeditor上传路由分发
    re_path(r'files/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}) # 图片文件路径，这里要注意，之前已经在setting.py文件处设置了媒体文件路径的别名是：MEDIA_URL = "/files/" ，所以这里的路由要保持一致
]

5.模型中把文章内容字段类型TextField字段改成富文本的字段类型

# from ckeditor.fields import RichTextField # 不带图片上传功能的字段
from ckeditor_uploader.fields import RichTextUploadingField # 带有图片上传功能的字段

# 一定要保证正文部分是RichTextUploadingField，RichTextField类型不能上传图片
    content = RichTextUploadingField(default="",verbose_name="正文内容")

6.前端把你调用的文章字段加进来，注意这里不能放在<p>标签内，其次要用safe转义

{{ art.content|safe }}

这时候完整的富文本编辑器就实现了我们想要的功能了，但是这里前端显示的效果和我们预想的可能有很大区别，主要是样式主题没有写好，一般来说简单的样式我们可以通过CSS文件来实现，但是如果用到代码块显示的时候就很难使用CSS来实现了，所以我们可以通过一些插件来实现。

7.主题设置

给大家一个网站：

https://prismjs.com/download.html

进入网站之后按照下面的图示来选择自己喜欢的主题风格。