source: trunk/examples/Newbie.html @ 1421

Last change on this file since 1421 was 1420, checked in by gogo, 20 months ago

A new Newbie Guide example.

File size: 6.8 KB
Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2<html>
3<head>
4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5  <title>Standard Xinha Loading Example (Newbie Guide)</title>
6
7  <script src="../XinhaEasy.js" type="text/javascript">
8   
9    // The following options are, optional...
10    xinha_options =
11    {
12      // Specify language and skin
13      _editor_lang:   'en',         // Language to use
14      _editor_skin:   'silva',      // Name of the skin to use (see skins directory for available skins)
15     
16      // Simply a CSS selector to pick the textarea(s) you want, eg 'textarea'
17      //  converts all textarea, or textarea.my-xinha,textarea.your-xinha
18      //  would convert only those textareas with the my-xinha or your-xinha
19      //  classes on them
20      xinha_editors:  'textarea',   
21
22      // Plugins can be a default set - 'common', 'minimal', 'loaded'
23      //   xinha_plugins: 'minimal'
24      //
25      // or you can specify the plugins you want exactly
26      //   xinha_plugins: [ 'Linker', 'Stylist' ]
27      //
28      // or you can do both to add extras to the set
29      //   xinha_pass_to_php_backend: ['minimal', 'Linker' ]
30      xinha_plugins:  [ 'minimal', 'CharCounter', 'Stylist', 'TableOperations', 'FancySelects'],
31     
32      // The default toolbar can be one of the pre-defined toolbars,
33      //   'default', 'minimal', 'minimal+fonts', 'supermini'
34      //   xinha_toolbar: 'minimal+fonts'
35      //
36      // or you an specify a toolbar structure completely
37      //   xinha_toolbar: [ ["popupeditor"],["separator","bold","italic","underline","strikethrough","superscript"] ]
38      xinha_toolbar:  'minimal+fonts',
39     
40      // To specify a stylesheet to load inside the editor (to style the contents
41      //  the user is editing), simply specify the path to it here, note that in
42      //  this example we use _editor_url to referenec the Xinha directory
43      //  you would probably reference it absolutely.
44      //
45      // Note as with all these options, it's optional, leave it out if you
46      //  don't want to load a stylesheet in the editor
47      xinha_stylesheet: _editor_url + 'examples/files/stylist.css',
48     
49      // This is where you set the other default configuration globally
50      xinha_config:            function(xinha_config)
51      {
52        // For example if you are using the stylist plugin you might load your styles here
53        if(typeof xinha_config.stylistLoadStylesheet == 'function')
54        {
55          xinha_config.stylistLoadStylesheet(_editor_url + "examples/files/stylist.css");
56        }
57      },
58     
59      // Here is where you can customise configs for each editor area
60      xinha_config_specific:   function(xinha_config, textarea)
61      {
62        // For example, we remove the format drop down from this textarea
63        if(textarea.id == 'anotherOne')
64        {       
65          xinha_config.hideSomeButtons(" formatblock ");
66        }
67       
68        // And for this mini one we will use the "supermini" toolbar
69        // and also allow the user to resize if their browser supports that
70        // (basically, Chrome and Safari)
71        if(textarea.id == 'miniOne')
72        {
73          xinha_config.resizableEditor = true;
74          xinha_config.setToolbar('supermini');
75        }
76      },
77     
78      // Here you can limit the plugins to certain editor areas
79      //   note that you only can use the plugins you specified
80      //   above in xinha_plugins, you just don't have to use all of
81      //   them but that controls what code gets loaded this contols
82      //   which editors get them
83      xinha_plugins_specific:  function(xinha_plugins, textarea)
84      {
85        // For example we do not want the Stylist for the 'anotherOne'
86        if(textarea.id == 'anotherOne')
87        {
88          xinha_plugins.remove('CharCounter');
89          //  For more thane one plugin use an array...
90          //  xinha_plugins.remove( ['CharCounter','SomethingElse'] );
91        }
92       
93        // And for the 'miniOne' we only want CharCounter       
94        if(textarea.id == 'miniOne')
95        {
96          xinha_plugins.only('CharCounter');
97          //  For more thane one plugin use an array...
98          //  xinha_plugins.only( ['CharCounter','SomethingElse'] );
99        }
100      }
101    }
102
103  </script>
104
105
106</head>
107
108<body>
109  <h1>Newbie Guide Example</h1>
110  <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>
111 
112  <p>We can see below that some Xinha areas have been created, with different sizes, different toolbars and different plugins.</p>
113 
114  <div>
115    <form onsubmit="alert(this.myTextArea.value); return false;" style="">
116   
117      <textarea id="firstOne" name="firstOne" style="width:100%;height:10em;">
118      &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
119      Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
120      velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
121      ante elementum turpis. Aliquam nisl. Nulla posuere neque non
122      tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
123      parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
124      Curabitur pharetra bibendum lectus.&lt;/p&gt;
125      </textarea>
126
127      <!-- Notice that margin/padding on the textarea will not necessarily
128           work as expected, so we use a wrapping div to give the margin. -->
129           
130      <div style="margin-top:10px;">
131        <textarea id="anotherOne" name="anotherOne" rows="25" cols="80">
132        &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
133        Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
134        velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
135        ante elementum turpis. Aliquam nisl. Nulla posuere neque non
136        tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
137        parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
138        Curabitur pharetra bibendum lectus.&lt;/p&gt;
139        </textarea>
140      </div>
141
142      <div style="margin-top:10px;">
143        <textarea id="miniOne" name="miniOne" style="height:150px;width:320px;">
144        &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
145        Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
146        velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
147        ante elementum turpis. Aliquam nisl. Nulla posuere neque non
148        tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
149        parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
150        Curabitur pharetra bibendum lectus.&lt;/p&gt;
151        </textarea>
152      </div>
153      <input type="submit" value="SUBMIT" />
154    </form>
155  </div>
156     
157</body>
158</html>
Note: See TracBrowser for help on using the repository browser.