= Admin Tools = == How to Add WYSIWIG Editor == There are several free WYSIWYG editors, which can be used with Django's admin pages. Some overview and first hand experience can be found [http://lazutkin.com/blog/2005/aug/26/using_tinymce_djangos_admin/ here]. === TinyMCE === Why TinyMCE? Some reasons are given in [http://www.socialistsoftware.com/?p=8 Django and TinyMCE] and [http://lazutkin.com/blog/2005/aug/26/using_tinymce_djangos_admin/ Using TinyMCE with Django's Admin]. Try [http://tinymce.moxiecode.com/example_full.php?example=true examples]. In order to use TinyMCE with Django you have to do three things: 1. Go to http://tinymce.moxiecode.com/ and download TinyMCE. Install it somewhere on your web server. It's better to serve it directly bypassing Django machinery. ''Optional: download TinyMCE compressor. You can use it, if your server supports PHP.'' 2. Create configuration file for TinyMCE. Below is my '''textareas.js''' file: {{{ tinyMCE.init({ mode : "textareas", theme : "advanced", //auto_resize : true, auto_cleanup_word : true, plugins : "table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,zoom,flash,searchreplace,print,contextmenu,fullscreen", theme_advanced_buttons1_add_before : "save,separator", theme_advanced_buttons1_add : "fontselect,fontsizeselect", theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,zoom,separator,forecolor,backcolor", theme_advanced_buttons2_add_before: "cut,copy,paste,separator,search,replace,separator", theme_advanced_buttons3_add_before : "tablecontrols,separator", theme_advanced_buttons3_add : "fullscreen,emotions,iespell,flash,advhr,separator,print", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_path_location : "bottom", plugin_insertdate_dateFormat : "%m/%d/%Y", plugin_insertdate_timeFormat : "%H:%M:%S", extended_valid_elements : "a[name|href|target=_blank|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]", fullscreen_settings : { theme_advanced_path_location : "top" } }); }}} I use advanced theme, and practically all standard plugins, which don't require server support. Mode "textareas" instructs TinyMCE to convert '''all''' textareas to WYSIWYG editors. You can look up all options in [http://tinymce.moxiecode.com/tinymce/docs/index.html TinyMCE Documentation]. 3. Add '''js''' option to admin sections of your model (excerpt from my model): {{{ class Document(meta.Model): # model fields are here class META: admin = meta.Admin( # various admin options are here js = ( '/tiny_mce/tiny_mce.js', '/appmedia/admin/js/textareas.js', ), ) }}} Basically '''js''' option includes tuple items as !JavaScript files in the header of CRUD pages for this model (see [http://www.djangoproject.com/documentation/model_api/#admin-options Django Model Reference / Admin Options]). The first script is the main TinyMCE file. '' If you use TinyMCE compressor, include '/tiny_mce/tiny_mce_gzip.php' instead.'' The second script is your configuration file created in step !#2. That's it. Notes: * TinyMCE toolbars will occupy almost all area of textarea. I don't mind, because when I want to edit text, I use full screen mode. It's a button on toolbar looking like a monitor. * If you want to make more room for editing, you can do two things: * Make textareas bigger: use CSS. See [http://www.djangoproject.com/documentation/admin_css/ Customizing the Django admin interface] for details. Hint: textareas have ids. * Use [http://tinymce.moxiecode.com/tinymce/docs/option_auto_resize.html experimental auto-resize mode]. I don't use it now because it produced annoying flickering. * Toolbars flicker when you move cursor (backspace, left/right arrows, and so on). Strange but useable. * I wish I could have specify different set of tools for inline and full screen modes. It may be possible, but I didn't research it yet. Hints: * Create your text using conventional WYSIWYG editor with all niceties (e.g., Word) and paste the result to TinyMCE. * Go to HTML mode to see generated code. You can change it here to make it perfect. === Xinha === Download Xinha here: http://xinha.python-hosting.com/. Try [http://xinha.python-hosting.com/wiki/Examples example]. See [http://www.socialistsoftware.com/?p=10 Django and Xinha] for details.