Socialist Software

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.

4 response to "Django and Xinha"

16 Espen Grindhaug August 2, 2005 at 9:35 a.m.

Thanks for that
17 Mikelowery August 13, 2005 at 6:26 p.m.

Thank you for the quick walk through. Great information!
18 amit upadhyay January 23, 2006 at 11:40 p.m.

Hi,

Thanks for sharing this. I was wondering, cant we find out all textareas and populate xinha_editors with the ids, instead of hardcoding them as you have done here:
<blockquote>
xinha_editors = xinha_editors ? xinha_editors :
[
'id_description'
];
</blockquote>
That should take care of the limitation you talked above?
800 vjelunsgze February 6, 2008 at 11:49 a.m.

vMQ2dB <a href="http://wwvkxecugrrs.com/">wwvkxecugrrs</a>, [url=http://asspyshmzytd.com/]asspyshmzytd[/url], [link=http://zcesizhxtpec.com/]zcesizhxtpec[/link], http://sfnkglfwawiq.com/