Can't get CKEditor to work in Django with zinnia-wysiwyg-ckeditor

Question

First of all excuse my English is really bad, but I'll try to explain as best I can.

I´m working in a blog, with django-blog-zinnia, so far so good. Now I try to integrate CKEditor with

Django zinnia-wysiwyg-ckeditor

I followed the steps in each of its documentation and I can't make it work.

I searched and check for errors in the console and there is nothing, probably would overlook something, because also it is the first time i´m working with Django.

So, I did was this

1. I installed zinnia-wysiwyg-ckeditor and django-ckeditor
2. I added apps in my settings.py and configured django-ckeditor

My settings.py looks like this. ...

STATIC_URL = '/static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(DATA_DIR, 'media')
STATIC_ROOT = "/static_prod/"

...

INSTALLED_APPS = (
...
'ckeditor',
'ckeditor_uploader',
'zinnia',
'zinnia_ckeditor'
)

...

# ZINNIA SETTINGS
ZINNIA_ENTRY_BASE_MODEL = 'myapp.models.Video'
ZINNIA_PAGINATION = 5

# CKEDITOR SETTINGS
CKEDITOR_UPLOAD_PATH = "uploads/"
CKEDITOR_JQUERY_URL =  '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'
CKEDITOR_CONFIGS = {
'default': {
    'toolbar': 'Full',
},
'zinnia-content': {
    'toolbar_Zinnia': [
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
        ['Undo', 'Redo'],
        ['Scayt'],
        ['Link', 'Unlink', 'Anchor'],
        ['Image', 'Table', 'HorizontalRule', 'SpecialChar'],
        ['Source'],
        ['Maximize'],
        '/',
        ['Bold', 'Italic', 'Underline', 'Strike',
         'Subscript', 'Superscript', '-', 'RemoveFormat'],
        ['NumberedList', 'BulletedList', '-',
         'Outdent', 'Indent', '-', 'Blockquote'],
        ['Styles', 'Format'],
    ],
    'toolbar': 'Zinnia',
},
}

In my urls.py added this.

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

3. I ran the collectstatic management command: python manage.py collectstatic

and zinnia administrator my field of content remains the same as here.

Answer 1

Since there's an expected change to your admin models, did you run python manage.py makemigrations and python manage.py migrate?

EDIT:

After going through the installation process again, I'd advise against messing with the 'zinnia-content' portion of the toolbar config. I found that, even if I copy/pasted it from the example config, it resulted in a very thin bar across the top of my content entry field -- but no toolbar (your admin appears to be using some custom -- and really nice looking -- CSS, so maybe that would explain why the thin grey bar isn't even getting picked up on your example).

I'm using this, to get the full toolbar (here's my Add Entry page):

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

I also have this in my settings, which is making the "Browse Server" window show nice image previews when I click on the images' thumbnails -- although the thumbnails themselves are rendering as broken. But, it's not breaking the project, and I don't think this is even causing the thumbnail issue (I believe it's actually responsible for rending the previewed images as the same size, when you're navigating the images on your server):

CKEDITOR_IMAGE_BACKEND = "pillow"

Depending on your project, a zinnia-specific toolbar may or may not be necessary (in my case, the only place ckeditor is used is in the entry field, anyway -- so I don't have a use for more than one config. If I were passing this to a client, though, I'd certainly ditch the full toolbar), but if you need multiple instances of the toolbar, maybe calling ckeditor via the native js commands on the page's template itself (and defining the different toolbar settings there) might work better than defining the different configs in the settings.py file.

Although! If you'd had luck getting the Zinnia-specific config working in your settings.py file since asking this, I'd love to know how you got it going!

And, if you're still having trouble getting the toolbar to render, I found the settings.py and urls.py files on the django-ckeditor demo project to be very helpful references!

**This could be a project-specific issue, but I've seen it mentioned a few times on stackoverflow: The full toolbar config didn't, for whatever reason, load the SCAYT spellchecker by default (despite the plugin being installed automatically with the django-ckeditor installation), but adding the following two lines to ckeditor's config.js file did the trick (the second, as you can probably gather from the name, is for making sure that spellcheck is always auto-enabled):

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.extraPlugins = 'scayt';
    config.scayt_autoStartup = true;
};

Answer 2

This is what I did to make my Zinnia-CKEditor work.

First, remove the CKEditor default configuration. It is overwritten by the second toolbar declaration 'toolbar': 'Zinnia',.

CKEDITOR_IMAGE_BACKEND = "pillow" is important for image rendering in the editor itself.

The custom configurations that should be in the CKEditor config.js shown here can be added to the bottom in Python notation. This answers sparkholiday's question on configuring Zinnia directly.

CKEDITOR_CONFIGS = {

    'zinnia-content': {
        'toolbar_Zinnia': [
            ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
            ...
        ],
    'uiColor': '#9AB8F3',
    'extraPlugins': 'scayt'
    },
}

Here is how my Zinnia Toolbar turned out: