| <!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 <head> 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;"> |
| <p>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.</p> |
| </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"> |
| <p>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.</p> |
| </textarea> |
| </div> |
| |
| <div style="margin-top:10px;"> |
| <textarea id="miniOne" name="miniOne" style="height:150px;width:320px;"> |
| <p>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.</p> |
| </textarea> |
| </div> |
| <input type="submit" value="SUBMIT" /> |
| </form> |
| </div> |
| |
| </body> |
| </html> |
