| | 1 | == Custom Widgets - TinyMCE == |
| | 2 | |
| | 3 | With the introduction of the newforms module in revision 3944 came the functionality to create custom widgets for forms. Outlined below is the process of creating a custom reusable TinyMCE widget. |
| | 4 | |
| | 5 | To start the custom widget, create a custom_widgets.py file in your project folder |
| | 6 | |
| | 7 | for the TinyMCE widget i used the code below |
| | 8 | |
| | 9 | {{{ |
| | 10 | #!python |
| | 11 | from django.newforms import * |
| | 12 | from django.newforms.widgets import flatatt |
| | 13 | from django.utils.html import escape |
| | 14 | from django.utils.simplejson import * |
| | 15 | |
| | 16 | class TinyMCE(Textarea): |
| | 17 | """ |
| | 18 | TinyMCE widget. requires you include tiny_mce_src.js in your template |
| | 19 | you can customize the mce_settings by overwriting the instance |
| | 20 | mce_settings, or add extra options using update |
| | 21 | """ |
| | 22 | mce_settings = dict( |
| | 23 | mode = "exact", |
| | 24 | theme = "simple", |
| | 25 | theme_advanced_toolbar_location = "top", |
| | 26 | theme_advanced_toolbar_align = "center", |
| | 27 | ) |
| | 28 | |
| | 29 | def update(self, custom): |
| | 30 | return_dict = self.mce_settings.copy() |
| | 31 | return_dict.update(custom) |
| | 32 | return return_dict |
| | 33 | |
| | 34 | def render(self, name, value, attrs=None): |
| | 35 | if value is None: value = '' |
| | 36 | final_attrs = dict(self.attrs, name=name, id=name) |
| | 37 | if attrs: |
| | 38 | final_attrs.update(attrs) |
| | 39 | |
| | 40 | self.mce_settings['elements'] = name |
| | 41 | mce_json = JSONEncoder().encode(self.mce_settings) |
| | 42 | |
| | 43 | return u'<textarea %s >%s</textarea> <script type="text/javascript"> \ |
| | 44 | tinyMCE.init(%s)</script>' % (flatatt(final_attrs), escape(value), mce_json) |
| | 45 | }}} |
| | 46 | |
| | 47 | |
| | 48 | in the views.py file, replace myproject with your project name |
| | 49 | |
| | 50 | |
| | 51 | {{{ |
| | 52 | #!python |
| | 53 | from myproject.custom_widgets import TinyMCE |
| | 54 | from django.newforms import Form |
| | 55 | from django.newforms.widgets import Textarea |
| | 56 | from django.newforms.fields import CharField |
| | 57 | from django.shortcuts import render_to_response |
| | 58 | |
| | 59 | modified_settings = { "auto_resize" : True } |
| | 60 | |
| | 61 | class TestForm(Form): |
| | 62 | #test with custom settings |
| | 63 | test_mce = CharField(widget=TinyMCE()) |
| | 64 | test_mce.widget.mce_settings = test_mce.widget.update(modified_settings) |
| | 65 | |
| | 66 | #test with no custom settings |
| | 67 | another_test = CharField(widget=TinyMCE()) |
| | 68 | |
| | 69 | #plain old textarea |
| | 70 | plain_textarea = CharField(widget=Textarea) |
| | 71 | |
| | 72 | def index(request): |
| | 73 | test_form = TestForm() |
| | 74 | return render_to_response('template.html', {'form': test_form }) |
| | 75 | }}} |
| | 76 | |
| | 77 | in your template file simply add the following, replace http://localhost/ with the location of the tinyMCE source served obviously on your media server. |
| | 78 | |
| | 79 | |
| | 80 | {{{ |
| | 81 | #!xml |
| | 82 | <html> |
| | 83 | <script src="http://localhost/tiny_mce/tiny_mce_src.js"></script> |
| | 84 | <head> |
| | 85 | |
| | 86 | </head> |
| | 87 | <body> |
| | 88 | |
| | 89 | {{ form }} |
| | 90 | |
| | 91 | </body> |
| | 92 | |
| | 93 | <html> |
| | 94 | }}} |
| | 95 | |
| | 96 | |
| | 97 | This implementation isn't perfect by all means [[BR]] |
| | 98 | 1. It requires the template author to include the javascript file.[[BR]] |
| | 99 | 2. tinyMCE.init() is called each time the widget is used, this gives the benefit that you can have multiple tinyMCE text boxes with different settings.[[BR]] |
| | 100 | 3. ????[[BR]] |
| | 101 | |
| | 102 | |
| | 103 | This is as far as I've progressed I haven't yet tested with a Model, validation etc. - if you do please add your experience here. |
| | 104 | |
| | 105 | Any Feedback/Comments please don't hesitate to email me at john.dagostino AT gmail DOT com |