I have managed to easily integrate WYMeditor into Django's administrative interface.
Here is how I did it...
First I copied the wymeditor to my project's static-served files directory, which in my case had an URL prefix of /site/media/
There I put the wymeditor, jquery and a special file admin_textarea.js, that I have written myself consisting of:
$(document).ready(function() { $('head', document).append('<link rel="stylesheet" type="text/css" media="screen" href="/site/media/wymeditor/skins/default/screen.css" />'); $("textarea").wymeditor({ updateSelector: "input:submit", updateEvent: "click" }); });
This file instructs the browser to load an additional WYMeditor's CSS and to convert each <textarea> HTML tag into a WYMeditor.
In each of the Django models that I whished to set WYMeditor for, I have added the following js setting to the Admin section:
class ExampleModel(models.Model): text = models.TextField() # each TextField will have WYM editing enabled class Admin: js = ('/site/media/jquery.js', '/site/media/wymeditor/jquery.wymeditor.js', '/site/media/admin_textarea.js')
That is it. If you wish to use WYM in your own Django app, just follow the steps and replace the /site/media/... with whatever your static media prefix is.
Using the filebrowser application
To integrate Wymeditor with the Django filebrowser, put the code below in a file, set the fb_url variable to point to your filebrowser instance and add the file to your Javascript headers:
<script type="text/javascript" src="/media/wymeditor/plugins/jquery.wymeditor.filebrowser.js"></script>
or in your admin.py:
class Media: js = ('/media/wymeditor/plugins/jquery.wymeditor.filebrowser.js',)
Add the postInitDialog parameter to the Wymeditor initialization:
$('textarea').wymeditor({ postInitDialog: wymeditor_filebrowser });
If you already have a postInitDialog function, you need to put a call to wymeditor_filebrowser inside that function:
$('textarea').wymeditor({ postInitDialog: function (wym, wdw) { // Your code here... // Filebrowser callback wymeditor_filebrowser(wym, wdw); } });
Then you should be able to click on the Filebrowser link to select an image.
Code:
wymeditor_filebrowser = function(wym, wdw) { // the URL to the Django filebrowser, depends on your URLconf var fb_url = '/admin/filebrowser/'; var dlg = jQuery(wdw.document.body); if (dlg.hasClass('wym_dialog_image')) { // this is an image dialog dlg.find('.wym_src').css('width', '200px').attr('id', 'filebrowser') .after('<a id="fb_link" title="Filebrowser" href="#">Filebrowser</a>'); dlg.find('fieldset') .append('<a id="link_filebrowser"><img id="image_filebrowser" /></a>' + '<br /><span id="help_filebrowser"></span>'); dlg.find('#fb_link') .click(function() { fb_window = wdw.open(fb_url + '?pop=1', 'filebrowser', 'height=600,width=840,resizable=yes,scrollbars=yes'); fb_window.focus(); return false; }); } }