There are several possibilities to integrate a WYSIWYG editor under the admin. But what to do if you want a general solution that works with small differences under the admin and your main site? For our eKe Translation Project Management we opted to use WYMEditor, and wrote a couple of snippets to get it properly in the system.

The first step was to load WYMEditor for every textarea on a page. Using jQuery this was done by

$(document).ready(function() { $("textarea").wymeditor({updateSelector: ":submit", updateEvent: "click"}); });

This works fine for a basic editor, but misses two things. First of all, as we build software for the global market, we should be able to specify the language WYMEditor uses. We can specify the current page's language in the html template, and pass that variable into $().wymeditor() as an option.

So we overwrote "admin/base_site.html" to add some javascript. The proper place seems to be the extrahead block, but actually this is false. As admin templates often include {{block.super}} only at the end of their extrahead overwrite, and the javascript above gets included in the extrahead (using the Media class of the given ModelAdmin) we have to add the script before extrahead. A possibility is the extrastyle block.

{% block extrastyle %} {{ block.super }} {% endblock %}

and add the necessary code to our wymeditor loader:

$(document).ready(function() { var wym_options = {updateSelector: ":submit", updateEvent: "click"} $.extend(wym_options, wym_custom); $("textarea").wymeditor(wym_options); });

Even better now, but what about the user frontend? Even the simplest contact us form is greatly enhanced by a well-working and simple WYSIWYG interface. Unfortunately, our current result is a bit confusing to the user as a v1.0 user has no clue what "Containers" and "Classes" might mean. So we should disable these. Similarly, one might prefer hiding the wymeditor logo as well. To achieve these we finally created a default.js file that is included in base.html and admin/base_site.html as well with the following code

varwym_defaults={updateSelector:":submit",updateEvent:"click",logoHtml:'',};

and added to our base.html

<scriptlanguage="JavaScript"type="text/javascript">varwym_custom={lang:'{{ request.LANGUAGE_CODE|lower }}',containersHtml:'',classesHtml:'',}</script>

and finally we initialize the wymeditors using

$(document).ready(function(){varwym_options={}$.extend(wym_options,wym_defaults,wym_custom);$("textarea").wymeditor(wym_options);});

Now everything works like charm. Both our staff and users have a nice user experience, and we did not need much coding either. But we like coding! So to ease our future work we have created a simple Widget that adds the basic wymeditor script and our wymeditor loader script to the form's media

classGUITextAreaWidget(forms.Textarea):passclassMedia:js=("js/jquery.wymeditor.min.js","js/fancyedit.js")

where fancyedit.js contains the wymeditor initializing code.