<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Standard Xinha Loading Example (Newbie Guide)</title>

  <script src="../XinhaEasy.js" type="text/javascript">
    
    // The following options are, optional...
    xinha_options = 
    {
      // Specify language and skin
      _editor_lang:   'en',         // Language to use
      _editor_skin:   'silva',      // Name of the skin to use (see skins directory for available skins)
      
      // Simply a CSS selector to pick the textarea(s) you want, eg 'textarea'
      //  converts all textarea, or textarea.my-xinha,textarea.your-xinha 
      //  would convert only those textareas with the my-xinha or your-xinha 
      //  classes on them
      xinha_editors:  'textarea',   

      // Plugins can be a default set - 'common', 'minimal', 'loaded'
      //   xinha_plugins: 'minimal'
      //
      // or you can specify the plugins you want exactly
      //   xinha_plugins: [ 'Linker', 'Stylist' ]
      //
      // or you can do both to add extras to the set
      //   xinha_pass_to_php_backend: ['minimal', 'Linker' ]
      xinha_plugins:  [ 'minimal', 'CharCounter', 'Stylist', 'TableOperations', 'FancySelects'],
      
      // The default toolbar can be one of the pre-defined toolbars, 
      //   'default', 'minimal', 'minimal+fonts', 'supermini'
      //   xinha_toolbar: 'minimal+fonts'
      //
      // or you an specify a toolbar structure completely
      //   xinha_toolbar: [ ["popupeditor"],["separator","bold","italic","underline","strikethrough","superscript"] ]
      xinha_toolbar:  'minimal+fonts',
      
      // To specify a stylesheet to load inside the editor (to style the contents
      //  the user is editing), simply specify the path to it here, note that in
      //  this example we use _editor_url to referenec the Xinha directory
      //  you would probably reference it absolutely.
      //
      // Note as with all these options, it's optional, leave it out if you 
      //  don't want to load a stylesheet in the editor
      xinha_stylesheet: _editor_url + 'examples/files/stylist.css', 
      
      // This is where you set the other default configuration globally
      xinha_config:            function(xinha_config) 
      {
        // For example if you are using the stylist plugin you might load your styles here
        if(typeof xinha_config.stylistLoadStylesheet == 'function')
        {
          xinha_config.stylistLoadStylesheet(_editor_url + "examples/files/stylist.css");
        }
      },
      
      // Here is where you can customise configs for each editor area
      xinha_config_specific:   function(xinha_config, textarea)
      {
        // For example, we remove the format drop down from this textarea
        if(textarea.id == 'anotherOne')
        {        
          xinha_config.hideSomeButtons(" formatblock ");
        }
        
        // And for this mini one we will use the "supermini" toolbar
        // and also allow the user to resize if their browser supports that
        // (basically, Chrome and Safari)
        if(textarea.id == 'miniOne')
        {
          xinha_config.resizableEditor = true;
          xinha_config.setToolbar('supermini');
        }
      },
      
      // Here you can limit the plugins to certain editor areas
      //   note that you only can use the plugins you specified 
      //   above in xinha_plugins, you just don't have to use all of 
      //   them but that controls what code gets loaded this contols
      //   which editors get them
      xinha_plugins_specific:  function(xinha_plugins, textarea)
      {
        // For example we do not want the Stylist for the 'anotherOne'
        if(textarea.id == 'anotherOne')
        {
          xinha_plugins.remove('CharCounter');
          //  For more thane one plugin use an array...
          //  xinha_plugins.remove( ['CharCounter','SomethingElse'] );
        }
        
        // And for the 'miniOne' we only want CharCounter        
        if(textarea.id == 'miniOne')
        {
          xinha_plugins.only('CharCounter');
          //  For more thane one plugin use an array...
          //  xinha_plugins.only( ['CharCounter','SomethingElse'] );
        }
      }
    }

  </script>


</head>

<body>
  <h1>Newbie Guide Example</h1>
  <p> This example shows how a more complete usage of Xinha may look, view the source of this page and in the &lt;head&gt; section you will find all the code, mostly it's just comments! </p>
  
  <p>We can see below that some Xinha areas have been created, with different sizes, different toolbars and different plugins.</p>
  
  <div>
    <form onsubmit="alert(this.myTextArea.value); return false;" style="">
    
      <textarea id="firstOne" name="firstOne" style="width:100%;height:10em;">
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
      velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
      ante elementum turpis. Aliquam nisl. Nulla posuere neque non
      tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
      parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
      Curabitur pharetra bibendum lectus.&lt;/p&gt;
      </textarea>

      <!-- Notice that margin/padding on the textarea will not necessarily
           work as expected, so we use a wrapping div to give the margin. -->
           
      <div style="margin-top:10px;">
        <textarea id="anotherOne" name="anotherOne" rows="25" cols="80">
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
        velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
        ante elementum turpis. Aliquam nisl. Nulla posuere neque non
        tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
        parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
        Curabitur pharetra bibendum lectus.&lt;/p&gt;
        </textarea>
      </div>

      <div style="margin-top:10px;">
        <textarea id="miniOne" name="miniOne" style="height:150px;width:320px;">
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
        velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
        ante elementum turpis. Aliquam nisl. Nulla posuere neque non
        tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
        parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
        Curabitur pharetra bibendum lectus.&lt;/p&gt;
        </textarea>
      </div>
      <input type="submit" value="SUBMIT" />
    </form>
  </div>
      
</body>
</html>