Blog

    Django admin CKEditor integration

    Published on Oktober 10, 2012

    It prooves to be extremely useful not to write raw HTML code when posting entries for the web. For example most popular weblogging applications allow users to write entries using a simpler syntax that will be automatically converted into HTML as needed. Some of widely used so called WYSIWYG editors are Textile, Markdown, BBCode, reStructuredText and CKEditor only to mention a few. All of those systems has one thing in common: they can take a plain text some of them with a little bit of special syntax and perform that in raw HTML code.

    Django's template system allows you to apply filters in your templates to handle this and it seems to be an easy solution, because Django includes ready-made template filters as far as I know at least for applying Textile, Markdown, and reStructuredText to any piece of text in a template. But unfortunately using a template filter in this case is a very expensive solution that will eat up needless CPU resources on the server every time you display an entry, although the resulting HTML will be the same each time. A better solution is to generate the HTML code once when it is saved to the database and then retrieve it directly for display.

    Now I want to present the integration of CKEditor to the django admin site:

    1.  download django-ckeditor app by shaunsephton

    (you can add the django-ckeditor app to your pythonpath without installing with python setup.py install)

    2. copy ckeditor to your static file folder or run collectstatic as described in step 3 at django-ckeditor

    3.  add ckeditor application and configure static file folder in setting.py

    INSTALLED_APPS = (
        'ckeditor',
    )
    # ckeditor required configurations
    CKEDITOR_UPLOAD_PATH = CURRENT_PATH + '/media/uploads'
    STATIC_URL = '/static/'

    4. add HTML conversion functionality in your models.py file when saving a TextField to your database

    Therefore we have to import one more statement:

    from ckeditor.fields import RichTextField

    In the Entry class replace your body TextField with RichTextField like in the following code:

    class Entry(models.Model):
    
        # Core fields
        title = models.CharField(max_length=250)
        excerpt = models.TextField(blank=True,help_text="A short summary of the entry. Optional.")
        #body = models.TextField()
        body = RichTextField()
        pub_date = models.DateTimeField(default=datetime.datetime.now)
        # Field to store generated HTML
        body_html = models.TextField(editable=False, blank=True)

    The actual save() method inside the Entry model is fairly short:

    def save(self, force_insert=False, force_update=False):
            self.body_html = self.body
            if self.excerpt:
                self.excerpt_html = self.excerpt
            super(Entry, self).save(force_insert, force_update)


    In the next post you get to learn how you plugin syntax highlighting to your just configured CKEditor.

    Comments

    So far, this entry has 0 comments.

    Post a comment

Buchempfehlungen pix pix
Kalender
December 2018
MonTueWedThuFriSatSun
     12
3456789
10111213141516
17181920212223
24252627282930
31      
Über pix

Ich bin Diplom Informatiker und das ist meine persönliche Internet sowie weblog Seite.mehr Informationen...