Hi there,
I'm building a cms like system which uses fck for editing content. The next stage in this system is multi lingual support. When editing a page a fck editor is shown for each language supported by the site. To keep things clean I would like the editors for the different languages displayed in tabs. This keeps the pages compact in size. The user is able to switch from one language fck editor to the next via the tabs.
In my solution I use Jquery in combination with the excellent Tabs plugin (http://www.stilbuero.de/2007/02/05/tabs ... sive-ajax/).
Problem is the first tab works fine, the other tabs / editors shrink vertical in size when putting focus to the editor window. This behavior occurs in both IE6 and Firefox (have not tried IE7, would probably be the same).
Below code is partly generated by the FCK helper in the Cake php framework.
Help would be appreciated.
Tanks
-----------------
<div id="editTabs">
<div>
<ul class="tabs-nav">
<li><a href="#tabEng"><span><img src="/img/flags/eng.gif" border="0" align="top" width="16" height="11" alt=""> ENG</span></a></li>
<li><a href="#tabDut"><span><img src="/img/flags/dut.gif" border="0" align="top" width="16" height="11" alt=""> DUT</span></a></li>
<li><a href="#tabFra"><span><img src="/img/flags/fra.gif" border="0" align="top" width="16" height="11" alt=""> FRA</span></a></li>
<li><a href="#tabIta"><span><img src="/img/flags/ita.gif" border="0" align="top" width="16" height="11" alt=""> ITA</span></a></li>
</ul>
</div>
<div>
<div id="tabEng" class="tabs-container">
<textarea name="data[TranslationEng][content]" cols="100" rows="10" id="TranslationEngContent">
gfgfgf
</textarea> <script type="text/javascript">
fckLoader_TranslationEngContent = function () {
var bFCKeditor_TranslationEngContent = new FCKeditor('TranslationEngContent');
bFCKeditor_TranslationEngContent.BasePath = '/js/fckeditor/';
bFCKeditor_TranslationEngContent.ToolbarSet = 'BBsite';
bFCKeditor_TranslationEngContent.Width = 700;
bFCKeditor_TranslationEngContent.Height = 400;
bFCKeditor_TranslationEngContent.Config['DefaultLanguage'] = 'en'
bFCKeditor_TranslationEngContent.ReplaceTextarea();
}
fckLoader_TranslationEngContent();
</script>
</div>
<div id="tabDut" class="tabs-container">
<textarea name="data[TranslationDut][content]" cols="100" rows="10" id="TranslationDutContent">
klkllk
</textarea> <script type="text/javascript">
fckLoader_TranslationDutContent = function () {
var bFCKeditor_TranslationDutContent = new FCKeditor('TranslationDutContent');
bFCKeditor_TranslationDutContent.BasePath = '/js/fckeditor/';
bFCKeditor_TranslationDutContent.ToolbarSet = 'BBsite';
bFCKeditor_TranslationDutContent.Width = 700;
bFCKeditor_TranslationDutContent.Height = 400;
bFCKeditor_TranslationDutContent.Config['DefaultLanguage'] = 'en'
bFCKeditor_TranslationDutContent.ReplaceTextarea();
}
fckLoader_TranslationDutContent();
</script>
</div>
<div id="tabFra" class="tabs-container">
<textarea name="data[TranslationFra][content]" cols="100" rows="10" id="TranslationFraContent">
</textarea> <script type="text/javascript">
fckLoader_TranslationFraContent = function () {
var bFCKeditor_TranslationFraContent = new FCKeditor('TranslationFraContent');
bFCKeditor_TranslationFraContent.BasePath = '/js/fckeditor/';
bFCKeditor_TranslationFraContent.ToolbarSet = 'BBsite';
bFCKeditor_TranslationFraContent.Width = 700;
bFCKeditor_TranslationFraContent.Height = 400;
bFCKeditor_TranslationFraContent.Config['DefaultLanguage'] = 'en'
bFCKeditor_TranslationFraContent.ReplaceTextarea();
}
fckLoader_TranslationFraContent();
</script>
</div>
<div id="tabIta" class="tabs-container">
<textarea name="data[TranslationIta][content]" cols="100" rows="10" id="TranslationItaContent">
</textarea> <script type="text/javascript">
fckLoader_TranslationItaContent = function () {
var bFCKeditor_TranslationItaContent = new FCKeditor('TranslationItaContent');
bFCKeditor_TranslationItaContent.BasePath = '/js/fckeditor/';
bFCKeditor_TranslationItaContent.ToolbarSet = 'BBsite';
bFCKeditor_TranslationItaContent.Width = 700;
bFCKeditor_TranslationItaContent.Height = 400;
bFCKeditor_TranslationItaContent.Config['DefaultLanguage'] = 'en'
bFCKeditor_TranslationItaContent.ReplaceTextarea();
}
fckLoader_TranslationItaContent();
</script>
</div>
</div>
</div>
-----------------
Tue, 07/03/2007 - 23:34
#1
RE: Editor resizes in comb. with Jquery Tabs
The problem is that when FCKeditor is created from a textarea which is not yet visible, it is given a height and width of 0. This appears to be true whether you define a width and height or not.
I have two solutions. The first (easiest) is to not load up the Tabs code until /after/ the FCKeditor instances have been displayed on screen. This is usually okay, as it should only take a millisecond or so for the browser to figure out all the proper widths and heights, then you can run the Tabs code.
The second is more complex. As I said, I wrote my own Tabs component, so I could adapt it to this. In my case, the FCKeditor code is only run on the shown tab, and whenever you go to a new tab, it is run again on just that tab. So, when a new tab is shown, temporarily (too quick for the mind to really notice), the original textarea is shown, before it is replaced by an FCKeditor instance.
This also works with CodePress.