Changes between Version 3 and Version 4 of CustomWidgetsTinyMCE


Ignore:
Timestamp:
Nov 16, 2006, 3:27:51 AM (17 years ago)
Author:
John D'Agostino <john.dagostino@…>
Comment:

updated with changes to trunk

Legend:

Unmodified
Added
Removed
Modified

  • CustomWidgetsTinyMCE

    v3 v4  
    55To start the custom widget, create a custom_widgets.py file in your project folder
    66
    7 for the TinyMCE widget i used the code below
     7for the TinyMCE widget utilise the code below
    88
    99{{{
    … …  
    1111from django.newforms import *
    1212from django.newforms.widgets import flatatt
     13from django.newforms.util import smart_unicode
    1314from django.utils.html import escape
    1415from django.utils.simplejson import *
    … …  
    1718    """
    1819    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
     20    you can customize the mce_settings by overwriting instance mce_settings,
     21    or add extra options using update_settings
    2122    """
     23   
    2224    mce_settings = dict(
    2325        mode = "exact",
    … …  
    2729    )   
    2830             
    29     def update(self, custom):
     31    def update_settings(self, custom):
    3032        return_dict = self.mce_settings.copy()
    3133        return_dict.update(custom)
    … …  
    3436    def render(self, name, value, attrs=None):
    3537        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
     38        value = smart_unicode(value)
     39        final_attrs = self.build_attrs(attrs, name=name)
     40                   
     41        self.mce_settings['elements'] = "id_%s" % name
    4142        mce_json = JSONEncoder().encode(self.mce_settings)
    4243       
    43         return u'<textarea %s >%s</textarea> <script type="text/javascript"> \
    44                  tinyMCE.init(%s)</script>' % (flatatt(final_attrs), escape(value), mce_json)
     44        return u'<textarea%s>%s</textarea> <script type="text/javascript">\
     45                tinyMCE.init(%s)</script>' % (flatatt(final_attrs), escape(value), mce_json)
    4546}}}
    4647
    4748
    48 in the views.py file, replace myproject with your project name
     49in the views.py file, import the custom_widget.py file (replace myproject below) and create a form which will use the new TinyMCE widget.
    4950
    5051
    … …  
    5758from django.shortcuts import render_to_response
    5859
    59 modified_settings = { "auto_resize" : True }
     60cust = dict( auto_resize = True )
    6061
    6162class TestForm(Form):
    6263    #test with custom settings
    6364    test_mce = CharField(widget=TinyMCE())
    64     test_mce.widget.mce_settings = test_mce.widget.update(modified_settings)
    65 
    66     #test with no custom settings   
     65    test_mce.widget.mce_settings = test_mce.widget.update_settings(cust)
     66    #test with no custom settings
    6767    another_test = CharField(widget=TinyMCE())
    68 
    6968    #plain old textarea
    7069    plain_textarea = CharField(widget=Textarea)
    7170
    7271def index(request):
    73     test_form = TestForm()
    74     return render_to_response('template.html', {'form': test_form })
     72    test_form = TestForm(auto_id='id_%s')
     73    return render_to_response('index.html', {'test_form': test_form })
    7574}}}
    7675
    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.
     76In your template file simply add the following, replace http://localhost/ with the location of the tinyMCE source served on your media server.
    7877
    7978
    … …  
    8786<body>
    8887
    89 {{ form }}
     88<table>
     89{{ test_form.as_table }}
     90</table>
    9091
    9192</body>
    … …  
    9596
    9697
    97 This implementation isn't perfect by all means
    98  1. It requires the template author to include the javascript file.
    99  1. 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.
    100 
    101 
    102 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.
    103 
    104 Any Feedback/Comments please don't hesitate to email me at john.dagostino AT gmail DOT com
     98This implementation has the following flaw
     99 1. It requires the template author to include the javascript source in every template which displays a TinyMCE widget.
Back to Top