安装
$ pip install django-ckeditor注册
# setting.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # 将 django-ckeditor 注册到该列表中 'ckeditor', ]创建模型
from django.db import models from ckeditor.fields import RichTextField class Article(models.Model): title = models.CharField(verbose_name='标题', max_length=255, null=True) body = RichTextField() class Meta: db_table = 'blog_article' app_label = 'article' verbose_name = '文章' verbose_name_plural = verbose_name def __str__(self): return self.title生成迁移文件
$ python manage.py makemigrations $ python manage.py migrate- 进入后台添加文章，你就会看到富文本编辑器了
添加更多配置
# setting.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', } }在模型文件添加以下内容
from django.db import models from ckeditor.fields import RichTextField class Article(models.Model): title = models.CharField(verbose_name='标题', max_length=255, null=True) # 添加参数 config_name 指定使用的配置 body = RichTextField(config_name='my_config') class Meta: db_table = 'blog_article' app_label = 'article' verbose_name = '文章' verbose_name_plural = verbose_name def __str__(self): return self.title代码高亮
<link rel="stylesheet" href="/static/css/googlecode.css"> <script src="/static/js/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script>
添加图片
默认是不能上传图片的，这里教大家怎么上传图片
下载
$ pip install pillow注册
# setting.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'ckeditor', # 添加以下字段 'ckeditor_uploader', ]
图片自适应
使用ckeditor中发现,上传图片时，总会自动给img标签添加width和height的style内联样式
在ckeditor中的config.js文件中，找到editorConfig并设置disallowedContent属性
CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; # 添加 config.disallowedContent='img{width,height};img[width,height]'; };引入css样式
p img{ width: auto; height: auto; max-width: 100%; display: block; }
修改代码的样式
代码高亮需要添加额外的插件Prism。在Prism插件官方页面下载（也可以点击这里直接下载）后，将解压出来的
prism放到env\Lib\site-packages\ckeditor\static\ckeditor\ckeditor\plugins目录下。注意env是你创建的虚拟环境的目录。之前你安装的所有库都在这个env目录中的。
https://www.jianshu.com/p/a14970431762
然后在Prism官网选择主题：
- 根据喜好选择一个喜欢的主题
- 然后选择需要高亮的语言。不清楚就可以全选
- 勾选行号插件
- 最后点击
DOWNLOAD CSS下载样式
在static目录中新建prism目录，将下载好的CSS文件放进去。
注意这里的static是项目中的静态文件目录（与前面的章节相同），而不是env文件夹中的static目录。
然后在需要代码高亮的模板文件中引用prism的静态文件，对代码进行渲染：
templates/article/detail.html
...
<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'prism/prism.css' %}">
...将Prism、widget、lineutils插件添加到配置文件中。后面两个编辑器自带，不用单独下载，添上就可以了：
my_blog/settings.py
...
CKEDITOR_CONFIGS = {
'default': {
...
# 添加 Prism 相关插件
'extraPlugins': ','.join(['codesnippet', 'prism', 'widget', 'lineutils']),
}
}页面展示HTML
{% autoescape off %}
{{content.body}}
{% endautoescape %}