WYSIWYG editor in Django Admin

Django

WYSIWYG editor in Django Admin

As awesome as the standard Django admin might be, sometimes you want the textfields to have a little bit more functionality. This is quite simple to achieve. We’ll use WYMeditor in this case, but it should be equally easy with TinyMCE, FCKeditor or any other WYSIWYG editor out there.

  1. First download jQuery and put it in your MEDIA_ROOT or use Google’s AJAX Libraries API:http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
  2. Next, download WYMeditor and put it in your MEDIA_ROOT
  3. Create a JavaScript file “fancyedit.js” with the following Javascript code:// fancyedit.js
    $(document).ready(function() {
      $("#id_FIELDNAME").wymeditor({ // "FIELDNAME" is the name of the field you want to give the wysiwyg features
        updateSelector: "input:submit",
        updateEvent: "click"
      });
    });
  4. Now we have to make sure that the correct JavaScript is loaded when a model has a rich text editor field:import settings
    media = settings.MEDIA_URL
    class FooAdmin(admin.ModelAdmin):
      class Media:
        js = ('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', media+'/js/wymeditor/jquery.wymeditor.js', media+'/js/editor.js')

That should be it!

Discussion

5 comments for “WYSIWYG editor in Django Admin”

  1. This looks straight forward, but I get security issues from the Ajax calls.

    Access to restricted URI denied” code: “1012
    [Break on this error] (function(){var R=/((?:\((?:\([^()]+\)|[...(J,typeof K==="string"?K:K+"px")}})})();
    jquery.min.js (line 19)

    Permission denied to get property HTMLDocument.styleSheets
    [Break on this error] var styles = this._doc.styleSheets[0];

    When testing locally django runs on: http://127.0.0.1:8000/ and my static assets are served from http://127.0.0.1/~christian/
    Do you use any particular settings to run it locally?

    Posted by christian | June 22, 2009, 9:47 am
  2. Firefox (and perhaps other browsers) will never let you access element properties cross-domain. Since the development server is serving on a different port, even if the hostname is the same then Firefox, by default, treats it as two different sources.

    In production, though, things work very smoothly (for example, I’m running django through Apache’s mod_wsgi), as both your django app and the static assets are now in the same domain and on the same port.

    Posted by Jarom McDonald | August 7, 2009, 11:59 pm
  3. Was

    media+’/js/editor.js’

    a typo? Shouldn’t that be:

    media+’/js/fancyedit.js’

    ?

    Posted by Joe Devon | August 8, 2009, 9:55 pm
  4. What does it mean ‘put it in’?

    Should I just copy the tar.gz file to my MEDIA_ROOT and do tar zxvf there?
    Or should I extract it elsewhere and copy in some subset of the entire extracted tree?

    Posted by Robert Vernon Phillps | October 29, 2009, 7:01 pm
  5. doesn’t really matter as long as you put all the necessary files in the MEDIA_ROOT so you can access them

    Posted by Joost | October 29, 2009, 7:34 pm

Post a comment

Categories

  • No categories

Django Hosting:

DjangoDays recommends the following Django hosting provider: