Django Grappelli Tabular Inline add new row TinyMCE textfield not editable

Question

I am using django Grappelli skin for my project.

I have a ModelAdmin with tabular inline function.

I use extra = 0 to prevent auto insert blank row, when the pag

Answer 1

I didn't have time to look into this more thoroughly, so I'm pretty sure there's a better solution, but this seems to work for me (tested with django-grappelli 2.3.5 and django-tinymce 1.5.1a2.

I'm assuming that you are using stacked inlines.

You have to override a template from grappelli, templates/admin/edit_inline/stacked.html. Inside the for-loop iterating over inline_admin_formset|formsetsort:sortable_field_name, right after the nested for-loop iterating over inline_admin_form, add this snippet:

{% if forloop.last %}
  
{% endif %}

it should disable tinyMCE controls for the textarea elements in the hidden 'empty-form', initialized by inline javascript rendered for the tinyMCE widget(s).

somewhere around the line 133 in the original grappelli template you'll see an invocation of grp_inline(). Add/modify the arguments:

$("#{{ inline_admin_formset.formset.prefix }}-group").grp_inline({
  prefix: "{{ inline_admin_formset.formset.prefix }}",
  onBeforeRemoved: function(f) {
    if (tinyMCE != undefined) {
      // make sure tinyMCE instances in empty-form are inactive
      django.jQuery('textarea', '.empty-form').each(function() {
        tinyMCE.execCommand('mceRemoveControl', false, django.jQuery(this).attr('id'));
      });
    }
  },
  [...]
  onAfterAdded: function(form) {
    if (tinyMCE != undefined) {
      // re-initialise tinyMCE instances
      $('textarea', form).each(function(k,v) {
        var tid = $(this).attr('id');
        tinyMCE.execCommand('mceRemoveControl', false, tid);
        tinyMCE.execCommand('mceAddControl', false, tid);
      });
      // make sure tinyMCE instances in empty-form are inactive
      django.jQuery('textarea', '.empty-form').each(function() {
        tinyMCE.execCommand('mceRemoveControl', false, django.jQuery(this).attr('id'));
      });
    }
    [...]
  }
  [...]

If you use sortables, you'd also want to disable tinyMCE controls on textareas of the inline being dragged. Look for the sortable() initialisation, and modify the 'start' callback:

start: function(evt, ui) {
  ui.placeholder.height(ui.item.height() + 12);
  if (tinyMCE != undefined) {
    // make sure tinyMCE instances in empty-form are inactive
    $('textarea', ui.item).each(function(k,v) {
      var tid = $(this).attr('id');
      tinyMCE.execCommand('mceRemoveControl', false, tid);
    });
  }
},
[...]

This should give the rough idea how to work around this pesky problem...