multiples languages vs multiples editors

Hello to all

I have to do a website with 4 languages (FR,UK,SP,DE).

I can easily put 4 editors on the same page but i do not like this as is so heavy ! (and not beautiful --> i m a woman so you understand). Is there a possibilty to have one text editor with 4 tabs or something like that.

Thanks in advance to all
Best regards
Sophie
edit : sorry but I post a similar topic before but on the wrong forum, this one is the good one

Thu, 01/17/2008 - 09:31

phoelis

Joined: 16/01/2008

Posts: 7

Re: multiples languages vs multiples editors

Last update : 16 /01/2008

I fond a solution based on hidden div

I first create my four instances.

<div name="lang_fr" id="lang_fr" style="display:inline">
            <?php 
            $oFCKeditor1 = new FCKeditor('fr_language') ;
            $oFCKeditor1->BasePath = '../fckeditor/';
            $oFCKeditor1->Value = '';
            $oFCKeditor1->Height = "200" ; 
            
            $oFCKeditor1->Create() ;
            ?>

      </div>
<div name="lang_sp" id="lang_sp" style="display:inline">
            <?php 
            $oFCKeditor1 = new FCKeditor('sp_language') ;
            $oFCKeditor1->BasePath = '../fckeditor/';
            $oFCKeditor1->Value = '';
            $oFCKeditor1->Height = "200" ; 
            
            $oFCKeditor1->Create() ;
            ?>

      </div>
...

after that I had on my html pages href regarding each languages and calling a javascript function

...
<td><a href="#" onclick="changediv(1);return false;">FR</a> <a href="#" onclick="changediv(2);return false;">UK</a> <a href="#" onclick="changediv(3);return false;">SP</a>...</td>
...

javascript function

function changediv(data){

//alert ("ici");

if (data == 1)
{
document.getElementById('expl_fr').style.display='inline';
document.getElementById('expl_uk').style.display='none';
document.getElementById('expl_sp').style.display='none';
document.getElementById('expl_de').style.display='none';

var editor = FCKeditorAPI.GetInstance('lang_fr');
  editor.EditorDocument.designMode = "on";
}


if (data == 2)
{
document.getElementById('expl_fr').style.display='none';
document.getElementById('expl_uk').style.display='inline';
document.getElementById('expl_sp').style.display='none';
document.getElementById('expl_de').style.display='none';

var editor = FCKeditorAPI.GetInstance('lang_fr');
  editor.EditorDocument.designMode = "on";
}

...

}

Of course it s not cross browser as I do have issues with IE7, but i m still working on it, will come back with last update
regards all
Sophie

Tue, 01/22/2008 - 23:36

dantahoua

Joined: 22/01/2008

Posts: 2

Re: multiples languages vs multiples editors

Is your solution working? I'm trying to do the same with Jquery and ui.tabs, suppose to work in every browser... Keep me in touch.

Wed, 01/23/2008 - 16:09

phoelis

Joined: 16/01/2008

Posts: 7

Re: multiples languages vs multiples editors

hello

Yes I had to do some changes some stuff but it's work !! tested on IE6 ,IE7 and Firefox.

first of all on header you add :

<script language="JavaScript" type="text/JavaScript">
   var oFCKeditor1;
   var oFCKeditor2;
   var oFCKeditor3;


window.onload = function()
{
   var sBasePath = '../fckeditor/' ;
  // var sToolBar = 'Mytestbar';
   var sHeight = '400';
 
   
   oFCKeditor1 = new FCKeditor( 'txt_expl_fr' ) ;
   oFCKeditor1.BasePath   = sBasePath ;
   oFCKeditor1.Height   = sHeight ;
   //oFCKeditor1.ToolbarSet  = sToolBar;
   oFCKeditor1.ReplaceTextarea() ;
   
   oFCKeditor2 = new FCKeditor( 'txt_expl_nl' ) ;
   oFCKeditor2.BasePath   = sBasePath ;
   oFCKeditor2.Height   = sHeight ;
   //oFCKeditor2.ToolbarSet  = sToolBar;
   oFCKeditor2.ReplaceTextarea() ;
   
   oFCKeditor3 = new FCKeditor( 'txt_expl_en' ) ;
   oFCKeditor3.BasePath   = sBasePath ;
   oFCKeditor3.Height   = sHeight ;
   //oFCKeditor3.ToolbarSet  = sToolBar;
   oFCKeditor3.ReplaceTextarea() ;

}

function changediv(data){

if (data == 1) //fr
{
document.getElementById("expl_fr").style.display="block";
document.getElementById("expl_nl").style.display="none";
document.getElementById("expl_en").style.display="none";

document.getElementById("bg_lang_fr").style.backgroundImage="url(\'../images/bg_onglet_on.gif\')"; //images ON
document.getElementById("bg_lang_nl").style.backgroundImage="url(\'../images/bg_onglet_off.gif\')"; //images OFF
document.getElementById("bg_lang_en").style.backgroundImage="url(\'../images/bg_onglet_off.gif\')"; //images OFF

}


if (data == 2) //nl
{
document.getElementById("expl_fr").style.display="none";
document.getElementById("expl_nl").style.display="block";
document.getElementById("expl_en").style.display="none";

document.getElementById("bg_lang_fr").style.backgroundImage="url(\'../images/bg_onglet_off.gif\')";
document.getElementById("bg_lang_nl").style.backgroundImage="url(\'../images/bg_onglet_on.gif\')";
document.getElementById("bg_lang_en").style.backgroundImage="url(\'../images/bg_onglet_off.gif\')";
}

if (data == 3)//en
{
document.getElementById("expl_fr").style.display="none";
document.getElementById("expl_nl").style.display="none";
document.getElementById("expl_en").style.display="block";

document.getElementById("bg_lang_fr").style.backgroundImage="url(\'../images/bg_onglet_off.gif\')";
document.getElementById("bg_lang_nl").style.backgroundImage="url(\'../images/bg_onglet_off.gif\')";
document.getElementById("bg_lang_en").style.backgroundImage="url(\'../images/bg_onglet_on.gif\')";
}

HTML code


<td colspan="2">
      <div id="expl_fr" style="display:block">
         <textarea id="txt_expl_fr" name="txt_expl_fr" cols="45" rows="16" ><?php echo $content_expl_fr ?></textarea>
      </div>
         <div id="expl_nl" style="display:none">   
         <textarea id="txt_expl_nl" name="txt_expl_nl" cols="45" rows="16" ><?php echo $content_expl_nl ?></textarea>
         </div>
      <div id="expl_en" style="display:none">
         <textarea id="txt_expl_en" name="txt_expl_en" cols="45" rows="16" ><?php echo $content_expl_en ?></textarea>
      </div>
      </td>

Hope that can help you