Django admin使用富文本编辑器ckeditor

安装django-ckeditor

ckeditor是基于javascript编写的，其功能是在前端生成html代码片段，所以在被集成django的管理系统前，必须经过django的封装。幸运的是，这一工作已经有人完成了，我们可以直接拿来使用。

django-ckeditor的下载地址：https://github.com/shaunsephton/django-ckeditor 我用的的django版本是1.6，所以下载的是最新版的django-ckeditor。

安装可以把文件下载下来进入文件夹运行：

python setup.py install 或者更直接的方法是用pip在线安装：

pip install django-ckeditor

安装Pillow

Pillow是python的一个图像处理库，据说django-ckeditor需要依赖该库。最简单的安装方法，当然是使用pip，可以直接运行以下命令安装： pip install Pillow

配置django-ckeditor

在你的settings.py文件中，将ckeditor添加到INATALLED_APPS中。

INSTALLED_APPS = [
    #'bootstrap_admin',  #一定要放在`django.contrib.admin`前面
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'article',  #这里填写的是app的名称
    'DjangoUeditor',
    'django_markdown',
    'ckeditor',
    'pygments',
    'markdown_deux'
]

在你的settings.py文件中，添加CKEDITOR_UPLOAD_PATH配置项。例如，我的是：

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
CKEDITOR_UPLOAD_PATH = "article_images"

CHEDITOR_UPLOAD_PATH的作用是设定你通过ckeditor所上传的文件的存放目录。需要注意的是，这是一个相对路径，它相对与你设置的的MEDIA_ROOT。django-ckeditor默认使用django的后台文件存储系统，这需要你设置好MEDIA_ROOT和MEDIA_URL，如何设置超出了本文的范围，请自行查看django的官方文档，请务必确保这两个设置项是生效的，否则你将看不到你上传的文件。

比如，我上传一张名为shiguang.gif的小图片，该图片将会被存储到：

/my/django/app/root/media/article_images/

在你django应用的的urls.py文件中，为ckeditor设置url：

(r'^ckeditor/', include('ckeditor.urls')),

注意上面的这个是旧版的ckeditor设置了，

新版的5.0应该是这样的：

url(r'^ckeditor/', include('ckeditor_uploader.urls')),

至此，你的ckeditor已经可以在django中正常使用了。

需要指出的是：在开发阶段，这样设置settings.py已经足够了。但是，到了正式部署你的应用时，你需要设置好STATIC_ROOT和STATIC_URL，并运行manage.py collectstatic命令，该命令会将ckeditor相关的静态资源拷贝到你的工程下。

如何应用ckeditor

django-ckeditor提供了两个类：RichTextField和CKEditorWidget，分别用于模型和表单。内容型网站通常在后台会有一个文章发布和编辑的界面，如果你想让该界面拥有一个富文本编辑器，只需按如下方式定义你的django模型(models.py)：

from django.db import models
from ckeditor.fields import RichTextField

class Article(models.Model):
    content = RichTextField('正文')

如果你在你的后台看到编辑界面那就基本成功了

通过查看源代码，可以发现RichTextField有config_name、extra_plugins、external_plugin_resources三个额外的可选参数

默认地只有一部分按钮，显然这是不能满足我的需求的

进一步完善

追求完美的你，此刻一定有诸多不满。ckeditor最重要的，当然是头部的工具栏了，但现在你看到的工具栏比较简陋。比如，你想调整文本的对其方式，你发现找不到对应的按钮。别急，往下看。

django-ckeditor作者的文档中，提到了一个配置项：CKEDITOR_CONFIGS。从作者的文档看来，似乎只要在settings.py中按如下方式配置，就可以拥有一个完整的、丰富工具栏：

经过一番搜索，发现相关的功能按钮在setting.py中可以配置，但是遗憾的是找了很多发现唯独代码编辑插件code snippets怎么也不显示，最后在作者github相关的issues下发现有个配置是正确的，结合下我需要的按钮最后配置是这样的：

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': (
			['div','Source','-','Save','NewPage','Preview','-','Templates'],
			['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],
			['Undo','Redo','-','Find','Replace','-','RemoveFormat'],
			['Form','Checkbox','Radio','TextField','Textarea','Select','Button', 'ImageButton','HiddenField'],
			['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
            ['CodeSnippet'],  # add the codesnippet button name]
			['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
			['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
			['Link','Unlink','Anchor'],
			['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
			['Styles','Format','Font','FontSize'],
			['TextColor','BGColor'],
			['Maximize','ShowBlocks','-','About', 'pbckcode'],
		),
        'extraPlugins': ','.join(
            [
                # add the follow plugins
                'codesnippet',
                'widget',
                'dialog',
            ]),
	}
}

重启后完美显示

后来经测试，其中editor的图片按钮没有上传功能需要以下设置开启：

文件上传

在settings.py中的INSTALLED_APPS中添加ckeditor_uploader


INSTALLED_APPS = [
    #'bootstrap_admin',  #一定要放在`django.contrib.admin`前面
    #此处省略其他
    'ckeditor',
    'ckeditor_uploader',
]

CKEditor使用Django的存储API，默认使用Django的文件存储,会用到MEDIA_ROOT和MEDIA_URL，需要在settings.py中定义，此外还可以指定CKEDITOR_UPLOAD_PATH，它位于MEDIA_ROOT下:

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
CKEDITOR_UPLOAD_PATH = "article_images/"
#CKEDITOR_IMAGE_BACKEND = 'PIL'
CKEDITOR_IMAGE_BACKEND = 'pillow'

在项目的urls.py中添加CKEditor的URL映射

url(r'^ckeditor/', include('ckeditor_uploader.urls')),

如果不加，可能会出现错误:

4.（可选项）在settings.py中加入CKEDITOR_IMAGE_BACKEND ,使能thumbnails，例如: CKEDITOR_IMAGE_BACKEND = 'pillow'

model.py 里面的content应该修改为：

# Create your models here.
class Article(models.Model) :
    title = models.CharField(max_length = 100)  #博客题目
    category = models.CharField(max_length = 50, blank = True)  #博客标签
    intro = models.TextField(max_length=500,null = True,blank=True)
    date_time = models.DateTimeField(auto_now_add = True)  #博客日期
    #content = models.TextField(blank = True, null = True)  #博客文章正文
    #content = RichTextField('正文')
    content = RichTextUploadingField('正文')

ref:

https://github.com/django-ckeditor/django-ckeditor
https://github.com/django-ckeditor/django-ckeditor/issues/220
http://www.nanerbang.com/article/2/

thinking

安装django-ckeditor

安装Pillow

配置django-ckeditor

如何应用ckeditor

进一步完善