django-blog-zinnia添加文本编辑器ckeditor

CKEditor文本编辑器是一款旨在简化Web内容编辑的即用(ready for use)的HTML文本编辑器。它是一款所见即所得(WYSIWYG)的编辑器,涵盖了常用的文本编辑功能。CKEditor是一款开源的应用,也就是说开发者可以根据实际需求修改源码。下面是CKEditor的实例

django-blog-zinnia的生态系统提供了对ckeditor编辑器的支持

具体配置过程如下:

一、配置django-ckeditor:

1. 从https://github.com/shaunsephton/django-ckeditor/下载django-ckeditor的源码压缩包,解压后将ckeditor目录拷贝至django项目的工程目录下
2. 在settings.py文件的INSTALLED_APPS数组中添加ckeditor
3. 执行collectstatic管理命令manage.py collectstatic(或者将django-ckeditor源码目录/static/下的/ckeditor/手工拷贝至django工程项目的静态文件目录STATIC_ROOT下)
4. 在项目配置文件settings.py中添加CKEDITOR_UPLOAD_PATH配置,由此指定CKEditor的媒体上传路径,CKEditor使用Django的存储API。缺省设置下Django使用文件系统储存后端(使用MEDIA_ROOT和MEDIA_URL),如果没有另外指定存储后端,你需要对MEDIA_ROOT下的CKEDITOR_UPLOAD_PATH路径拥有写权限。
5. 在项目urls.py文件中新增CKEditor的URL配置:
(r'^ckeditor/', include('ckeditor.urls')),
6. 设置CKEDITOR_IMAGE_BACKEND来启用CKEditor缩略图,缺省设置下图像不显示缩略图,以全尺寸形式展现。

二、配置zinnia-wysiwyg-ckeditor:

1. 从https://github.com/django-blog-zinnia/zinnia-wysiwyg-ckeditor下载zinnia-wysiwyg-ckeditor源码压缩包,解压后将zinnia_ckeditor拷贝到django项目的工程目录下
2. 在settings.py文件的INSTALLED_APPS数组中添加zinnia_ckeditor(添加到zinnia之后)

三、修改zinnia WYSIWYG配置:

修改zinnia/settings.py文件的WYSIWYG_MARKUP_MAPPING字典,变更为如下内容:

WYSIWYG_MARKUP_MAPPING = {
    'textile': 'markitup',
    'markdown': 'markitup',
    'restructuredtext': 'markitup',
    'html': 'ckeditor'
}

四、CKEditor参数配置:

在django项目目录的settings.py中添加变量CKEDITOR_CONFIGS,例如:

CKEDITOR_CONFIGS = {
    'default': {
        'skin': 'moono',
        'toolbar': 'Full',
        'toolbarGroups' : [
            { 'name': 'clipboard',   'groups': [ 'clipboard', 'undo' ] },
            { 'name': 'editing',     'groups': [ 'find', 'selection', 'spellchecker' ] },
            { 'name': 'links' },
            { 'name': 'insert' },
            { 'name': 'forms' },
            { 'name': 'tools' },
            { 'name': 'document',       'groups': [ 'mode', 'document', 'doctools' ] },
            { 'name': 'others' },
            '/',
            { 'name': 'basicstyles', 'groups': [ 'basicstyles', 'cleanup' ] },
            { 'name': 'paragraph',   'groups': [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
            { 'name': 'styles' },
            { 'name': 'colors' },
            { 'name': 'about' },
        ],
        'width' : 960,
        'height' : 380,
        'removeButtons' : 'Underline,Subscript,Superscript',
        'format_tags' : 'p;h1;h2;h3;pre',
        'removeDialogTabs' : 'image:advanced;link:advanced',
        'extraPlugins' : 'sourcedialog,codemirror,widget,lineutils,codesnippet,selectall',
        'codemirror' : {
            'theme': 'default',
            'lineNumbers': True,
            'lineWrapping': True,
            'matchBrackets': True,
            'autoCloseTags': True,
            'autoCloseBrackets': True,
            'enableSearchTools': True,
            'enableCodeFolding': True,
            'enableCodeFormatting': True,
            'autoFormatOnStart': False,
            'autoFormatOnModeChange': False,
            'autoFormatOnUncomment': False,
            'highlightActiveLine': True,
            'mode': 'htmlmixed',
            'showSearchButton': True,
            'showTrailingSpace': True,
            'highlightMatches': True,
            'showFormatButton': True,
            'showCommentButton': True,
            'showUncommentButton': True,
            'showAutoCompleteButton': True
        },
        'allowedContent' : True,
    },
}

 

本文链接:http://bookshadow.com/weblog/2014/08/18/django-blog-zinnia-ckeditor/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。

如果您喜欢这篇博文,欢迎您捐赠书影博客: ,查看支付宝二维码

Pingbacks已关闭。

评论
  1. leale leale 发布于 2014年9月17日 13:49 #

    博主你好,请问下在你讲的第四步26行 'extraPlugins' : 'sourcedialog,codemirror,widget,lineutils,codesnippet,selectall', 这条语句不删除就无法显示文本框,这是没装什么插件的原因吗? 环境和配置都和你一样,用的是那个sae版的zinnia

  2. 在线疯狂 在线疯狂 发布于 2014年9月17日 17:04 #

    使用浏览器的调试工具查看一下是否有js的异常信息

  3. leale leale 发布于 2014年9月18日 11:50 #

    谢谢up主,js调试发现缺少文件,https://github.com/shaunsephton/django-ckeditor下的ckeditor的plugins里没有sourcedialog,codemirror,widget,lineutils,codesnippet,selectall这几个模块,我去官网把每个模块下过来了就可以用了。还有就是我按5-20配置的工具栏还是默认的几个按钮,最后我用http://www.nanerbang.com/article/2/里写的办法解决的。

  4. 在线疯狂 在线疯狂 发布于 2014年9月18日 14:15 #

    看了一下你推荐的这篇博文,写的很不错!

  5. 阿飞 阿飞 发布于 2014年10月30日 00:32 #

    好啊,我的博客编辑器更新为ckeditor,感谢在线疯狂,
    本文补充 http://www.guofeifei.com/2014/10/30/ckeditor/

  6. up up 发布于 2015年1月10日 17:22 #

    求助博主:我的zinnia在admin中code snippet生效了,可以选择不同步的语言来进行着色,但admin中的这种效果,在前端却显示不了,打开页显,只是显示成一段灰色的代码块,是有哪里还需要配置吗?盼回复,万分感谢。

  7. 在线疯狂 在线疯狂 发布于 2015年1月11日 00:07 #

    前端代码高亮可以使用highlight.js 链接: https://highlightjs.org/

  8. up up 发布于 2015年1月11日 22:49 #

    感谢回复,已于昨晚搞定![耶]

  9. 寻_FIND 寻_FIND 发布于 2016年3月18日 14:20 #

    我想问下,插入代码块那个按钮需要怎么配置?

  10. 在线疯狂 在线疯狂 发布于 2016年3月19日 16:52 #

    按照博文说明配置后,没有出现那个按钮吗?

  11. 我无语 我无语 发布于 2016年6月11日 02:15 #

    看了那么多的教程,这个才是最有逼格的,厉害

张贴您的评论