1

I'm using django-tinymce and HTML5 Boilerplate (H5BP) with my Django application. Per the wise suggestion of H5BP, I have placed my jQuery loads at the bottom of my body. I attach a TinyMCE editor to my form fields with something like this:

    widgets = {
        'content': TinyMCE(attrs={'cols': 40, 'rows': 15}),
    }

Unfortunately, django-tinymce tries to access jQuery via tags attched to my forms and formsets prior to jQuery being loaded.

Is there a way to get django-tinymce to play nice with jQuery when it is loaded at the bottom of the page? I'd rather not have to load scripts in prior to page rendering.

Here is an example form table row:

<td>
<textarea rows="15" cols="40" name="form-0-content" id="id_form-0-content"></textarea>
<script type="text/javascript">tinyMCE.init({"spellchecker_languages": "Arabic=ar,Azerbaijani=az,Bulgarian=bg,Bengali=bn,Bosnian=bs,Catalan=ca,Czech=cs,Welsh=cy,Danish=da,German=de,Greek=el,+English / British English=en,Esperanto=eo,Spanish / Argentinian Spanish / Mexican Spanish / Nicaraguan Spanish=es,Estonian=et,Basque=eu,Persian=fa,Finnish=fi,French=fr,Frisian=fy,Irish=ga,Galician=gl,Hebrew=he,Hindi=hi,Croatian=hr,Hungarian=hu,Indonesian=id,Icelandic=is,Italian=it,Japanese=ja,Georgian=ka,Kazakh=kk,Khmer=km,Kannada=kn,Korean=ko,Lithuanian=lt,Latvian=lv,Macedonian=mk,Malayalam=ml,Mongolian=mn,Norwegian Bokmal=nb,Nepali=ne,Dutch=nl,Norwegian Nynorsk=nn,Punjabi=pa,Polish=pl,Portuguese / Brazilian Portuguese=pt,Romanian=ro,Russian=ru,Slovak=sk,Slovenian=sl,Albanian=sq,Serbian / Serbian Latin=sr,Swedish=sv,Swahili=sw,Tamil=ta,Telugu=te,Thai=th,Turkish=tr,Tatar=tt,Ukrainian=uk,Urdu=ur,Vietnamese=vi,Simplified Chinese / Traditional Chinese=zh", "elements": "id_form-0-content", "theme_advanced_buttons3": "forecolorpicker,fontselect,fontsizeselect", "custom_undo_redo_levels": 10, "skin": "o2k7", "cleanup_on_startup": true, "language": "en", "theme_advanced_buttons1": "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect", "directionality": "ltr", "theme_advanced_buttons2": "bullist,numlist,|,outdent,indent,|,undo,redo,|,hr", "theme": "advanced", "strict_loading_mode": 1, "mode": "exact"})</script>
</td>
Erik
  • 7,479
  • 8
  • 62
  • 99

1 Answers1

0

Just place your tinyMCE.init({...}) inside jQuery's 'onDocumentReady' : 

$(function() {
    tinyMCE.init({"spellchecker_languages": "Arabic=ar,Azerbaijani=az,Bulgarian=bg,Bengali=bn,Bosnian=bs,Catalan=ca,Czech=cs,Welsh=cy,Danish=da,German=de,Greek=el,+English / British English=en,Esperanto=eo,Spanish / Argentinian Spanish / Mexican Spanish / Nicaraguan Spanish=es,Estonian=et,Basque=eu,Persian=fa,Finnish=fi,French=fr,Frisian=fy,Irish=ga,Galician=gl,Hebrew=he,Hindi=hi,Croatian=hr,Hungarian=hu,Indonesian=id,Icelandic=is,Italian=it,Japanese=ja,Georgian=ka,Kazakh=kk,Khmer=km,Kannada=kn,Korean=ko,Lithuanian=lt,Latvian=lv,Macedonian=mk,Malayalam=ml,Mongolian=mn,Norwegian Bokmal=nb,Nepali=ne,Dutch=nl,Norwegian Nynorsk=nn,Punjabi=pa,Polish=pl,Portuguese / Brazilian Portuguese=pt,Romanian=ro,Russian=ru,Slovak=sk,Slovenian=sl,Albanian=sq,Serbian / Serbian Latin=sr,Swedish=sv,Swahili=sw,Tamil=ta,Telugu=te,Thai=th,Turkish=tr,Tatar=tt,Ukrainian=uk,Urdu=ur,Vietnamese=vi,Simplified Chinese / Traditional Chinese=zh", "elements": "id_form-0-content", "theme_advanced_buttons3": "forecolorpicker,fontselect,fontsizeselect", "custom_undo_redo_levels": 10, "skin": "o2k7", "cleanup_on_startup": true, "language": "en", "theme_advanced_buttons1": "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect", "directionality": "ltr", "theme_advanced_buttons2": "bullist,numlist,|,outdent,indent,|,undo,redo,|,hr", "theme": "advanced", "strict_loading_mode": 1, "mode": "exact"})
});
Loïc
  • 11,804
  • 1
  • 31
  • 49