site_media/xinha/examples/testbed.html

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!DOCTYPE html
   3      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   4     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   5 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   6 <head>
   7
   8   <!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
   9     --  Xinha example usage.  This file shows how a developer might make use of
  10     --  Xinha, it forms the primary example file for the entire Xinha project.
  11     --  This file can be copied and used as a template for development by the
  12     --  end developer who should simply removed the area indicated at the bottom
  13     --  of the file to remove the auto-example-generating code and allow for the
  14     --  use of the file as a boilerplate.
  15     --
  16     --  $HeadURL: http://svn.xinha.org/trunk/examples/testbed.html $
  17     --  $LastChangedDate: 2008-10-12 19:42:42 +0200 (So, 12. Okt 2008) $
  18     --  $LastChangedRevision: 1084 $
  19     --  $LastChangedBy: ray $
  20     --------------------------------------------------------------------------->
  21
  22   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  23   <title>Example of Xinha</title>
  24   <link rel="stylesheet" href="files/full_example.css" />
  25
  26   <script type="text/javascript">
  27     // You must set _editor_url to the URL (including trailing slash) where
  28     // where xinha is installed, it's highly recommended to use an absolute URL
  29     //  eg: _editor_url = "/path/to/xinha/";
  30     // You may try a relative URL if you wish]
  31     //  eg: _editor_url = "../";
  32     // in this example we do a little regular expression to find the absolute path.
  33     _editor_url  = document.location.href.replace(/examples\/.*/, '')
  34     _editor_lang = "en";      // And the language we need to use in the editor.
  35   </script>
  36
  37   <!-- Load up the actual editor core -->
  38   <script type="text/javascript" src="../XinhaCore.js"></script>
  39
  40   <script type="text/javascript">
  41     xinha_editors = null;
  42     xinha_init    = null;
  43     xinha_config  = null;
  44     xinha_plugins = null;
  45
  46     // This contains the names of textareas we will make into Xinha editors
  47     xinha_init = xinha_init ? xinha_init : function()
  48     {
  49       /** STEP 1 ***************************************************************
  50        * First, what are the plugins you will be using in the editors on this
  51        * page.  List all the plugins you will need, even if not all the editors
  52        * will use all the plugins.
  53        ************************************************************************/
  54
  55       xinha_plugins = xinha_plugins ? xinha_plugins :
  56       [
  57         'CharacterMap', 'SpellChecker', 'Linker'
  58       ];
  59              // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
  60              if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;
  61
  62       /** STEP 2 ***************************************************************
  63        * Now, what are the names of the textareas you will be turning into
  64        * editors?
  65        ************************************************************************/
  66
  67       xinha_editors = xinha_editors ? xinha_editors :
  68       [
  69         'myTextArea'
  70       ];
  71
  72       /** STEP 3 ***************************************************************
  73        * We create a default configuration to be used by all the editors.
  74        * If you wish to configure some of the editors differently this will be
  75        * done in step 4.
  76        *
  77        * If you want to modify the default config you might do something like this.
  78        *
  79        *   xinha_config = new Xinha.Config();
  80        *   xinha_config.width  = 640;
  81        *   xinha_config.height = 420;
  82        *
  83        *************************************************************************/
  84
  85        xinha_config = xinha_config ? xinha_config : new Xinha.Config();
  86        xinha_config.fullPage = true;
  87        xinha_config.CharacterMap.mode = 'panel';
  88 /*
  89        // We can load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL
  90       //  otherwise it won't work!
  91       xinha_config.stylistLoadStylesheet(document.location.href.replace(/[^\/]*\.html/, 'files/stylist.css'));
  92
  93       // Or we can load styles directly
  94       xinha_config.stylistLoadStyles('p.red_text { color:red }');
  95
  96       // If you want to provide "friendly" names you can do so like
  97       // (you can do this for stylistLoadStylesheet as well)
  98       xinha_config.stylistLoadStyles('p.pink_text { color:pink }', {'p.pink_text' : 'Pretty Pink'});
  99 */
 100       /** STEP 3 ***************************************************************
 101        * We first create editors for the textareas.
 102        *
 103        * You can do this in two ways, either
 104        *
 105        *   xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
 106        *
 107        * if you want all the editor objects to use the same set of plugins, OR;
 108        *
 109        *   xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);
 110        *   xinha_editors['myTextArea'].registerPlugins(['Stylist']);
 111        *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
 112        *
 113        * if you want to use a different set of plugins for one or more of the
 114        * editors.
 115        ************************************************************************/
 116
 117       xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
 118
 119       /** STEP 4 ***************************************************************
 120        * If you want to change the configuration variables of any of the
 121        * editors,  this is the place to do that, for example you might want to
 122        * change the width and height of one of the editors, like this...
 123        *
 124        *   xinha_editors.myTextArea.config.width  = 640;
 125        *   xinha_editors.myTextArea.config.height = 480;
 126        *
 127        ************************************************************************/
 128
 129
 130       /** STEP 5 ***************************************************************
 131        * Finally we "start" the editors, this turns the textareas into
 132        * Xinha editors.
 133        ************************************************************************/
 134
 135       Xinha.startEditors(xinha_editors);
 136       window.onload = null;
 137     }
 138
 139     window.onload   = xinha_init;
 140   </script>
 141 </head>
 142
 143 <body>
 144
 145   <form action="javascript:void(0);" id="editors_here" onsubmit="alert(this.myTextArea.value);">
 146  <div>
 147      <textarea id="myTextArea" name="myTextArea" style="width:100%;height:320px;">
 148       &lt;html&gt;
 149       &lt;head&gt;
 150         &lt;title&gt;Hello&lt;/title&gt;
 151         &lt;style type="text/css"&gt;
 152           li { color:red; }
 153         &lt;/style&gt;
 154       &lt;/head&gt;
 155       &lt;body&gt;&lt;span style="color:purple"&gt;
 156       &lt;img src="../images/xinha_logo.gif" usemap="#m1"&gt;
 157       &lt;map name="m1"&gt;
 158       &lt;area shape="rect" coords="137,101,255,124" href="http://www.mydomain.com"&gt;
 159       &lt;/map&gt;
 160
 161       &lt;p&gt;
 162         Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 163         Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
 164         velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
 165         ante elementum turpis.  &lt;span style="color:green"&gt;Aliquam &lt;/span&gt; nisl. Nulla posuere neque non
 166         tellus. Morbi vel nibh. &lt;font face="Arial"&gt;&lt;font color="#009933"&gt;Cum  sociis natoque&lt;/font&gt;&lt;/font&gt; penatibus et magnis dis
 167         parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
 168         Curabitur pharetra bibendum lectus.
 169       &lt;/p&gt;
 170
 171       &lt;ul&gt;
 172         &lt;li style="color:green"&gt; Phasellus et massa sed diam viverra semper.  &lt;/li&gt;
 173         &lt;li&gt; Mauris tincidunt felis in odio.              &lt;/li&gt;
 174         &lt;li&gt; Nulla placerat nunc ut pede.                 &lt;/li&gt;
 175         &lt;li&gt; Vivamus ultrices mi sit amet urna.           &lt;/li&gt;
 176         &lt;li&gt; Quisque sed augue quis nunc laoreet volutpat.&lt;/li&gt;
 177         &lt;li&gt; Nunc sit amet metus in tortor semper mattis. &lt;/li&gt;
 178       &lt;/ul&gt;
 179       &lt;/span&gt;&lt;/body&gt;
 180       &lt;/html&gt;
 181     </textarea>
 182
 183     <input type="submit" /> <input type="reset" />
 184 </div>
 185   </form>
 186   <script type="text/javascript">
 187     document.write(document.compatMode);
 188   </script>
 189 <div>
 190   <a href="#" onclick="xinha_editors.myTextArea.hidePanels();">Hide</a>
 191   <a href="#" onclick="xinha_editors.myTextArea.showPanels();">Show</a>
 192 </div>
 193
 194 </body>
 195 </html>