CODEWITHSUNDEEP
pythondjango-adminckeditordjango-flatpages
Aamir Hussain
Aamir Hussain

Reputation: 259

Can anyone describe how I implement the ckeditor in django.contrib.flatpages?

Can anyone describe how I implement the ckeditor in django.contrib.flatpages?

Upvotes: 0

Views: 2170

Answers (3)

Marcs
Marcs

Reputation: 3838

For a solution without template hacking check this page: http://johansdevblog.blogspot.it/2009/10/adding-ckeditor-to-django-admin.html

I report here the example if the link goes down. This is a simple model.

from django.db import models

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

def __unicode__(self):
    return self.title

This is how to add ckeditor support to a specific type of field, in this case a TextArea.

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)

At this point the ckeditor.js will check for all the textarea with the class attribute set to "ckeditor".

Upvotes: 0

alexander_ch
alexander_ch

Reputation: 376

Found good solution:

This is a little tricky. I've got admin.autodiscover() in my urls.py, so it's automatically going to create an admin for flatpages as defined in django.contrib.flatpages. I certainly don't want to go hacking apart something that came with Django, nor do I want to give up the convenience of autodiscover.

http://www.elidickinson.com/story/django-flatpages-and-ckeditor/2011-11

Upvotes: 1

scum
scum

Reputation: 3212

Few steps to get this done. First, make sure ckeditor.js is being served up in some way from django. Info on this can be found at http://docs.djangoproject.com/en/1.2/howto/static-files/#howto-static-files. For this example, I will be serving it from 127.0.0.1:8000/js/ckeditor/ckeditor.js.

You'll need to override the standard flatpage change form template. In your templates directory, create a file in the following subdirectory: <your templates dir>/admin/flatpages/flatpage/change_form.html

Create the following text inside:


{% extends "admin/change_form.html" %}
{% block extrahead %}
{{ block.super }}
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>

<script type="text/javascript" charset="utf-8">
var $ = jQuery = django.jQuery.noConflict();  // Use djangos jquery as our jQuery
</script>

<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready( function(){
 $( 'textarea' ).ckeditor({
  "skin":"kama",
  "width" : 850,
  // "toolbar" : "Basic",  // uncomment this line to use a basic toolbar

 });
});

</script>

{# Adding some custom style to perty thing up a bit. #}
<style type="text/css">
div>.cke_skin_kama{
 width: 100%;
 padding: 0!important;
 clear: both;
}
</style>

{% endblock %}

The first few lines contain django's default text for the extrahead block. The rest of the script imports the ckeditor javascripts and uses django's already-imported jQuery with the ckeditor jQuery adapter. Finally, we end up forcing some style upon the page, as by default, things look a bit messy.

From here, you can quickly change the toolbar by implementing different options in the ckeditor call. Going to a simple toolbar is likely something you'll need if non-technical people are going to edit these flatpages. You can just uncomment that line in the above code to implement that.

Upvotes: 1

Related Questions