== Custom Widgets - TinyMCE ==
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.
To start the custom widget, create a custom_widgets.py file in your project folder
for the TinyMCE widget i used the code below
{{{
#!python
from django.newforms import *
from django.newforms.widgets import flatatt
from django.utils.html import escape
from django.utils.simplejson import *
class TinyMCE(Textarea):
"""
TinyMCE widget. requires you include tiny_mce_src.js in your template
you can customize the mce_settings by overwriting the instance
mce_settings, or add extra options using update
"""
mce_settings = dict(
mode = "exact",
theme = "simple",
theme_advanced_toolbar_location = "top",
theme_advanced_toolbar_align = "center",
)
def update(self, custom):
return_dict = self.mce_settings.copy()
return_dict.update(custom)
return return_dict
def render(self, name, value, attrs=None):
if value is None: value = ''
final_attrs = dict(self.attrs, name=name, id=name)
if attrs:
final_attrs.update(attrs)
self.mce_settings['elements'] = name
mce_json = JSONEncoder().encode(self.mce_settings)
return u' ' % (flatatt(final_attrs), escape(value), mce_json)
}}}
in the views.py file, replace myproject with your project name
{{{
#!python
from myproject.custom_widgets import TinyMCE
from django.newforms import Form
from django.newforms.widgets import Textarea
from django.newforms.fields import CharField
from django.shortcuts import render_to_response
modified_settings = { "auto_resize" : True }
class TestForm(Form):
#test with custom settings
test_mce = CharField(widget=TinyMCE())
test_mce.widget.mce_settings = test_mce.widget.update(modified_settings)
#test with no custom settings
another_test = CharField(widget=TinyMCE())
#plain old textarea
plain_textarea = CharField(widget=Textarea)
def index(request):
test_form = TestForm()
return render_to_response('template.html', {'form': test_form })
}}}
in your template file simply add the following, replace http://localhost/ with the location of the tinyMCE source served obviously on your media server.
{{{
#!xml
{{ form }}
}}}
This implementation isn't perfect by all means [[BR]]
1. It requires the template author to include the javascript file.[[BR]]
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]]
3. ????[[BR]]
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.
Any Feedback/Comments please don't hesitate to email me at john.dagostino AT gmail DOT com