Django and Xinha

Published Fri Jul 29th 2005 in Django Python

After I posted about Django and TinyMce someone on IRC mentioned Xinha. I had not heard of or used Xinha before, so I thought I would give it a shot. Xinha has some really nice features that are not found in TinyMce, however I was a little bit disappointed at the extra configuration that Xinha required. TinyMce also just seemed a bit more polished.

Note that in order to get this to work I had to specify to Xinha the id's of the textarea's that I wanted to be wysiwyg editors. TinyMce was much more flexible in that it can convert every textarea on the page to a wysiwyg editro

I installed Xinha into my /home/skabber/public_html/javascript/xinha directory and then made symlink into the django/conf/admin_media/js directory.

Inside the xinha directory you will need to create 2 .js files

init.js will hold the follwoing 

_editor_url  = "/media/js/xinha/";
_editor_lang = "en";
Note that _editor_url should be the location where Xinha is installed

description.js should contain the follwoing 

 xinha_editors = null;
    xinha_init    = null;
    xinha_config  = null;
    xinha_plugins = null;

    // This contains the names of textareas we will make into Xinha editors
    xinha_init = xinha_init ? xinha_init : function()
    {
      xinha_plugins = xinha_plugins ? xinha_plugins :
      [
       'CharacterMap',
       'ContextMenu',
       'FullScreen',
       'ListType',
       'SpellChecker',
       'Stylist',
       'SuperClean',
       'TableOperations'
      ];
             // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
             if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return;

      xinha_editors = xinha_editors ? xinha_editors :
      [
        'id_description'
      ];

       xinha_config = xinha_config ? xinha_config() : new HTMLArea.Config();

      xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);

      HTMLArea.startEditors(xinha_editors);
    }

    window.onload = xinha_init;

Now we are ready to edit our Django model. Just like in the TinyMce example use the js param of the meta.Admin to pass in 3 javascript files. 

js = ('/media/js/xinha/init.js','/media/js/xinha/htmlarea.js','/media/js/xinha/description.js'),

Once that is done, log into the Django admin and add/edit one of your objects to see the Xinha editor.

These instructions only convert meta.TextField's with the name 'description' aka meta.TextField('description'), To change a field of a different id, modify the xinha_editors in the description.js and probably change that files name.

Powered by Django.

Latest

RSS

  • Xbox Live Gamercard