Changes between Version 3 and Version 4 of Documentation/NewbieGuide


Ignore:
Timestamp:
03/14/18 08:23:42 (4 months ago)
Author:
gogo
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • Documentation/NewbieGuide

    v3 v4  
    66[[PageOutline]] 
    77 
    8 == Newbie Guide, or, How To Put Xinha On Your Page == 
     8= Newbie Guide, or, How To Put Xinha On Your Page = 
    99 
    1010Including one or more Xinha areas on your page has been made very easy, in fact for defaults it's as simple as adding one line to your `<head>` ! 
    1111 
    12 === One Line To Xinha === 
     12== One Line To Xinha == 
    1313 
    1414Assuming that your page contains one or more `<textarea>` that you wish to turn into Xinha areas, and you just want default options, then this is all you need. 
     
    1818}}} 
    1919 
    20 === Optionally Convert Only Certain `<textarea>` === 
     20== Basic Options == 
     21=== Convert Only Certain `<textarea>` === 
    2122 
    2223You muight want to be a bit more picky about which textareas get converted, some simple configuration will see to it, 
     
    3334now only `<textarea class="some-css-class"></textarea>` will be converted.  You can use multiple and full CSS selectors as you desire, just like you would for writing CSS rulesets. 
    3435 
    35 === Optionally Set the Language and Skin === 
     36=== Set the Language and Skin === 
    3637 
    3738We can easily set the language and skin to your desire with some more options 
     
    5253The options for [[/browser/trunk/skins|Skins are those here]], use the folder name as the skin name. 
    5354 
    54 === Optionally Specify Some Plugins === 
     55=== Specify Some Plugins === 
    5556 
    5657Xinha uses a system of [[/browser/trunk/plugins|Plugins]] to provide extra functionality.  The default is to use a set of those plugins which are most commonly useful, but you can also specify a list of plugins, or the set names 'minimal', 'common', and 'loaded' (which means use a whole bunch more plugins that might be less useful commonly) or a combination there-of with a simple option... 
     
    7172here we have specified that in addition to the 'minimal' set of plugins, we also want `TableOperations` which provides more complete table editing functions. 
    7273 
    73 === Optionally Specify A Toolbar === 
     74=== Specify A Stylesheet === 
     75 
     76To make Xinha a real WYSIWYG editor you should also load a stylesheet into it that will give your users the "look" of what they are typing as it would appear on the website, again it's just an option away... 
     77 
     78{{{ 
     79  <script type="text/javascript" src="//s3-us-west-1.amazonaws.com/xinha/xinha-1.5-beta1/XinhaEasy.js"> 
     80    xinha_options = 
     81    { 
     82      _editor_lang:   'fr', 
     83      _editor_skin:   'blue-look', 
     84      xinha_editors:  'textarea.some-css-class', 
     85      xinha_plugins:  'minimal', 
     86      xinha_toolbar:  'supermini', 
     87      xinha_stylesheet: '/path/to/your/styles.css' 
     88    } 
     89  </script> 
     90}}} 
     91 
     92=== Specify A Toolbar === 
    7493 
    7594The toolbar (buttons and drop-down selectors) can be customised easily using the `xinha_toolbar` option, it accepts either one of the keywords `default`, `minimal`, `minimal+fonts`, `supermini` (it can also accept a toolbar structure but we will leave that for another time). 
     
    90109Here we have specified this is going to be an extremely minimal editor indeed! 
    91110 
    92 === Optionally Specify A Stylesheet === 
    93  
    94 To make Xinha a real WYSIWYG editor you should also load a stylesheet into it that will give your users the "look" of what they are typing as it would appear on the website, again it's just an option away... 
    95  
    96 {{{ 
    97   <script type="text/javascript" src="//s3-us-west-1.amazonaws.com/xinha/xinha-1.5-beta1/XinhaEasy.js"> 
    98     xinha_options = 
    99     { 
    100       _editor_lang:   'fr', 
    101       _editor_skin:   'blue-look', 
    102       xinha_editors:  'textarea.some-css-class', 
    103       xinha_plugins:  'minimal', 
    104       xinha_toolbar:  'supermini', 
    105       xinha_stylesheet: '/path/to/your/styles.css' 
    106     } 
    107   </script> 
    108 }}} 
    109  
    110  
    111 === Optionally Provide Some Configuration === 
     111 
     112=== Provide Some Configuration === 
    112113 
    113114Xinha and it's plugins have lots of scope to configure them as you require, we won't cover all the configuration settings here but this is how you can do it... 
     
    135136here we have turned on the ability for the user to click-drag resize the editor (note that this only works well in Chrome and Safari). 
    136137 
    137 === Optionally Provide Different Configuration For A Specific Editor === 
     138== Editor-Specific Options == 
     139 
     140If you have more than one editor on a page, or you are using the same "include" to load editors on multiple pages, you might want to give different editors different option sets. 
     141 
     142=== Provide Different Configuration For A Specific Editor === 
    138143 
    139144There might be times when you want to give a different configuration to certain editors than to certain others, we can do that no problem... 
     
    168173here we have decided that any textarera with class "for-email" (which also has "some-css-class" in the first place causing it to be selected for conversion) should be configured as "sevenBitClean" (which means that only 7 bit characters are used in the output). 
    169174 
    170 === Optionally Disable Some Plugins For A Specific Editor === 
     175=== Disable Some Plugins For A Specific Editor === 
    171176 
    172177It might be the case that you want certain editors not to have some plugins, we can sort that out... 
     
    209214here we have removed TableOperations from the for-email editor. 
    210215 
    211 === Optionally Set The Toolbar For A Specific Editor === 
     216=== Set The Toolbar For A Specific Editor === 
    212217 
    213218It might be the case that you want some editor to have a differnet toolbar than others, we can do this by adjusting that editor's configuration... 
     
    254259 
    255260here we have decided that the texarea with 'full-tools' class name should get the default toolbar. 
     261 
     262== Load External (Local) Plugins == 
     263 
     264it may be that you wish to develop your own Xinha plugins and keep them separate to Xinha (or you use Xinha from a CMS), or you wish to use plugins such as Linker and MootoolsFileManager which must be run on your own webserver because they allow browsing or uploading files on your webserver.   
     265 
     266You can use these even if you are pulling Xinha from a CMS simply by specifying them as external plugins.   See the "Custom Plugins Example" 
     267 
     268{{{ 
     269  <script src="//s3-us-west-1.amazonaws.com/xinha/xinha-1.5-beta1/XinhaEasy.js" type="text/javascript"> 
     270     
     271    xinha_options =  
     272    { 
     273      xinha_plugins:  [  
     274         'minimal',  
     275         { from: '/xinha_external_plugins', load: ['MootoolsFileManager', 'Linker'] } , 
     276         { from: '/my_custom_plugins', load: ['CustomPlugin'] } 
     277      ], 
     278       
     279      // This is where you set the other default configuration globally 
     280      xinha_config:            function(xinha_config)  
     281      { 
     282         
     283        // Configure the plugins as you normally would here (consult plugin documentation) 
     284         
     285      } 
     286    } 
     287 
     288  </script> 
     289}}} 
     290 
     291This code shows loading plugins from 3 locations, first the standard 'minimal' plugins are loaded from Xinha, then the `MootoolsFileManager` and `Linker` plugins are loaded from your local server's `/xinha_external_plugins` folder (eg, `/xinha_external_plugins/MootoolsFileManager/MootoolsFileManager.js`) and finally your own `CustomPlugin` is loaded from `/my_custom_plugins/` (ie, `/my_custom_plugins/CustomPlugin/CustomPlugin.js`)