无法让CKEditor插件在Django中工作

Question

I am trying to get the CKEditor plugin, codesnippet, to work in the django admin but am unable to. CKEditor works if I don't define any CKEDIT_CONFIGS in my settings.py. It also works if take out the "extraPlugins" line (and it successfully will adjust the height and width as defined in the CKEDITOR_CONFIGS section).

I installed CKEditor using the instructions here: https://github.com/shaunsephton/django-ckeditor

CKeditor is located in /static/ckeditor and codesnippet is in /static/ckeditor/plugins/

In my settings.py

CKEDITOR_UPLOAD_PATH = 'uploads/'
CKEDITOR_JQUERY_URL = '/static/js/jquery-2.1.1.min.js'
CKEDITOR_CONFIGS = {
       'default': {
           'toolbar': 'Full',
           'height': 400,
           'width': 900,
           'removePlugins': 'stylesheetparser',
           'extraPlugins': 'codesnippet',
       },
   }

My admin.py

from django.contrib import admin
from blog.models import Article, Category
from django.utils import text
from django import forms
from ckeditor.widgets import CKEditorWidget

class ArticleAdminForm(forms.ModelForm):
    body = forms.CharField(widget=CKEditorWidget())
    class Meta:
        model = Article

I have also tried using just 'plugins' instead of 'extraPlugins' (although this not recomended), but get the same result (which is it breaks CKEditor and the filed doesn't display at all in the admin).

Thanks in advance for your help!

EDIT 11/26/14

OK so this still isn't working. I am pretty sure the problem is this (from the nginx error log)

2014/11/26 14:07:20 [error] 3265#0: *1 open() "/srv/www/mysite/static//ckeditor/ckeditor/plugins/codesnippet/plugin.js" failed

That path isn't right (erroneous double black slash and an extra "ckeditor" directory").

My settings.py now looks like this.

CKEDITOR_UPLOAD_PATH = 'uploads/'
CKEDITOR_JQUERY_URL = '/static/js/jquery-2.1.1.min.js'

CKEDITOR_CONFIGS = {
   'default': {
        'toolbar':[ ['CodeSnippet', ], ],
        'height': 400,
        'width': 900,
        'removePlugins': 'stylesheetparser',
        'extraPlugins': 'codesnippet',
   },
}

The Extra Plugins line is what is causing the nginx error, I have no idea where it is getting that path.

Below is more further information that may be helpful.

This is my full admin.py file

from django.contrib import admin
from blog.models import Article, Category
from django.utils import text
from django import forms
from django.db import models
from ckeditor.widgets import CKEditorWidget

class ArticleAdminForm(forms.ModelForm):
    body = forms.CharField(widget=CKEditorWidget())

class Meta:
    model = Article

class ArticleAdmin(admin.ModelAdmin):
    form = ArticleAdminForm

admin.site.register(Article, ArticleAdmin)
admin.site.register(Category)

I have copied the following lines into my ckedit.js file and dragged over the appropriate folders in the the plugins folder.

config.extraPlugins = 'dialog';
config.extraPlugins = 'widget';
config.extraPlugins = 'dialogui';
config.extraPlugins = 'lineutils';
config.extraPlugins = 'clipboard';
config.extraPlugins = 'codesnippet';
config.toolbar_Full.push(['codesnippet']);

EDIT 12/1/14

Nginx config file (as requested)

server {
    listen 8080;
    server_name mysite.com;
    access_log /srv/www/mysite/logs/access-dev.log;
    error_log /srv/www/mysite/logs/error-dev.log;
    charset utf-8;

    #Django admin css
    location /static/admin {
    alias /srv/www/mysite/static/admin;
    }

    #Django static files
    location /static {
    alias /srv/www/mysite/static/;
    }

    #Django media files
    location /media {
    alias /srv/www/mysite/media/;
    }

    #Uwsgi handles all other requests
    location / {
    auth_basic "Restricted";
    auth_basic_user_file /srv/www/mysite/.nginxpwd;
    uwsgi_pass unix:/var/uwsgi/uwsgi_at-dev.sock;
    include uwsgi_params;
    }
}

EDIT 12/3/14

Full nginx error:

2014/11/26 14:36:16 [error] 3461#0: *1 open() "/srv/www/mysite/static//ckeditor/ckeditor/plugins/codesnippet/plugin.js" failed (2: No such file or directory), client: 71.235.164.91, server: 104.131.36.141,, request: "GET /static/ckeditor/ckeditor/plugins/codesnippet/plugin.js?t=E7KD HTTP/1.1", host: "mysite:8080", referrer: "http://mysite:8080/admin/blog/article/3/"

In my settings.py

MEDIA_ROOT = '/srv/www/mysite/media/'
MEDIA_URL = '/media/'

STATIC_ROOT = '/srv/www/mysite/static'
STATIC_URL = '/static/'

CKEDITOR_UPLOAD_PATH = 'uploads/'
CKEDITOR_JQUERY_URL = '/static/js/jquery-2.1.1.min.js'

Answer 1

The Code Snippet plugin has various dependencies each of which has sub-dependencies, ie:

• Widget (has Line Utilities as a sub-dependency amongst others)
• Dialog (also has sub dependencies)

I had to as a minimum add Code Snippet, Widget and Line Utils in the ckeditor/plugins path to get it to work, as well as use the following setting to get the button to show up in the toolbar.

CKEDITOR_CONFIGS = {
   'default': {
        'toolbar':[ ['CodeSnippet', ], ],
        'height': 400,
        'width': 900,
        'removePlugins': 'stylesheetparser',
        'extraPlugins': 'codesnippet',
   },
}

So once all your plugin dependencies are all installed it should work.

Answer 2

I've been battling the same problem for days and I guess I found a workaround for this problem.

As you have noticed too, it tries to read this "static/ckeditor/ckeditor/plugins/codesnippet/plugin.js" javascript but it cannot locate it, even if you've put the plugin in the folder of "YOUR_PROJECT_DIR/static/ckeditor/ckeditor/plugins". The reason is, django-ckeditor is not searching the static directory in your project directory, it is searching it own static directory in its own path in site-packages. As a result, you may do the following as a workaround.

1. Build CKEditor with your plugins (extra plugins like CodeSnippet) using its Builder, replace CodeSnippet plugin and its dependencies with the standalone versions downloaded seperately from the CKEditor website. (The plugins do not have plugin.js file in their folder)
2. Download it and unzip it, you will have a folder named 'ckeditor' with 'lang', 'plugins' as subfolders
3. Replace the entire 'ckeditor' directory in 'static/ckeditor/ckeditor' in the folder of 'ckeditor' in your python's site-package folder. For example, your django-ckeditor is installed in "C:\\Python27\\Lib\\site-packages", you'll see 'ckedior', replace the 'static/ckeditor/ckeditor' folder with your built ckeditor folder. Or you will have virtualenv or whatever, you may do it in its own site-packages.
4. Add 'extraPlugins' settings as you already did in the problem description, and run python manage.py runserver and you will see 'CodeSnippet' plugin in your admin.

PS:

1. For 3., you can also copy this entire "site-packages/ckeditor" folder to your PROJECT_DIR, and make the replacement.
2. To my experimentation, adding or removing plugins or making changes to the config files in "YOUR_PROJECT_DIR/static/ckeditor" does not show any effects, even if you remove the entire directory.
3. Thus I guess there are still some settings we didn't make right, like STATIC_URL, STATIC_ROOT or something. I haven't figured out why since I am a beginner too and I didn't see what is wrong with your settings. I'll try to figure out the root cause and amend this answer if final "Solution" is found. Perhaps the package author 'shaunsephton' could easily figure it and lend some help. :D

Answer 3

I fought with this for ages trying to install the plugins and dependencies manually.

In the end, I packaged up all the plugins I wanted with CKEditor Builder and dropped it into a ckeditor directory in my STATICFILES_DIRS. /static/ckeditor/ckeditor/plugins & .js etc

I am using CKEditor within https://github.com/django-blog-zinnia/zinnia-wysiwyg-ckeditor so my settings look like.....

CKEDITOR_UPLOAD_PATH = 'uploads'
CKEDITOR_IMAGE_BACKEND = 'pillow'

CKEDITOR_CONFIGS = {

        'zinnia-content': {

            'toolbar': 'Zinnia',
            "extraPlugins":'codesnippet',
            "codeSnippet_theme": "monokai_sublime",
            'skin': 'moono-dark',

            'toolbar_Zinnia': [
                ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
                ['Undo', 'Redo'],
                ['Scayt'],
                ['Link', 'Unlink', 'Anchor'],
                ['Image', 'Table', 'HorizontalRule', 'SpecialChar'],
                ['Source'],
                ['Maximize', 'Resize'],
                '/',
                ['Bold', 'Italic', 'Underline', 'Strike',
                 'Subscript', 'Superscript', '-', 'RemoveFormat'],
                ['NumberedList', 'BulletedList', '-',
                 'Outdent', 'Indent', '-', 'Blockquote'],
                ['Styles', 'Format'],['CodeSnippet'],
                '/',
                ['Smiley', 'About', 'Preview', 'Templates' ],
            ],
        },
    }

So hopefully, without Zinnia, your settings would look like....

    CKEDITOR_CONFIGS = {
        'default': {
            'toolbar': 'Full',
            "extraPlugins":'codesnippet',
            "codeSnippet_theme": "monokai_sublime",
            'skin': 'moono-dark',                 
        },
    }

Answer 4

This is a probably a different cause of the problem than what was original asked about, because it was a few years ago. But a lot of plugins are not working with the latest release of django-ckeditor, version 5.1.0.

Took me ages to work out what was wrong - and it's just that the latest version does not include all the plugins. If you pip uninstall and the install version 5.0.0, you get the full plugin suite.

Figure this might help someone who finds this thread.

Answer 5

The actual cause is that plugin.js is not added by the CKEditor builder. I have no idea why that is, but each plugin's repository does have a plugin.js.