Archive for April, 2009

YUI Rich Text Editor in Django Admin

This ain't exactly rocket science, but it took me an embarrassing amount of time to get there, so I'm posting the code for next time. This will turn a given textarea in your admin area into a WYSIWYG. It's got a fairly small feature set, but that's only because I've stripped most of them out. You can add them back in by taking a look at the documentation. Per the Django docs, create an admin folder under one of your templates directories, then add subfolders for the app and model (though you can do just one if you want it to apply to all forms in the app or do neither to apply to all apps and models in your site) and add this as "change_form.html" (it took me an extra 10 minutes to get this done because I was sure it should be named "change_form.py" in spite of copious amounts of documentation that said otherwise):

  1.  
  2. {% extends "admin/change_form.html" %}
  3.  
  4. {% block extrahead %}{{ block.super }}
  5. <!-- Skin CSS file -->
  6. <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/assets/skins/sam/skin.css">
  7. <!-- Utility Dependencies -->
  8. <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
  9. <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script>
  10. <!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
  11. <script src="http://yui.yahooapis.com/2.5.1/build/container/container_core-min.js"></script>
  12. <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/menu/menu-min.js"></script>
  13. <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/button/button-min.js"></script>
  14. <!-- Source file for Rich Text Editor-->
  15. <script src="http://yui.yahooapis.com/2.5.1/build/editor/editor-beta-min.js"></script>
  16. <script type="text/javascript">
  17. // YUI editor
  18. var editor = new YAHOO.widget.Editor("id_content", {
  19. handleSubmit: true,
  20. toolbar: {
  21. buttonType: 'advanced',
  22. buttons: [
  23. { group: 'fontstyle', label: 'Font',
  24. buttons: [
  25. { type: 'select', label: 'Arial', value: 'fontname',
  26. disabled: true,
  27. menu: [
  28. { text: 'Arial', checked: true },
  29. { text: 'Verdana' }
  30. ]
  31. },
  32. { type: 'spin', label: '10', value: 'fontsize', range: [
  33. 10, 16 ], disabled: true },
  34. { type: 'color', label: 'Font Color', value: 'forecolor', disabled: true }
  35. ]
  36. },
  37. { type: 'separator' },
  38. { group: 'textstyle', label: 'Font Style',
  39. buttons: [
  40. { type: 'push', label: 'Bold CTRL + SHIFT + B', value: 'bold' },
  41. { type: 'push', label: 'Italic CTRL + SHIFT + I', value: 'italic' },
  42. { type: 'push', label: 'Underline CTRL + SHIFT + U', value: 'underline' }
  43. ]
  44. },
  45. { type: 'separator' },
  46. { group: 'indentlist', label: 'Indenting and Lists',
  47. buttons: [
  48. { type: 'push', label: 'Indent', value: 'indent',
  49. disabled: true },
  50. { type: 'push', label: 'Outdent', value: 'outdent',
  51. disabled: true },
  52. { type: 'push', label: 'Create a Bulleted List', value:
  53. 'insertunorderedlist' },
  54. { type: 'push', label: 'Create a Numbered List', value:
  55. 'insertorderedlist' }
  56. ]
  57. },
  58. { type: 'separator' },
  59. { group: 'insertitem', label: 'Link',
  60. buttons: [
  61. { type: 'push', label: 'HTML Link CTRL + SHIFT + L',
  62. value: 'createlink', disabled: true }
  63. ]
  64. }
  65. ]
  66. }
  67. }
  68. );
  69. editor._defaultToolbar.buttonType = 'advanced';
  70. editor.render();
  71. </script>
  72. {% endblock %}
  73.  
  74. {% block bodyclass %}{{ block.super }} yui-skin-sam{% endblock %}
  75.  

Like I said, not rocket science. It adds some CSS & JavaScript includes (which are remotely-hosted, so you don't even have to worry about media roots or how it works locally vs. live) and then a bit to add a class to the body tag for the YUI skin.

Tags:

My Name is Crew

I am posting this because I need to keep track of these things. Dreamt last night Michelle and I put on a community event centered around the retirement of some guy that had been a social worker all his life. After the dance crew came off the stage, there was a PowerPoint presentation of his life that I put together (each slide featured an allegorical photo of a raven) and a country music song. All I remember is:

My name is Crew
My name is Crew
Saving kids is kinda what I do
[a capella]Leading them away from a path of self-destruction . . .

And so on. The ravens were a result of watching a David Attenborough documentary last night and Michelle points out "kinda what I do" is a phrase that Bill Burr repeated in the stand-up show we watched again last night. So that explains a bit of it, but I still don't get where these dreams with original music come from. I must be choking off my creative brain during waking hours. Earlier this week I'd dreamt my friend had walked into a convenience store and declaimed a filthy sonnet in perfect ABAB rhyme scheme explaining why he needed to buy the New York Times Sunday Magazine and not the whole paper.

Tags: