django-richtext-blog 0.8.6

A django app that implements a blog with the features we've grown accustomed to. Features: Rich text editing with TinyMCE; Full image upload support; Tags; Comments; Spam prevention; Atom/RSS feeds; Example templates; Code syntax highlighting; SEO optimised urls and more.

Features

• Rich text editing implemented with TinyMCE

• Full inline image upload support via TinyMCE using grapelli and filebrowser modules

• Automatic image scales for posts

• Support for post tagging

• Support for comments in posts

• Code syntax highlighting with pygments

• Comment spam prevention through integration with django-simple-captcha

• Atom and RSS feed support

• Templates included to provide examples of how django-richtext-blog can be used

• SEO optimised urls for posts and tags

Getting Started

Included is all the templates the blog system uses to display posts, tags etc.

If you’re familiar enough with django you might be able to jump straight in, otherwise below are the steps to get it up and running in its most basic form.

The author uses this app to implement his own blog therefore a working example can be found in the wild here http://www.wholebaked.com.au/blog/posts/

For bug reports or the latest bleeding edge version go to the GitHub project page https://github.com/timmygee/django-richtext-blog

Installing

By far the simplest way to install the latest stable vesrion is to use pip or easy_install:

$ pip install django-richtext-blog

This will pull in any missing package dependencies also.

Next step is to set up a django site that will use the blog app.

Currently django-richtext-blog requires django 1.3 to work correctly due to the fact that it uses django-filebrowser to implement inline image uploads. Perhaps one day django-filebrowser will be taken to django 1.4 and then this package in turn can be upgraded.

django-filebrowser also currently requires django-grapelli for its implementation of features on the admin pages. There is a version of django-filebrowser that does not use django-grapelli (http://pypi.python.org/pypi/django-filebrowser-django13 ) but is as yet untested with this app. The below instructions assume the inclusion of django-grapelli.

Assuming that django is installed you should have the django-admin.py script in the system path. Set up a new site project:

$ django-admin.py startproject myblogsite

Next configure your project to use the blog app and its dependencies by editing myblogsite/settings.py. For a full explanation of these steps see the django tutorial documentation at https://docs.djangoproject.com/en/1.3/intro/tutorial01/

At the top of settings.py add the lines:

import os
PROJECT_HOME=os.path.dirname(os.path.realpath(__file__))

Make sure you set up your database and admin log in preferences while you’re there.

Update the MEDIA_URL line to read:

MEDIA_URL = '/media/'

Update STATIC_ROOT to:

STATIC_ROOT = os.path.join(PROJECT_HOME, 'static')

Update ADMIN_MEDIA_PREFIX to:

ADMIN_MEDIA_PREFIX = STATIC_URL + 'grappelli/'

In the INSTALLED_APPS setting add tinymce, grappelli.dashboard, grappelli, filebrowser and captcha before the entry for django.contrib.admin. Make sure the django.contrib.admin line is un-commented as well. After django.contrib.admindocs add an entry for richtext_blog. The resulting INSTALLED_APPS setting might look like:

INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'tinymce',
    'grappelli.dashboard',
    'grappelli',
    'filebrowser',
    'captcha',
    # Uncomment the next line to enable the admin:
    'django.contrib.admin',
    # Uncomment the next line to enable admin documentation:
    'django.contrib.admindocs',
    'richtext_blog'
    )

Add a TEMPLATE_CONTEXT_PROCESSORS setting and make sure it looks like:

TEMPLATE_CONTEXT_PROCESSORS = (
    'django.contrib.auth.context_processors.auth',
    'django.core.context_processors.i18n',
    'django.core.context_processors.media',
    'django.core.context_processors.static',
    'django.core.context_processors.csrf',
    'django.contrib.messages.context_processors.messages',
    'django.core.context_processors.request',
    # django-richtext-blog context processors
    'richtext_blog.context_processors.blog_global'
    )

Add the below lines to the bottom of the settings.py file to implement some default settings for the various dependencies:

# TinyMCE settings
TINYMCE_COMPRESSOR = True
TINYMCE_DEFAULT_CONFIG = {
    'width': '760',
    'height': '480',
    'plugins': 'fullscreen,media,preview,paste',
    'theme': 'advanced',
    'relative_urls': False,
    'theme_advanced_toolbar_location': 'top',
    'theme_advanced_toolbar_align': 'left',
    'theme_advanced_buttons1': 'bold,italic,underline,strikethrough,|,' \
        'justifyleft,justifycenter,justifyright,justifyfull,|,forecolor,' \
        'formatselect,sub,sup,removeformat,charmap,|,bullist,numlist,|,' \
        'indent,outdent,|,link,unlink,anchor,image,media,|,visualaid,code,' \
        'preview,fullscreen',
    'theme_advanced_buttons2': 'undo,redo,|,cut,copy,paste,pasteword,' \
        'pastetext,selectall,|,cleanup,help,|,hr',
    'theme_advanced_buttons3': '',
    'theme_advanced_blockformats': 'p,pre,address,blockquote,h1,h2,h3,h4,' \
        'h5,h6',
    'plugin_preview_width' : '800',
    'plugin_preview_height' : '600',
    'paste_auto_cleanup_on_paste': 'true',
    }

# Filebrowser settings
FILEBROWSER_DIRECTORY = 'uploads/'

# Grappelli settings
GRAPPELLI_INDEX_DASHBOARD = \
    'richtext_blog.custom_dashboard.CustomIndexDashboard'

# richtext_blog settings
SLUGS_EDITABLE = True
SITE_DESCRIPTION = 'My blog site'

A full list of TinyMCE configuration options can be found at http://www.tinymce.com/wiki.php/Configuration The author spent a little time tweaking TinyMCE to his preferences so feel free to play around with your own settings. The current settings are fairly sufficient for most purposes however.

Next you need to edit myblogsite/urls.py. Add the includes:

from filebrowser.sites import site
from django.conf import settings

Make sure admin is implemented:

from django.contrib import admin
admin.autodiscover()

Next add the url pattern for adding django-richtext-blog to the root of the site:

url(r'', include('richtext_blog.urls')),

Add the url pattern for the 3rd party dependencies:

url(r'^tinymce/', include('tinymce.urls')),
url(r'^admin/filebrowser/', include(site.urls)),
url(r'^grappelli/', include('grappelli.urls')),
url(r'^captcha/', include('captcha.urls')),

And the url pattern for the admin pages if not there already:

url(r'^admin/', include(admin.site.urls)),

For live setups you may need the following pattern so that uploaded images are viewable:

url(r'^media/(?P<path>.*)$', 'django.views.static.serve',
    {'document_root': settings.MEDIA_ROOT}),

All rolled up into the one file your urls.py might look something like:

from django.conf.urls.defaults import patterns, include, url
from filebrowser.sites import site
from django.conf import settings

# Uncomment the next two lines to enable the admin:
from django.contrib import admin
admin.autodiscover()

urlpatterns = patterns('',
    # richtext_blog definitions
    url(r'', include('richtext_blog.urls')),
    # 3rd party url definitions
    url(r'^tinymce/', include('tinymce.urls')),
    url(r'^admin/filebrowser/', include(site.urls)),
    url(r'^grappelli/', include('grappelli.urls')),
    url(r'^captcha/', include('captcha.urls')),
    url(r'^admin/', include(admin.site.urls)),

    # Media
    url(r'^media/(?P<path>.*)$', 'django.views.static.serve',
        {'document_root': settings.MEDIA_ROOT}),
)

Save the file, then it’s just the matter of preparing the database:

$ python myblogsite/manage.py syncdb

And if all went well you should be able to run it

$ python myblogsite/manage.py runserver

Using django-richtext-blog

Creating a new post is all done from the admin pages. Comments can be added and moderated when viewing a post in the admin section. Author comments can appear a different colour to public comments on the public side of the site.

The image upload button on TinyMCE when editing a post will open up a the django-filebrowser dialogue where existing uploaded images can be chosen or new ones uploaded. The image scale can be selected here too.

For syntax highlighting code, the code text must be contained within a <pre></pre> block. TinyMCE has a shortcut to this in the formatting drop-down menu listed as Preformatted. Pygments will try to guess the code format but for more accurate control a css class attribute can be provided that defines the format of the content. For python code simply add a class="python" to the <pre> tag in TinyMCE’s HTML edit mode so the opening tag would read <pre class="python">. For simple command line formatting use class="console". For a full list of class names that can be used, check the list of lexers pygments supports at http://pygments.org/docs/lexers/ . What is listed under Short names is what should be used as the class name.

A default css stylesheet richtext_blog/static/blog-style.css is provided that implements default styles but can be overidden easily. http://www.wholebaked.com.au/blog/posts/ is a good example of how custom styles can change the appearance quite dramatically.

richtext_blog/templates/base.html provides an example of how all the current features can be rolled up into a site and also shows how to implement the blog’s sidebar features.