veni vidi Scripsi

from the WEBLOG

TinyMCE in one of multiple Textarea fields in Admin

When I was working with Django the other day I had a model which contained 3 textareas. I only wanted 2 of the 3 to use TinyMCE for mark-up in the Admin. I worked out how to achieve this and here’s a quick guide.

  1. Install TinyMCE as explained in an earlier post.
  2. Make sure the tiny_mce folder (the one you download from tinymce.moxiecode.com/) is also in you site media js folder (/[sitemedia]/js/tiny_mce/) or change the TINYMCE_JS_URL to the correct folder in your settings.py.
  3. In your settings.py define what you want the default tinymce to look like, for example:
    TINYMCE_DEFAULT_CONFIG = {
    'plugins' : "safari,spellchecker,save,advlink,iespell,paste,xhtmlxtras,",
    'theme': 'advanced',
    'theme_advanced_buttons1': "bold, italic, underline, strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,",
    'theme_advanced_buttons2':"undo,redo,|,link,unlink,anchor,cleanup,help,code,spellchecker",
    'theme_advanced_buttons3':"",
    'theme_advanced_buttons4':"",
    'theme_advanced_toolbar_location' : "top",
    'theme_advanced_toolbar_align' : "left",
    'theme_advanced_statusbar_location' : "bottom",
    'theme_advanced_resizing' : 'true',
    }
  4. In your model admin file add
    from tinymce.widgets import TinyMCE
  5. And to the model’s admin class add:
    def formfield_for_dbfield(self, db_field, **kwargs):
    if db_field.name == '[your_field_name]': # you can add more fields here by using 'or'
    kwargs['widget'] = TinyMCE(attrs={'cols':80, 'rows': 30})
    try:
    del kwargs['request']
    except KeyError:
    pass
    return db_field.formfield(**kwargs)
    return super([model_admin_class_name],self).formfield_for_dbfield(db_field, **kwargs)

June 21, 2010

No Comments »

Tags: , , , , , ,

Category: General

Attached Images:

 

TinyMCE in Django

Update July 27, 2010:

  1. If you get the following error (probably in your shell):
    Exception Value: cannot import name smart_unicode
    check this post for the solution http://code.google.com/p/django-tinymce/issues/detail?id=63.
    In short, in your tinymce folder (that is your django-tinymce installation in the python site-packages) edit the file widgets.py and remove the line that says
    from django.forms.util import smart_unicode
    and after the line that says
    from django.utils import simplejson
    add the following line
    from django.utils.encoding import smart_unicode
    You can see it in the diference file.

Update June 13, 2010:

  1. In Django 1.2 (or the new Django-TinyMCE) some of the TinyMCE plugins don’t work. In order to get TinyMCE to work I highly suggest either using the TinyMCE simple theme or removing all the plugins from the advanced theme and adding the ones you need one by one. The following plugins were safe in the most recent Django 1.2 project I did: “safari, spellchecker, save, advlink, iespell, paste, xhtmlxtras,”.
  2. Last week when I was using my own guide I found out that I had made a mistake in the guide. The mistake is in step 8 and it has been corrected.

So, I’m working with Django again. This blog is still in Wordpress, but won’t be for long.

A while ago when I was working with Django I had a really hard time trying to figure out how to get TinyMCE to work in Django. Now it isn’t difficult, you just have to know how to do it. So I wrote a quick guide on how to make it all work. I’m sure other people will have done this as well, but it took me a while to figure it out, so I thought: the more guides the better :) . Anyway, here it is:

  1. Download the latest TinyMCE from http://tinymce.moxiecode.com (I’m using version 3.2.7 a.t.m.). I used the non-jquery version, haven’t looked at the pros and cons of it, so if you would like to just get it working I suggest you try the normal version first.
  2. Download the latest version of Django-TinyMCE from http://pypi.python.org/pypi/django-tinymce/ (I’m on 1.5 now).
  3. Unzip both packages (in a terminal that’s: tar xzvf django-tinymce-1.5.tar.gz for the django-tinymce tar.gz package -don’t forget to replace the version number-).
  4. Copy tinymce/jscripts/tiny_mce (the first tinymce is the folder you get after unzipping the TinyMCE package) to python/site-packages/django/contrib/admin/media/js/. On a Mac your Python installation is probably in /Library/Python/[version number]/. I’ve therefore put it in /Libary/Python/2.6/site-packages/django/contrib/admin/media/js/ and you will get /Library/Python/2.6/site-packages/django/contrib/admin/media/js/tiny_mce. Note that if you can’t find your python installation it could also be in /sw/lib/.
  5. Go back to the unzipped folder of django-tinymce. CD into the folder and do sudo python setup.py install to install django-tinymce in your python site-packages.
  6. Now, using the examples from http://tinymce.moxiecode.com/examples/full.php create a textareas.js which will define your TinyMCE configuration. When you look at the source of the examples, make sure you only copy the part from tinyMCE.init({ to }); (right before </script>). Because you’re saving it as a .js file you don’t need the rest. Place this textareas.js file in python/site-packages/django/contrib/admin/media/js/tiny_mce/.
  7. Finally put the following line in your urls.py in your Django project: (r’^tinymce/’, include(’tinymce.urls’)),.
  8. Add ‘tiny_mce’, to your installed apps in settings.py of your Django project. Correction: this should be ‘tinymce’ without the underscore.
  9. And for each of the models that has a textarea that you would like to use TinyMCE for, you should put the following class in the admin class of the model: (sorry, can’t do tabs in Wordpress)class Media:“‘”place tab here”‘” js = (’/media/js/tiny_mce/tiny_mce.js’, ‘/media/js/tiny_mce/textareas.js’,)

Note: It’s probably advisable to put your textareas.js in your website media folder rather than the admin media folder, because you’ll probably want to change it on a per site/project basis. That means you will have to change the second path in the Media class in your models’ admin to the correct path. So for example it could be: js = (’/media/js/tiny_mce/tiny_mce.js’, ‘/sitemedia/js/tiny_mce/textareas.js’,) if you specified MEDIA_URL to be ‘/sitemedia/’

Also: Don’t forget to use the ’safe’ filter in your templates, otherwise it won’t render correctly in the browser (see the Django docs for more info: http://docs.djangoproject.com/en/dev/ref/templates/builtins/#safe). You can also use TinyMCE for user-end forms, but in this case be careful with the safe filter. See the Django documentation for more on this.

I hope this is all clear. If you have any questions or remarks, please leave a comment. Don’t forget to dig a bit deeper into the http://tinymce.moxiecode.com website as there is a lot more you can do with TinyMCE.

Good luck and have fun with your new django TinyMCE installation!

October 29, 2009

4 Comments »

Tags: , , , , , ,

Category: General

Attached Images:

 

Welcome!

Hello,

Welcome to my new website. On this website you can find my weblog about all sorts of topics ranging from programming to art to literature and more, art, projects and maybe even more. I was first going to do everything in Django, but due to time restrictions I decided to go for wordpress (yes I know, Django is for web developers who want freedom but have deadlines, but it just wasn’t going to work for me at this time). However it turns out that especially the gallery plugins don’t do what I want them to, so I’ll be writing a new gallery plugin for my website soon. I’ve never really written a plugin, so it might take some time ;) .

A little about me. I’m currently a Dutch third year Computer Science student at the University of York (UK). I’ll soon be graduating with a BEng degree. Next school year I’ll be doing something totally different: an Industrial Design degree (BDes) at the Utrecht School of Arts in the Netherlands.
Other than my educational things I like to draw, dance, play the guitar and violin and work on my computer on all sorts of things. I’m also a proud Linux user, although at the moment I mainly use Mac OS X, so I can program and use Photoshop and the likes at the same time.

Anyway, I hope you’ll enjoy having a look around on my website. And don’t forget you can subscribe to my feed in the sidebar.

Heleen

May 15, 2009

No Comments »

Tags: , , , , , , , ,

Category: General

Attached Images:

 

Sidebar