django-ckeditor富文本编辑器
- 安装：
pip install django-ckeditor
- 简介：
富文本编辑器提供了类似 Microsoft Word 的编辑功能，即使不会编写 html 代码的用户也可以设置各种文本格式
- 基本配置使用：
- 注册：
# settings.py ... # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'blog', # 将 django-ckeditor 注册到该列表中 'ckeditor', ]
- 创建模型：
# 在 models.py 中导入 RichTextField 类 # blog/models.py from django.db import models from ckeditor.fields import RichTextField # 博客模型 class Blog(models.Model): title = models.CharField(max_length=254, unique=True) # 博客的内容为 RichTextField 对象 body = RichTextField() def __str__(self): return self.title
- 数据库迁移：
# 模型代码完成之后进行数据库迁移 $ python manage.py makemigrations $ python manage.py migrate
- 注册该模型使其在后台显示：
# blog/admin.py from django.contrib import admin from .models import Blog #注册该模型 @admin.register(Blog) class BlogAdmin(admin.ModelAdmin): # 列表页面显示字段 list_display = ['title', 'body']
- 修改Django为中文支持：
# settings.py ... # 默认语言为中文 LANGUAGE_CODE = 'zh-hans' # 时区改为上海时间 TIME_ZONE = 'Asia/Shanghai' ...
- 扩展编辑器的工具：
- 代码插入：
作为一名程序员，在写博客的时候免不了要插入一些代码片段，
所以就需要插入的代码在前端根据不同的编程语言显示出不同的格式。
这个功能插件默认是不再工具栏显示的，但是是已经存在的，
存放在 ...\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins\ 目录中，名称是 codesinppet
- 配置文件：
# 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', 'height': 291, 'width': 835, 'filebrowserWindowWidth': 940, 'filebrowserWindowHeight': 725, # 添加的插件 'extraPlugins': 'codesnippet', } } ...
- model配置：
# blog/models.py ... class Blog(models.Model): title = models.CharField(max_length=254, unique=True) # 添加参数 config_name 指定使用的配置 body = RichTextField(config_name='my_config') def __str__(self): return self.title
- 重启服务：
修改配置以及model后必须重启服务器才会生效
- 前端页面代码高亮：
- 在后台管理页面中，编辑器中的代码块已经有高亮效果了，然而在普通页面中显示却没有效果；
- 在普通页面中，需要手动添加 highlight.js 才可以有代码高亮的效果；
- 示例：
... <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() 进行调用 """
- 图片上传：
- 一般最好直接使用 img src 即可
- 安装pillow库：
# pillow库是图片处理库，上传图片需要该库。执行pip命令安装： pip install pillow
- 注册ckeditor_uploader应用：
#django-ckeditor将上传文件的功能迁移到ckeditor_uploader应用中，所以需要注册该应用。 INSTALLED_APPS = [ # ... 'ckeditor', 'ckeditor_uploader', ]
- 配置settings：
# 使用上传功能，需要设置上传位置。该文件是上传到media目录，所以也需要设置media。 MEDIA_URL = '/media/' # 放在django项目根目录，同时也需要创建media文件夹 MEDIA_ROOT = os.path.join(BASE_DIR, 'media') CKEDITOR_UPLOAD_PATH = 'upload/'
- 配置上传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)
- 修改model：
# RichTextField不可用于上传文件，需要修改model改为 RichTextUploadingField from django.db import models from ckeditor_uploader.fields import RichTextUploadingField class Blog(models.Model): title = models.CharField(max_length=50) content = RichTextUploadingField()
文章借鉴：http://yshblog.com/blog/193
文章借鉴：https://www.jianshu.com/p/65d2a748634b
