How can I get my django-ckeditor installation to recognize?

Question

I have been following the instructions at https://github.com/django-ckeditor/django-ckeditor, and wiped the database to get the RichTextField() to register. My models.py is:

#!/usr/bin/python

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

class Page(models.Model):
    title = models.CharField(max_length = 255)
    body = RichTextField()
    location = models.CharField(max_length = 255, verbose_name = "URL")
    keywords = models.CharField(max_length = 255, blank = True)
    meta_description = models.CharField(max_length = 255, blank = True)
    script = models.TextField(blank = True)
    def __unicode__(self):
        return 'Page "' + self.title + '" at ' + self.location
    class Meta:
        ordering = ['title']

However, ckeditor isn't showing up for the "body" field, and a look at the page source for the admin Page editor betrays no reference to ckeditor.

The JavaScript inclusions are:

<title>Add page | Django site admin</title>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css" />
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/static/admin/css/ie.css" /><![endif]-->

<script type="text/javascript">window.__admin_media_prefix__ = "/static/admin/";</script>

<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>

What can/should I do so that the "body" field of a "Page" has a CKeditor for its widget?

Answer 1

I know it's an old question, but it hasn't been answered and it may help others...

Below are the steps I follow when using Ckeditor on django.

1.Add 'ckeditor' to installed apps on settings.py

2.Add ckeditor config variables in settings.py. (upload location and tools)

CKEDITOR_UPLOAD_PATH = MEDIA_ROOT
CKEDITOR_BASEPATH = os.path.join(STATIC_ROOT, "ckeditor/")

CKEDITOR_CONFIGS = {

    'default': {
        'toolbar': [
            ['Undo', 'Redo',
             '-', 'Bold', 'Italic', 'Underline',
             '-', 'Link', 'Unlink', 'Anchor',
             '-', 'Format',
             '-', 'SpellChecker', 'Scayt',
             '-', 'Maximize',
             '-', 'Language',
            ],
        ],
        'height': '100%',
        'width': '100%',
        'toolbarCanCollapse': False,
    },
    'full': {
        'toolbar': [
            ['Undo', 'Redo',
             '-', 'Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList',
             '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv',
             '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock',
             '-', 'TextColor', 'BGColor',
             '-', 'Maximize', 'ShowBlocks',  #'Image' ,
             '-', 'Cut', 'Copy', 'Paste', 'PasteText',
            ],
            ['-', 'SpecialChar',
             '-', 'Source',
            ],
            [
                '-', 'Styles', 'Format', 'Font', 'FontSize'
            ],
            [
                '-', 'BidiLtr', 'BidiRtl'
            ]
        ],
        'width': '100%',
        'height': '600px',
        'toolbarCanCollapse': False,
    },
    'disable': {
        'toolbar': [],
        'width': '100%',
        'height': '600px',
        'toolbarCanCollapse': False,
    },
}

3.Add ckeditor to the models

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

class Article(models.Model):
    content = RichTextField(default="")

4.Finally, the magic happens when you add ckeditor widget in a form:

from django import forms
from django.utils.translation import ugettext_lazy as _
from ckeditor.widgets import CKEditorWidget
from apps.articles.models import Article


class ArticleForm(forms.ModelForm):

    content = forms.CharField(widget=CKEditorWidget(config_name='full'), label=_('Content'))

    class Meta:
        model = Article

Of course, don't forget

python manage.py collectstatic

to get all static data to your static dir, and

python manage.py makemigrations model_name
python manage.py migrate model_name

to create the databases fields.

One more thing! Add this to the page head when the form is used in order to load the necessary scripts for ckeditor to work

{{ form_name.media }}

;-)