Django(七)配置及使用富文本编辑器ckeditor

发表于   |   分类于   |  

当你想入门django的时候，一般大家都会选择搭建一个博客系统来学习django，而当你发现你写文章需要格式，需要样式，需要不仅仅是文字的时候，这时你就会需要到富文本编辑器，富文本编辑器包括kindeditor、ckeditor、uEditor等等。这里介绍一下ckeditor的配置和使用，他们大概的原理是一样的。

安装django-ckeditor

django-ckeditor的下载地址：https://github.com/shaunsephton/django-ckeditor

# 安装git 自行百度， 这里用的ubuntu14.04系统
git clone https://github.com/shaunsephton/django-ckeditor
# 打开你克隆下来的文件夹
cd django-ckeditor/
# 运行下面的命令
python setup.py install

安装Pillow

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

pip install Pillow

如果你不了解pip，可以参照：https://pypi.python.org/pypi/pip

配置你的django

要使安装好的django-ckeditor生效，你需要对你的django应用进行一系列配置。现在带大家走一遍，放轻松^_^

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

2.在你的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/

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

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模型：

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

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

如果你在你的后台看到下图这样的界面，那么恭喜你，你初步成功了。

RichTextField是一个TextField的子类，除了TextField拥有所有参数外，还有自己的参数，这些参数中，软件作者的文档中只介绍了config_name这个参数，其它的没有提及，虽然比较操蛋，但我们还是对作者贡献这个开源项目表示由衷的感谢。

通过查看源代码，可以发现RichTextField有config_name、extra_plugins、external_plugin_resources三个额外的可选参数。extra_plugins我将撰写专文，尽请期待。

进一步完善

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

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

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Full',
        'height': 300,
        'width': 300,
    },
}

你失望地发现，宽度和高度确实起作用了，可工具栏的功能还是没多页没少：

怎么回事呢？如果你进行如下设置，你会发现工具栏里的按钮变少了：

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'Basic'
    },
}

看来配置项“toolbar”这个参数是生效的，那问题出在哪了？别抓狂，不是说简洁就是美吗，呵呵。不过话虽如此，咱么还是去看看源码一探究竟吧。

打开如下源文件：

your\python\path\Lib\site-packages\django_ckeditor_updated-4.2.8-py2.7.egg\ckeditor\widgets.py

可以发现如下代码：

DEFAULT_CONFIG = {
    'skin': 'moono',
    'toolbar_Basic': [
        ['Source', '-', 'Bold', 'Italic']
    ],
    'toolbar_Full': [
        ['Styles', 'Format', 'Bold', 'Italic', 'Underline', 'Strike', 'SpellChecker', 'Undo', 'Redo'],
        ['Image', 'Flash', 'Table', 'HorizontalRule'],
        ['TextColor', 'BGColor'],
        ['Smiley', 'SpecialChar'], ['Source'],
    ],
    'toolbar': 'Full',
    'height': 291,
    'width': 835,
    'filebrowserWindowWidth': 940,
    'filebrowserWindowHeight': 725    
}

没错，问题就处在这里了。可以看到，默认的设置的确就是’toolbar’: ‘Full’,但是通过’toolbar_Full’这个key，作者阉割了工具栏的功能。

找到的原因就好办了，接下来你只要在settings.py配置文件中，在CKEDITOR_CONFIGS中加入你自己需要的工具栏按钮即可：

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': (
            ['div','Source','-','Save','NewPage','Preview','-','Templates'], 
            ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'], 
            ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], 
            ['Form','Checkbox','Radio','TextField','Textarea','Select','Button', 'ImageButton','HiddenField'], 
            ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], 
            ['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'],
        ),
    }
}

当然，你可以注掉你不需要的功能，是丰是俭，全凭你做主！

重启应用后，你可以看到：

热评文章