nicEditor in Django
Integrating BBCode editing, image upload and other nicEdit features with Django
nicedit is a nice WYSIWYG editor that can be embedded in your pages. It also has two interesting features - BBCode editing and image uploading directly from the editor. In this article I'll show you how to install the editor and support local file uploading as well as BBCode support.
Installing the editor
- Download NicEdit selecting additional modules if needed. For BBCode you need "nicBBCode", and for image upload - "nicUpload"
- Unpack the zip file and move the files to your static media folder (usually site_media/). Next you can edit nicEdit.js and edit path in "iconsPath" setting it to a correct value, like in my case:
iconsPath : '/site_media/nic/nicEditorIcons.gif',
- Now we can use the editor in our application. Here is an example view: And a template:
- This example shows a Django managed form. In the template we call nicEdit to change all textarea to WYSIWYG editor. If you submit the form with some text you will see that it will send a nice XHTML content. This is a very basic usage example. It looks bit like so:
Uploading images to server
- By default Image Upload uses ImageShack backend. Sometimes we want to store files on our server. We can easily configure NicEdit to upload them locally.
- We start at with more specific configuration of nicEdit:
- uploadURI defines the URL which is used to upload images. I attached a Django view under that URL. buttonList defines options that show up in the editor. panelInstance runs the editor for textarea given by ID.
- You can find the original PHP based upload handler on the project page. For Django I've made a simple view to handle those files:
nicEdit can also edit HTML content but return BBCode version of it. This can be used on discussion boards and other pages. To use BBCode output you have to pass bbCode: true in the nicEdit configuration. When you submit the form - it will send the BBCode version. To edit BBCode you have to parse it to X/HTML before sending it to the editor - using some Python based parser.You can also use a simple function that supports the basic BBCodes. For example Django template tag: