I tried to load CKEDITOR in a jquery tab via ajax. I got problem that only first time the ckeditor is working but when I click on other tab and again got o ckeditor tab its not working. in Load section for tab I put the following code.
load: function(event, ui) {
if(ui.index == 3){ // Checked tab no 4
var instance = CKEDITOR.instances['reditor']; // reditor is text area id, check if instances exists for readitor or not
if(instance){
CKEDITOR.remove(instance); //if existed then remove it
}
CKEDITOR.replace( 'reditor' ); // Create instance for 'reditor'
}
}
in this way we can get rid the problem of “CKEditor instance already exists”
Here is whole configuration
$(document).ready(function () {
var $tabs = $("#tabs").tabs({
alignment: "top",
spinner : false,
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html( "Couldn't load this tab. Please try again.");
},
complete: function(){
}
},
load: function(event, ui) {
if(ui.index == 3){
var instance = CKEDITOR.instances['reditor'];
if(instance){
CKEDITOR.remove(instance);
}
}
},
select: function(e, ui){
$(ui.panel).html('<img src="img/ajax_loader.gif" />'); // Loader after click on each tab
}
});
$tabs.tabs('select', <?=$tab_no?>); // used for selected default tab
});
Here is HTML/PHP (I used cakephp syntax for url ) used “TEXT” in a link to show the loading text on tab otherwise it will not show the loading tabl
<div id="tabs">
<ul>
<li>
<?=$html->link("<span>Information</span>", array("controller" => "listings", "action" => "information", $id), array("escape" => false, "title" => "Information"))?>
</li>
<li>
<?=$html->link("<span>Detail</span>", array("controller" => "listings", "action" => "detail", $id), array("escape" => false))?>
</li>
<li>
<?=$html->link("<span>Peoples</span>", array("controller" => "listing", "action" => "peoples", $id), array("escape" => false))?>
</li>
<li>
<?=$html->link("<span>Enhance</span>", array("controller" => "listings", "action" => "enhance", $id), array("escape" => false))?>
</li>
</ul>
</div>
In this way I did and it work for me 🙂
