Adding CKEditor to Django Admin

This article will show how to enhance the django admin site's textareas by replacing them with the CKEditor control.

Install CKEditor

Download the CKEditor here. Place the CKEditor source in such a spot that the static web server can serve it. In my case I have created a media directory under the document root of the web static web server and then placed the CKEditor files in a directory ckeditor. Thus I can access the ckeditor.js like this http://localhost/media/ckeditor/ckeditor.js.

Update the MEDIA_URL = 'http://localhost/media/'  in the settings.py of your django project.

My sample model is very simple and looks like this:
from django.db import models

class SampleModel(models.Model):
  title = models.CharField(max_length=50)
  text = models.TextField()

  def __unicode__(self):
    return self.title

The magic happens in the custom model admin form. The for for my sample model looks like this:

from sampleapp.models import SampleModel
from django.contrib import admin
from django import forms
from django.db import models

class SampleModelAdmin(admin.ModelAdmin):
  formfield_overrides = { models.TextField: {'widget': forms.Textarea(attrs={'class':'ckeditor'})}, }

  class Media:
    js = ('ckeditor/ckeditor.js',) # The , at the end of this list IS important.
       
admin.site.register(SampleModel,SampleModelAdmin)
The important things to notice is that I add class attribute to the textarea widget. When ckeditor then satrt up it knows to replace any textareas with the ckeditor code.

The last thing to notice is the the media location is relative to the MEDIA_URL since there is no preceding /.

That's it. 


Her is the sample application: django-ckeditor.zip. Or you can get is directly from the subversion repository:

svn checkout http://johanscode.googlecode.com/svn/devblog/django/ckeditor johanscode-read-only

12 comments:

  1. Great Post! - Very well-defined example. Thank you!

    ReplyDelete
  2. Really cool, just what I was looking for!

    Is it possible to integrate CKEditor's image uploading capabilities to django?

    ReplyDelete
  3. that's great, but... the editor now goes off the page. this is in the default admin page in both Firefox 3.5.7 and Chrome 4.0b on Snow Leopard.

    ReplyDelete
  4. that's great, but... the editor now goes off the page. this is in the default admin page in both Firefox 3.5.7 and Chrome 4.0b on Snow Leopard.

    ReplyDelete
  5. I have the same issue. Ckeditor field goes off the right side of the page. Tried setting cols and style/width on the textarea without success.

    ReplyDelete
  6. Add this at the end of your /media/ckeditor/contents.css

    fieldset div.form-row div span.cke_skin_kama {
    border: 0;
    padding: 0 !important;
    float: left;
    }


    Remember to use it too

    class Media:
    css = {
    'all': ('/media/ckeditor/contents.css',)
    }

    ReplyDelete
  7. Nice Tutorial.

    Tip of ayeowch are amazing too.

    ReplyDelete
  8. its not right solution
    first make module files.py

    from django.db import models
    from django import forms

    class CKField(models.Field):
    def formfield(self, **kwargs):
    defaults = {'form_class': forms.CharField, 'widget': forms.Textarea(attrs={'class':'ckeditor'})}
    defaults.update(kwargs)
    return super(CKField, self).formfield(**defaults)

    in models:
    import fields

    and in class
    description = fields.CKField()

    in admin.py in class add
    assets imports:

    class Media:
    js = ('/static/ckeditor/ckeditor.js',)
    css = {'all': ('/static/ckeditor/skin/kama/contents.css',)}

    ReplyDelete
  9. How can I integrate these settings in django ckeditor?

    indent : false,
    breakBeforeOpen : true,
    breakAfterOpen : false,
    breakBeforeClose : false,
    breakAfterClose : true

    ReplyDelete