1. 项目概述今天要分享的是如何在Django项目中集成CKEditor5富文本编辑器并实现一个基础的博客发布功能。作为一名长期使用Django开发内容管理系统的开发者我深知富文本编辑器在内容创作中的重要性。CKEditor5作为新一代的编辑器相比老版本在用户体验和功能上都有显著提升。这个方案特别适合需要快速搭建内容发布系统的开发者。通过约30分钟的配置你就能获得一个完整的文章编辑和展示系统。我在三个实际项目中都采用了类似的方案效果非常稳定。2. 环境准备与安装2.1 基础环境配置首先确保你已经有一个可运行的Django项目。我推荐使用Python 3.8和Django 3.2版本组合这是目前最稳定的搭配。如果你还没有项目可以通过以下命令快速创建pip install django django-admin startproject myblog cd myblog python manage.py startapp blog2.2 CKEditor5安装CKEditor5提供了多种安装方式对于Django项目最方便的是通过npm安装npm install ckeditor/ckeditor5-build-classic如果你没有使用前端构建工具也可以直接下载预构建版本。我建议将CKEditor5的静态文件放在项目的static目录下myblog/ static/ ckeditor5/ build/ ckeditor.js translations/ ...3. Django配置3.1 模型设计我们需要创建一个简单的文章模型来存储富文本内容from django.db import models from django.contrib.auth.models import User class Article(models.Model): title models.CharField(max_length200) content models.TextField() author models.ForeignKey(User, on_deletemodels.CASCADE) created_at models.DateTimeField(auto_now_addTrue) updated_at models.DateTimeField(auto_nowTrue) def __str__(self): return self.title3.2 表单集成创建一个表单来集成CKEditor5from django import forms from .models import Article class ArticleForm(forms.ModelForm): class Meta: model Article fields [title, content] widgets { content: forms.Textarea(attrs{id: editor}) }4. 前端集成4.1 模板配置在base.html中添加CKEditor5的引用!DOCTYPE html html head titleMy Blog/title script src{% static ckeditor5/build/ckeditor.js %}/script /head body {% block content %}{% endblock %} script ClassicEditor .create(document.querySelector(#editor)) .catch(error { console.error(error); }); /script /body /html4.2 文章编辑页面创建文章编辑模板{% extends base.html %} {% load static %} {% block content %} form methodpost {% csrf_token %} {{ form.as_p }} button typesubmit保存/button /form {% endblock %}5. 视图与路由5.1 视图函数实现文章的创建和展示功能from django.shortcuts import render, redirect from .forms import ArticleForm from .models import Article def create_article(request): if request.method POST: form ArticleForm(request.POST) if form.is_valid(): article form.save(commitFalse) article.author request.user article.save() return redirect(article_detail, pkarticle.pk) else: form ArticleForm() return render(request, blog/article_form.html, {form: form}) def article_detail(request, pk): article Article.objects.get(pkpk) return render(request, blog/article_detail.html, {article: article})5.2 URL配置配置对应的URL路由from django.urls import path from . import views urlpatterns [ path(article/new/, views.create_article, namearticle_create), path(article/int:pk/, views.article_detail, namearticle_detail), ]6. 安全与优化6.1 内容安全CKEditor5默认会过滤掉一些潜在危险的HTML标签和属性。如果你需要更严格的控制可以配置allowedContent规则ClassicEditor .create(document.querySelector(#editor), { allowedContent: { $1: { elements: [p, h1, h2, h3, h4, h5, h6, ul, ol, li], attributes: [style, class] } } }) .catch(error { console.error(error); });6.2 图片上传要实现图片上传功能可以集成CKEditor5的上传适配器# 在settings.py中添加 CKEDITOR_UPLOAD_PATH uploads/ MEDIA_URL /media/ MEDIA_ROOT os.path.join(BASE_DIR, media)然后在前端配置上传适配器ClassicEditor .create(document.querySelector(#editor), { ckfinder: { uploadUrl: /ckeditor/upload/ } }) .catch(error { console.error(error); });7. 常见问题解决7.1 编辑器不显示如果编辑器没有正确显示检查以下几点确保CKEditor5的JS文件路径正确检查textarea的id是否与初始化代码中的选择器匹配查看浏览器控制台是否有错误信息7.2 内容保存格式问题Django默认会对表单内容进行转义。如果你发现保存的内容有格式问题可以在模板中使用safe过滤器{{ article.content|safe }}7.3 性能优化对于内容较多的页面可以考虑以下优化使用django-ckeditor的缓存功能对静态文件启用Gzip压缩使用CDN加载CKEditor5资源8. 进阶功能8.1 自定义插件CKEditor5支持自定义插件开发。例如添加一个简单的字数统计插件function WordCount(editor) { editor.plugins.get(WordCount).on(update, (evt, stats) { console.log(字数: ${stats.words}); }); } ClassicEditor .create(document.querySelector(#editor), { plugins: [WordCount], toolbar: [wordCount] }) .catch(error { console.error(error); });8.2 多语言支持CKEditor5内置了多语言支持。要启用中文界面ClassicEditor .create(document.querySelector(#editor), { language: zh-cn }) .catch(error { console.error(error); });记得在settings.py中设置Django的多语言支持LANGUAGE_CODE zh-hans TIME_ZONE Asia/Shanghai USE_I18N True USE_L10N True USE_TZ True9. 部署注意事项9.1 静态文件收集部署时记得运行collectstatic命令python manage.py collectstatic9.2 生产环境配置在生产环境中建议使用WhiteNoise管理静态文件配置适当的缓存头启用HTTPS确保编辑器内容传输安全# settings.py STATICFILES_STORAGE whitenoise.storage.CompressedManifestStaticFilesStorage10. 项目扩展思路这个基础框架可以进一步扩展为多用户博客平台内容管理系统(CMS)知识库系统在线文档协作系统我在实际项目中曾基于类似架构开发过一个企业内部分享平台加入了版本控制、协同编辑和评论功能。关键是在基础功能稳定后再逐步添加复杂功能。 Django集成CKEditor5实现富文本博客发布
1. 项目概述今天要分享的是如何在Django项目中集成CKEditor5富文本编辑器并实现一个基础的博客发布功能。作为一名长期使用Django开发内容管理系统的开发者我深知富文本编辑器在内容创作中的重要性。CKEditor5作为新一代的编辑器相比老版本在用户体验和功能上都有显著提升。这个方案特别适合需要快速搭建内容发布系统的开发者。通过约30分钟的配置你就能获得一个完整的文章编辑和展示系统。我在三个实际项目中都采用了类似的方案效果非常稳定。2. 环境准备与安装2.1 基础环境配置首先确保你已经有一个可运行的Django项目。我推荐使用Python 3.8和Django 3.2版本组合这是目前最稳定的搭配。如果你还没有项目可以通过以下命令快速创建pip install django django-admin startproject myblog cd myblog python manage.py startapp blog2.2 CKEditor5安装CKEditor5提供了多种安装方式对于Django项目最方便的是通过npm安装npm install ckeditor/ckeditor5-build-classic如果你没有使用前端构建工具也可以直接下载预构建版本。我建议将CKEditor5的静态文件放在项目的static目录下myblog/ static/ ckeditor5/ build/ ckeditor.js translations/ ...3. Django配置3.1 模型设计我们需要创建一个简单的文章模型来存储富文本内容from django.db import models from django.contrib.auth.models import User class Article(models.Model): title models.CharField(max_length200) content models.TextField() author models.ForeignKey(User, on_deletemodels.CASCADE) created_at models.DateTimeField(auto_now_addTrue) updated_at models.DateTimeField(auto_nowTrue) def __str__(self): return self.title3.2 表单集成创建一个表单来集成CKEditor5from django import forms from .models import Article class ArticleForm(forms.ModelForm): class Meta: model Article fields [title, content] widgets { content: forms.Textarea(attrs{id: editor}) }4. 前端集成4.1 模板配置在base.html中添加CKEditor5的引用!DOCTYPE html html head titleMy Blog/title script src{% static ckeditor5/build/ckeditor.js %}/script /head body {% block content %}{% endblock %} script ClassicEditor .create(document.querySelector(#editor)) .catch(error { console.error(error); }); /script /body /html4.2 文章编辑页面创建文章编辑模板{% extends base.html %} {% load static %} {% block content %} form methodpost {% csrf_token %} {{ form.as_p }} button typesubmit保存/button /form {% endblock %}5. 视图与路由5.1 视图函数实现文章的创建和展示功能from django.shortcuts import render, redirect from .forms import ArticleForm from .models import Article def create_article(request): if request.method POST: form ArticleForm(request.POST) if form.is_valid(): article form.save(commitFalse) article.author request.user article.save() return redirect(article_detail, pkarticle.pk) else: form ArticleForm() return render(request, blog/article_form.html, {form: form}) def article_detail(request, pk): article Article.objects.get(pkpk) return render(request, blog/article_detail.html, {article: article})5.2 URL配置配置对应的URL路由from django.urls import path from . import views urlpatterns [ path(article/new/, views.create_article, namearticle_create), path(article/int:pk/, views.article_detail, namearticle_detail), ]6. 安全与优化6.1 内容安全CKEditor5默认会过滤掉一些潜在危险的HTML标签和属性。如果你需要更严格的控制可以配置allowedContent规则ClassicEditor .create(document.querySelector(#editor), { allowedContent: { $1: { elements: [p, h1, h2, h3, h4, h5, h6, ul, ol, li], attributes: [style, class] } } }) .catch(error { console.error(error); });6.2 图片上传要实现图片上传功能可以集成CKEditor5的上传适配器# 在settings.py中添加 CKEDITOR_UPLOAD_PATH uploads/ MEDIA_URL /media/ MEDIA_ROOT os.path.join(BASE_DIR, media)然后在前端配置上传适配器ClassicEditor .create(document.querySelector(#editor), { ckfinder: { uploadUrl: /ckeditor/upload/ } }) .catch(error { console.error(error); });7. 常见问题解决7.1 编辑器不显示如果编辑器没有正确显示检查以下几点确保CKEditor5的JS文件路径正确检查textarea的id是否与初始化代码中的选择器匹配查看浏览器控制台是否有错误信息7.2 内容保存格式问题Django默认会对表单内容进行转义。如果你发现保存的内容有格式问题可以在模板中使用safe过滤器{{ article.content|safe }}7.3 性能优化对于内容较多的页面可以考虑以下优化使用django-ckeditor的缓存功能对静态文件启用Gzip压缩使用CDN加载CKEditor5资源8. 进阶功能8.1 自定义插件CKEditor5支持自定义插件开发。例如添加一个简单的字数统计插件function WordCount(editor) { editor.plugins.get(WordCount).on(update, (evt, stats) { console.log(字数: ${stats.words}); }); } ClassicEditor .create(document.querySelector(#editor), { plugins: [WordCount], toolbar: [wordCount] }) .catch(error { console.error(error); });8.2 多语言支持CKEditor5内置了多语言支持。要启用中文界面ClassicEditor .create(document.querySelector(#editor), { language: zh-cn }) .catch(error { console.error(error); });记得在settings.py中设置Django的多语言支持LANGUAGE_CODE zh-hans TIME_ZONE Asia/Shanghai USE_I18N True USE_L10N True USE_TZ True9. 部署注意事项9.1 静态文件收集部署时记得运行collectstatic命令python manage.py collectstatic9.2 生产环境配置在生产环境中建议使用WhiteNoise管理静态文件配置适当的缓存头启用HTTPS确保编辑器内容传输安全# settings.py STATICFILES_STORAGE whitenoise.storage.CompressedManifestStaticFilesStorage10. 项目扩展思路这个基础框架可以进一步扩展为多用户博客平台内容管理系统(CMS)知识库系统在线文档协作系统我在实际项目中曾基于类似架构开发过一个企业内部分享平台加入了版本控制、协同编辑和评论功能。关键是在基础功能稳定后再逐步添加复杂功能。