2019独角兽企业重金招聘Python工程师标准>>> 
富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器，这是百度百科的对富文本编辑器的解释。我们可以借助富文本编辑器，编辑出来一个包含html的页面，从而页面的显示效果，可以由网站管理员定义，而不用完全依赖于开发的人员。我之前使用的是一个叫tinymce的富文本编辑，它比较精简，功能不是很丰富。在使用了一段tinymce后，就转用了django-ckeditor，后来发现是真的好用，当然还有一个叫做Ueditor的编辑器，听说也还不错，但我这里就用ckeditor来布置了。
在这里，我会将步骤大致记录下来，但还是要推荐给大家一篇非常棒的关于ckeditor配置的文章，也是我之前参考学习的。Django博客开发：添加富文本编辑器ckeditor，网上大部分教程与此类似，但个人感觉都没有这篇写的详细，写的易懂。
安装环境
1.使用pip安装 django-ckeditor 和 pillow，pillow用于生成缩略图，用来在编辑器里浏览上传的图片
pip install django-ckeditor
pip install pillow2.在 project/settings.py 里进行如下设置：
INSTALLED_APPS = ['ckeditor','ckeditor_uploader',
]MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
CKEDITOR_UPLOAD_PATH = 'upload/'
CKEDITOR_IMAGE_BACKEND = 'pillow'3.在project/urls.py里，加入 ckeditor_uploader.url
from django.conf.urls import url,include
from django.conf.urls.static import static
from django.conf import settings
from django.contrib import adminurlpatterns = [url(r'', include('ckeditor_uploader.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) #没有这一句无法显示上传的图片4.在blog/models.py的Post类，让正文字段使用 RichTextUploadingField()
from ckeditor_uploader.fields import RichTextUploadingFieldclass Post(models.Model):content = RichTextUploadingField(verbose_name='正文')5.迁移数据库，做完这一步就可以在后台编辑文章时发现编辑器已经添加成功了
pyhton manage.py makemigrations
python manage.py migrate自定义编辑器
如果想要自定义编辑器，添加或删除一些按钮的话，需要在settings.py里设置 CKEDITOR_CONFIGS
CKEDITOR_CONFIGS = {# 配置名是default时，django-ckeditor默认使用这个配置'default': {# 使用简体中文'language':'zh-cn',# 编辑器的宽高请根据你的页面自行设置'width':'auto','height':'150px','image_previewText':' ','tabSpaces': 4,'toolbar': 'Custom',# 添加按钮在这里'toolbar_Custom': [['Bold', 'Italic', 'Underline', 'Format', 'RemoveFormat'],['NumberedList', 'BulletedList'],['Blockquote', 'CodeSnippet'],['Image', 'Link', 'Unlink'],['Maximize']],# 插件'extraPlugins': ','.join(['codesnippet','uploadimage','widget','lineutils',]),}
}当配置名称是 'default'，django-ckeditor会默认使用这个配置，CKEDITOR_CONFIGS里可以添加多个配置，比如
CKEDITOR_CONFIGS = {# 配置名是default时，django-ckeditor默认使用这个配置'default': {} # 名为custom的配置 'custom': {}
}当需要使用非默认配置时，需要在 RichTextUploadingField() 里指定该配置名称
class Post(models.Model):content = RichTextUploadingField(config_name='custom')添加代码功能
为什么从tinymce编辑器传到ckeditor很大原因就是为平时都会用编辑器写一些代码，所以编辑器自然需要添加代码块的功能，tinymce似乎没有这个功能，至少我目前没有找到。而ckeditor只需要用到插件codesnippet，并且ckeditor的插件放在了ckeditor/static/ckeditor/ckeditor/plugins/路径下。以codesnippet为例，在下面代码的第16行和21行分别添加了 'CodeSnippet' 和 'codesnippet'
CKEDITOR_CONFIGS = {# 配置名是default时，django-ckeditor默认使用这个配置'default': {# 使用简体中文'language':'zh-cn',# 编辑器的宽高请根据你的页面自行设置'width':'730px','height':'150px','image_previewText':' ','tabSpaces': 4,'toolbar': 'Custom',# 添加按钮在这里'toolbar_Custom': [['Bold', 'Italic', 'Underline', 'Format', 'RemoveFormat'],['NumberedList', 'BulletedList'],['Blockquote', 'CodeSnippet'],['Image', 'Link', 'Unlink'],['Maximize']],# 插件'extraPlugins': ','.join(['codesnippet','uploadimage','widget','lineutils',]),}
}代码高亮、代码行数
从ckeditor官网下载 插件prism（点这里直接下载），然后将其解压到ckeditor/static/ckeditor/ckeditor/plugins路径下，同样的还需要在CKEDITOR_CONFIGS里将extraPlugins对应的value里加入插件 'prism' 和另外两个插件"lineutils"、"widget" ，这两个插件无须下载，在django-ckeditor中已经有了
'extraPlugins': ','.join(['codesnippet','uploadimage','prism','widget','lineutils',]),
去prismjs官网下载css文件http://prismjs.com/download.html，选择喜欢的主题，勾选支持的语言，以及选择line-numbers功能，下载后把解压到static/blog/css下
然后在模板中引用静态文件
<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'blog/css/prism.css' %}">在admin以外的地方使用django-ckeditor
如果在admin以外的地方使用django-ckeditor，比如添加评论功能
在渲染表单的那个页面需要引入 ckeditor-init.js 和 ckeditor.js 两个文件，否则编辑器无法显示
{% load static %}
<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>编辑框响应式
1. 需要CKEDITOR_CONFIGS里设置 'width': 'auto'
2.
<script>$(".django-ckeditor-widget").removeAttr('style');
</script>
