I have 50+ textareas that I am using tinyMCE with. Instead of loading each one I am just initialising them, then activing them later on request
Initialisation
tinyMCE.init({
mode : "none",
theme : "advanced",
theme_advanced_buttons1 : "",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : false,
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : false,
theme_advanced_resizing : true,
auto_focus : false
});
Edit Observer
$('ul span.edit-details').click(function () {
var id = this.id;
id = id.replace('edit-','');
tinyMCE.execCommand('mceToggleEditor',false,'editor-'+id);
});
UPDATE I have also tried
$('ul span.edit-details').click(function () {
var id = this.id;
id = id.replace('edit-','');
if($('#details-'+id).is(":hidden")) {
$('#details-'+id).show();
tinyMCE.execCommand('mceAddControl',false,'editor-'+id);
}
else {
$('#details-'+id).hide();
tinyMCE.execCommand('mceRemoveControl',false,'editor-'+id);
}
});
The problem I have is that when tinyMCE.execCommand('mceToggleEditor',false,'editor-'+id); fires the pages focuses/scrolls to that textarea, even if it is already in the viewport.
Any suggestions on how to stop this?
Thanks!