Django-Admin -- 集成富文本编辑器

1. CKEditor

1.1 功能介绍

用来替换普通的文本字段TextField,已达到在线编辑 markdown 效果

1.2 嵌入富文本

1. 模块下载

# 安装ckeditor
pip install django-ckeditor -i https://pypi.tuna.tsinghua.edu.cn/simple
    
# 安装js_asset
pip install django-js-asset -i https://pypi.tuna.tsinghua.edu.cn/simple

2. 配置

1. 注册 APP

settings.py

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

2. 配置

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', # 工具条功能模式 full Custom
        'height': 291, # 编辑器⾼度
        'width': 835, # 编辑器宽
        'filebrowserWindowWidth': 940,
        'filebrowserWindowHeight': 725,
        # 添加的插件
        'extraPlugins': 'codesnippet',
    }
}

3. 模型创建

models.py

from django.db import models
from ckeditor.fields import RichTextField
class MyModel(models.Model):
    # 将字段替换为RichTextField,且如果配置 文件中的 CKEDITOR_CONFIGS 中的键为default时,无需指定,其他需要指定 config_name
    content = RichTextField(config_name='my_config')  

4. Admin管理界面

admin.py

from django.contrib import admin
from .models import CKEditorModel

@admin.register(CKEditorModel)
class MyModelAdmin(admin.ModelAdmin):
    list_display = ["content"]

6. 效果展示

1. Admin 富文本编辑框效果

仅 toolbar=full 模式效果展示:

自定义my_config 效果展示

2. 保存到数据库的真实数据效果

1.3 前端页面代码段高亮

在后台管理页面中，编辑器中的代码块已经有高亮效果了，然而在普通页面中显示却没有效果, 在普通页面中，需要手动添加 highlight.js 才可以有代码高亮的效果

1. 官方文档

https://highlightjs.org/#usage

2. 下载地址

https://highlightjs.org/download

3. 示例代码

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

<!-- 
- 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() 进行调用
-->

1.4 图片上传

1. 安装Pillow

pip install pillow -i https://pypi.tuna.tsinghua.edu.cn/simple

2. 注册 APP

# django-ckeditor将上传文件的功能迁移到ckeditor_uploader应用中，所以需要注册该应用。

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

3. 配置

settings.py

# 配置富文本编辑器图片的上传路径
CKEDITOR_UPLOAD_PATH = "uploads/"

4. 路由

配置上传url和media的访问

#上传功能需要有地址可以请求，需要需要提供上传的url。
url(r'^ckeditor/', include('ckeditor_uploader.urls')),

# 上传的图片是到media中，不是在static中。我们还需要设置media可被访问，如下设置可用于开发中使用，若部署到服务器可用服务器软件设置：
from django.conf import settings
from django.conf.urls.static import static
 
 
urlpatterns += static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

5. 修改 Model

from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField
 
 
class Blog(models.Model):
    title = models.CharField(max_length=50)
    
	# RichTextField不可用于上传文件，需要修改model改为 RichTextUploadingField,并config_name
    content = RichTextUploadingField(config_name='my_config')