Switching between Textarea and FCK

Hi,

Is there a way I can turn on or off the FCK editor? In other words I would like to add a button that allows me to switch between the original textarea and the FCKEditor.

Can that be done?

Wed, 01/18/2006 - 15:45

finn_hakansson

Joined: 01/09/2006

Posts: 3

RE: Switching between Textarea and FCK

I'm looking for the same feature. TinyMCE lets you do it with a function called removeMCEControl().

Tue, 01/24/2006 - 08:05

finn_hakansson

Joined: 01/09/2006

Posts: 3

RE: Switching between Textarea and FCK

Hi,

After looking at how Geeklog had done it, I came up with the more general solution below. It is made as the other testcases in the FCKeditor distribution.

Regards,

Finn Hakansson

----------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
   <head>
      <title>FCKeditor - Sample</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="robots" content="noindex, nofollow">
      <link href="testcases.css" rel="stylesheet" type="text/css">
      <script type="text/javascript" src="../fckeditor.js"></script>
      <script language="javascript">


// This the object that holds information about all editors.
var editor_sets = new Object();

// This is how to register a new TEXTAREA/FCKeditor pair.
// You can add as many as you wish.
editor_sets['XYZ'] = 
{
  text_id : 'regular_editor',
  html_id : 'fck_editor'
};


function new_editor(name)
{
  var e = new FCKeditor(name);
  //e.Config["CustomConfigurationsPath"] = "../fckconfig_my_settings.js";
  //e.ToolbarSet = "MyToolbar";
  e.Width = "700";
  e.Height = "700";
  e.BasePath = "/FCKeditor/";
  e.Create();
}


function toggle_editor(name)
{
  var editor_frame = document.getElementById(name + '___Frame');
  var editor_source = editor_frame.contentWindow.document.getElementById('eEditorArea');
  var x = ['', 'none'];
  var i = 0;

  if (document.getElementById(editor_sets[name]['text_id']).style.display == "")
  {
    var content = document.getElementById(name + '_textarea').value;
    editor_source.contentWindow.document.body.innerHTML = content;
    i++;
  }
  else
  {
    var content = editor_source.contentWindow.document.body.innerHTML;
    document.getElementById(name + '_textarea').value = content;
  }

  document.getElementById(editor_sets[name]['text_id']).style.display = x[i++];
  document.getElementById(editor_sets[name]['html_id']).style.display = x[i%2];

  // This is a hack for Gecko... it stops editing when the editor is hidden.
  if ( !document.all )
  {
    var ed = FCKeditorAPI.GetInstance(name);
    if (ed.EditMode == FCK_EDITMODE_WYSIWYG)
    {
      ed.MakeEditable();
    }
  }
};

      </script>
   </head>
   <body>
      <h1 id="Prova">FCKeditor - Test 011</h1>
      <P>
         <STRONG>Expected results</STRONG> : The editor must still work when hidding it 
         programmatically (through javascript).<BR>
         <STRONG>Configurations</STRONG>: Default<BR>
         <STRONG>Steps to&nbsp;Reproduce</STRONG>:
      </P>
      <OL>
         <LI>
         Wait for the page to load.
         <LI>
         Insert some text.
         <LI>
         Click the "FCKeditor" link.
         <LI>
         Type some text in the FCKeditor.
         <LI>
         Click the "Regular Textarea" link.
         <LI>
         Hit the "Submit" and check the posted HTML.
         <LI>
         Close the "Submit" window.
         <LI>
         Hit the "Show Editor" button.
         </LI>
      </OL>
      <P>
         <hr>
      <P></P>
      <form action="sampleposteddata.asp" method="post" target="_blank">

         <div id="regular_editor">
                        <table cols="1" rows="2" border="1">
         <tr>
         <td>
           <table id="upper_row_textarea" cols="2" rows="1">
           <tr>
             <td style="text-decoration: underline">Regular Textarea</td>
             <td><a href="javascript: toggle_editor('XYZ');">FCKeditor</a></td>
           </tr>
           </table>
         </td>
         </tr>
         <tr>
         <td>
           <textarea id="XYZ_textarea" cols=80 rows=30><b>Some</b> text to start with.</textarea>
         </td>
         </tr>
         </table>
         </div>

         <div id="fck_editor" style="display:none">
         <table cols="1" rows="2" border="1">
         <tr>
         <td>
           <table id="upper_row_FCKeditor" cols="2" rows="1">
           <tr>
             <td><a href="javascript: toggle_editor('XYZ');">Regular Textarea</a></td>
             <td style="text-decoration: underline">FCKeditor</td>
           </tr>
           </table>
         </td>
         </tr>
         <tr>
         <td border="3">
           <script type="text/javascript">
             new_editor('XYZ');
           </script>
         </td>
         </tr>
         </table>
         </div>
         <br>
         <input type="submit" value="Submit">
      </form>
   </body>
</html>