When I click Add another {{ verbose_name }}
in inline block, displays tinymce-textatea, but all controls and edit are disabled ( no errors in console ). In 3 first textarea's tinymce works properly.
Imho it is init problem.
Code:
#templates\admin\base.html
<script type="text/javascript" src="{% admin_media_prefix %}tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";
var tMCE = tinyMCE.init({
//General otptions
mode : 'textareas',
theme: 'advanced',
readonly : false,
plugins : 'autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template',
// Theme options
theme_advanced_buttons1 : 'save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontsizeselect,|,forecolor,backcolor',
theme_advanced_buttons2 : 'cut,copy,paste,pastetext,pasteword,|,search,replace,|,undo,redo,|,link,unlink,anchor,|,image,media,|,fullscreen,code',
theme_advanced_buttons3 : '',
theme_advanced_toolbar_location : 'top',
theme_advanced_toolbar_align : 'left',
theme_advanced_statusbar_location : 'bottom',
theme_advanced_resizing : true,
file_browser_callback : function(field_name, url, type, win) {
var w = window.open('/elfinder', null, 'width=1000,height=800');
w.tinymceFileField = field_name;
w.tinymceFileWin = win;
}
});
</script>
#admin.py
class PostInline( admin.TabularInline ):
model = Post
readonly_fields = ('created', 'updated')
class ItemAdmin( admin.ModelAdmin ):
inlines = [
PostInline,
]
readonly_fields = ('created', 'updated')
UPDATE:
#base.html
$(document).ready(function(){
tinyMCE.settings = tinyMCE_opt;
$( 'textarea:not(.inline-group textarea)' ).each( function() {
tinyMCE.execCommand( 'mceAddControl', false, this.id );
} );
});
#stacked.html
$(rows).formset({
prefix: "{{ inline_admin_formset.formset.prefix }}",
addText: "{% blocktrans with inline_admin_formset.opts.verbose_name|title as verbose_name %}Add another {{ verbose_name }}{% endblocktrans %}",
formCssClass: "dynamic-{{ inline_admin_formset.formset.prefix }}",
deleteCssClass: "inline-deletelink",
deleteText: "{% trans "Remove" %}",
emptyCssClass: "empty-form",
removed: updateInlineLabel,
added: (function(row) {
initPrepopulatedFields(row);
reinitDateTimeShortCuts();
updateSelectFilter();
updateInlineLabel(row);
$( row ).find( 'textarea' ).each( function() {
tinyMCE.execCommand( 'mceAddControl', false, this.id );
} );
})
});
But appears another problem:
If an error occurred method formset
does not work anymore and inlines textareas is a simple textareas
solution ( thanks Thomas):
#base.html
$(document).ready(function(){
tinyMCE.settings = tinyMCE_opt;
$( 'textarea:not(.inline-group textarea)' ).each( function() {
tinyMCE.execCommand( 'mceAddControl', false, this.id );
} );
});
#stacked.html
$(rows).formset({
prefix: "{{ inline_admin_formset.formset.prefix }}",
addText: "{% blocktrans with inline_admin_formset.opts.verbose_name|title as verbose_name %}Add another {{ verbose_name }}{% endblocktrans %}",
formCssClass: "dynamic-{{ inline_admin_formset.formset.prefix }}",
deleteCssClass: "inline-deletelink",
deleteText: "{% trans "
Remove " %}",
emptyCssClass: "empty-form",
removed: updateInlineLabel,
added: (function (row) {
initPrepopulatedFields(row);
reinitDateTimeShortCuts();
updateSelectFilter();
updateInlineLabel(row);
$(row).find('textarea').each(function () {
tinyMCE.execCommand('mceAddControl', false, this.id);
});
})
});
$('.dynamic-{{ inline_admin_formset.formset.prefix }} textarea').each(function () {
tinyMCE.execCommand('mceAddControl', false, this.id);
});
Unfortunately you need to capture that "new inline" button press and use it to attach mce to the newly created fields yourself. or you could re-init the whole page but that would just be wasteful.
EDIT:
you need to use
django.jquery("#id-of-button").click(function () {
tinyMCE.execCommand('mceAddControl',false,'id-of-new-textarea');
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With