• 幕客老师召集小伙伴
  • 运维高手36项修炼
  • python自动化运维项目实战
  • nginx从入门到实战
  • 阿里云与Centos7实战

博客更新-编辑器替换为ckeditor

原来我的博客编辑器用的:tinymce

替换原因

  1、上传图片起来存在问题

  2、对于代码的内容不能很好支持

等等

替换步骤

1、配置django-ckeditor

1. 从https://github.com/shaunsephton/django-ckeditor/下载django-ckeditor的源码压缩包,解压后将ckeditor目录拷贝至django项目的工程目录下

2. 在settings.py文件的INSTALLED_APPS数组中添加ckeditor

3.将django-ckeditor源码目录/static/下的/ckeditor/手工拷贝至django工程项目的静态文件目录STATIC_ROOT下

4.在项目配置文件settings.py中添加CKEDITOR_UPLOAD_PATH配置,由此指定CKEditor的媒体上传路径,CKEditor使用Django的存储API(CKEDITOR_UPLOAD_PATH = './uploads'),注意:CKEDITOR_UPLOAD_PATH路径拥有写权限。

5.在项目urls.py文件中新增CKEditor的URL配置:
(r'^ckeditor/', include('ckeditor.urls'))

6.设置CKEDITOR_IMAGE_BACKEND来启用CKEditor缩略图(CKEDITOR_IMAGE_BACKEND = "pillow"

 

2、配置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之后)

 

3、修改zinnia WYSIWYG配置

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

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

 

4、修改zinnia WYSIWYG配置

在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,
    },
}

 

5、补充

1、因为我的博客,有修改过modles内容,所以需要更改代码:

 zinnia_ckeditor/admin.py

# if ENTRY_BASE_MODEL == 'zinnia.models_bases.entry.AbstractEntry':
#     print "...........................222222"
admin.site.unregister(Entry)
admin.site.register(Entry, EntryAdminCKEditor)

2、发现只出现了几个按钮

原因:

在www_django/mysite/ckeditor 目录下,widgets.py惹的祸,里边toolbar_Full重新覆盖了,所以注释掉里边代码:

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,
}

3、如果需要添加新的插件,在官方网站下载,并加入对应的settings.py中配置extraPlugins。

下载地址:https://ckeditor.com/addon/find

#添加find 查找、替换功能
        'extraPlugins' : 'sourcedialog,codemirror,widget,lineutils,codesnippet,selectall,find',

 

博客更新-编辑器替换为ckeditor

Pingbacks已打开。

引用地址

暂无评论

发表评论