WYSIWYG Editor for Django

Lately I’ve been working on CMS like application for a news portal and one of the major features include integrating WYSIWYG editor to enable journalists post news online with ease. With almost zero expertise in Javascript, I thought this will be a difficult activity but it turned out to be very easy and took less than an hour to integrate once we shortlisted on which editor we will be using.

We have looked at TinyMCE, FCKeditor and WYMeditor and finally decided to go with WYMeditor for many reasons which can be debated and importantly it fulfills all the features we need at this point of time. Integrating WYMeditor in django is easy, for now we have integrated this in admin ( django.contrib.admin )  and we are planning to roll this out for users too in future. Below steps had worked for me and I think it should work for everyone.

  • Download jQeury and copy it to somewhere on to MEDIA_ROOT so it can be accessed from browser. for eg., media.example.com/templates/js/jquery.js
  • Download WYMeditor and extract it to somewhere on MEDIA_ROOT, so all files under wymeditor directory can be accessed. for eg., media.example.com/templates/js/wymeditor/jquery.wymeditor.pack.js
  • Create another javascript file to initialize editor on fields you need as shown below.
    // File Name: editor.js
     
    $(document).ready(function() {
        $("#id_content").wymeditor({ // assuming content is field name with TextField.
            updateSelector: "input:submit", //without this line and next line, you will be able to see editor but content will not be passed through POST.
            updateEvent:    "click"
        });
    });
  • Add all jquery.js, jquery.wymeditor.js and editor.js javascript files to ModelAdmin for models which you need Editor using admin Media class as shown below
    import settings
    media = settings.MEDIA_URL
    class ArticleAdmin(admin.ModelAdmin):
        #Your JS file paths may vary
        class Media:
            js = (media+'templates/js/jquery.js', media+'templates/js/wymeditor/jquery.wymeditor.js', media+'templates/js/editor.js')

That’s it, reload the admin page and you should see a WYMeditor.

It worked straightaway on localhost where I’m using django.views.static.serve to serve static files but when I moved this to production I had few problems with editor loading from media subdomain throwing error in firebug ( WYMeditor: error while parsing language file and to avoid the same I manually loaded lang file as well. )

One thought on “WYSIWYG Editor for Django

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>