在Django中安装、配置、使用CKEditor5,并将CKEditor5录入的文章展现出来,实现一个简单博客网站的功能

在Django中可以使用CKEditor4和CKEditor5两个版本,分别对应软件包django-ckeditor和django-ckeditor-5。原来使用的是CKEditor4,python manager.py makemigrations时总是提示CKEditor4有安全风险,建议升级到CKEditor5。故卸载了CKEditor4,安装配置CKEditor5,具体步骤如下:

1. 安装CKEditor5(Debian系统):

sudo pip3 install django-ckeditor-5

2. 将“django_ckeditor_5”添加到settings.py的INSTALLED_APPS中:

INSTALLED_APPS = [
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django_ckeditor_5',
    ......
]

3. 在settings.py中配置CKEditor5(官网标准设置):

  STATIC_URL = '/static/'
  MEDIA_URL = '/media/'
  MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

  customColorPalette = [
        {
            'color': 'hsl(4, 90%, 58%)',
            'label': 'Red'
        },
        {
            'color': 'hsl(340, 82%, 52%)',
            'label': 'Pink'
        },
        {
            'color': 'hsl(291, 64%, 42%)',
            'label': 'Purple'
        },
        {
            'color': 'hsl(262, 52%, 47%)',
            'label': 'Deep Purple'
        },
        {
            'color': 'hsl(231, 48%, 48%)',
            'label': 'Indigo'
        },
        {
            'color': 'hsl(207, 90%, 54%)',
            'label': 'Blue'
        },
    ]

  CKEDITOR_5_CUSTOM_CSS = 'path_to.css' # optional
  CKEDITOR_5_FILE_STORAGE = "path_to_storage.CustomStorage" # optional
  CKEDITOR_5_CONFIGS = {
    'default': {
        'toolbar': ['heading', '|', 'bold', 'italic', 'link',
                    'bulletedList', 'numberedList', 'blockQuote', 'imageUpload', ],

    },
    'extends': {
        'blockToolbar': [
            'paragraph', 'heading1', 'heading2', 'heading3',
            '|',
            'bulletedList', 'numberedList',
            '|',
            'blockQuote',
        ],
        'toolbar': ['heading', '|', 'outdent', 'indent', '|', 'bold', 'italic', 'link', 'underline', 'strikethrough',
        'code','subscript', 'superscript', 'highlight', '|', 'codeBlock', 'sourceEditing', 'insertImage',
                    'bulletedList', 'numberedList', 'todoList', '|',  'blockQuote', 'imageUpload', '|',
                    'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'mediaEmbed', 'removeFormat',
                    'insertTable',],
        'image': {
            'toolbar': ['imageTextAlternative', '|', 'imageStyle:alignLeft',
                        'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:side',  '|'],
            'styles': [
                'full',
                'side',
                'alignLeft',
                'alignRight',
                'alignCenter',
            ]

        },
        'table': {
            'contentToolbar': [ 'tableColumn', 'tableRow', 'mergeTableCells',
            'tableProperties', 'tableCellProperties' ],
            'tableProperties': {
                'borderColors': customColorPalette,
                'backgroundColors': customColorPalette
            },
            'tableCellProperties': {
                'borderColors': customColorPalette,
                'backgroundColors': customColorPalette
            }
        },
        'heading' : {
            'options': [
                { 'model': 'paragraph', 'title': 'Paragraph', 'class': 'ck-heading_paragraph' },
                { 'model': 'heading1', 'view': 'h1', 'title': 'Heading 1', 'class': 'ck-heading_heading1' },
                { 'model': 'heading2', 'view': 'h2', 'title': 'Heading 2', 'class': 'ck-heading_heading2' },
                { 'model': 'he
要搭建一个基于Hexo和DjangoPython学习博客进行部署,你需要经历以下几个关键步骤: 参考资源链接:[Hexo与Django集成,Python博客搭建指南](https://wenku.csdn.net/doc/2ikyxxre6v) 第一步,搭建Hexo博客环境。确保你的开发机器上安装了Node.js,然后通过npm安装Hexo。通过`hexo init`命令初始化一个新的Hexo博客,然后使用`hexo server`来在本地预览博客效果。 第二步,集成Django框架。你需要在你的Python环境中安装Django创建一个新的Django项目。创建必要的应用,例如用户认证系统和博客文章管理,同时确保配置Django的静态文件和媒体文件的路径,以便与Hexo集成。 第三步,设置数据库。在Django项目的settings.py中配置数据库连接,确保数据库能够正常工作。然后运行`python manage.py makemigrations`和`python manage.py migrate`来应用迁移,创建数据库表。 第四步,前后端交互。你需要在Django中设置视图和URL路由来处理来自Hexo静态网站的用户请求,比如文章评论。利用Django的MTV模式,编写对应的模板和视图函数来渲染页面和处理表单提交。 第五步,将Hexo与Django后端连接。在Hexo博客配置用于生成静态内容的`_config.yml`文件,设置正确的部署命令,以便Hexo可以正确地与Django后端通信。 第六步,配置Web服务器。例如使用Nginx来托管静态文件(Hexo生成的),代理请求到Django后端。确保在Nginx配置中设置了正确的静态文件路径和代理转发规则。 第七步,测试和部署。在本地环境中测试网站的所有功能,确保用户可以浏览静态页面和进行动态交互。一旦本地测试完成,可以使用GitHub Pages、Vercel或者自有的服务器来部署你的博客网站。 通过这个过程,你不仅能够学会如何将Hexo和Django集成来构建一个专业的博客平台,还能掌握前后端整合、网站部署等关键开发技能。为了更好地掌握整个开发流程,建议阅读《Hexo与Django集成,Python博客搭建指南》,这本书将为你提供详细步骤和实用技巧,帮助你从零开始搭建部署一个功能完整的博客系统。 参考资源链接:[Hexo与Django集成,Python博客搭建指南](https://wenku.csdn.net/doc/2ikyxxre6v)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值