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

It looks like some of the CSS classes and HTML structures used by Grappelli have changes since Almflm's solution was written. However, I was able to modify hir solution to work with Grappelli v2.4.7, and simplified the implementation in the process.

Setup

1. Override the relevant template by copying /PATH/TO/grappelli/templates/admin/edit_inline/stacked.html to /PATH/TO/YOURMOD/templates/admin/edit_inline/
2. In your site's settings.py, ensure that YOURMOD is above grappelli in INSTALLED_APPS. Otherwise, Django will continue using the Grappelli version of the template.

Code

Now you just need to make two changes to your copy of stacked.html. Find the block of javascript that begins:

$("#{{ inline_admin_formset.formset.prefix }}-group").grp_inline({

...and make the following changes inside that block:

1. Add an onBeforeAdded function like this (or modify the existing function if one exists, but I didn't have one):

       onBeforeAdded:function(form) {
           // New inlines start as a hidden template with class grp-empty-form.
           // This contains a textarea, which TinyMCE converts correctly, but
           // something about the transformation from template to visible 
           // form breaks TinyMCE, so we need to remove it from the template and 
           // then re-add it after the transformation. 
           // c.f. http://stackoverflow.com/questions/5738173/
           if (tinyMCE != undefined) {
               django.jQuery('.grp-empty-form').find('textarea').each(function() { 
                   var tid = django.jQuery(this).attr("id");
                   tinyMCE.execCommand("mceRemoveControl",false,tid); 
               });
           }
       },
   

2. Add the following to the onAfterAdded function (you should already have one, so be sure to modify the existing one rather than defining a new one!):

           if (tinyMCE != undefined) {
             // re-initialise tinyMCE instances
             deselector = tinyMCE.settings.editor_deselector;
             django.jQuery(form).find('textarea:not(.'+deselector+')').each(function(k,v) {
               var tid = django.jQuery(this).attr('id');
               tinyMCE.execCommand('mceAddControl', false, tid);
             });
           }
           // This line is optional. It just ensures that the new inline appears
           // un-collapsed, even if inlines are collapsed by default
           django.jQuery(form).removeClass("grp-closed").addClass("grp-open");
   

That's it!

EDIT Added the deselector to the onAfterLoad - ensures you can still define a deselector class in a tinymce config file, and inlines will conform to this.