Ignore:
Timestamp:
02/21/18 10:43:05 (2 years ago)
Author:
gogo
Message:
 
File:
1 copied

Legend:

Unmodified
Added
Removed
  • trunk/examples/testbed.php

    r1406 r1409  
    2121<head> 
    2222 
    23   <!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:-- 
    24     --  Xinha example usage.  This file shows how a developer might make use of 
    25     --  Xinha, it forms the primary example file for the entire Xinha project. 
    26     --  This file can be copied and used as a template for development by the 
    27     --  end developer who should simply removed the area indicated at the bottom 
    28     --  of the file to remove the auto-example-generating code and allow for the 
    29     --  use of the file as a boilerplate. 
    30     -- 
    31     --  $HeadURL: http://svn.xinha.org/trunk/examples/testbed.html $ 
    32     --  $LastChangedDate: 2009-11-08 17:36:46 +1300 (Sun, 08 Nov 2009) $ 
    33     --  $LastChangedRevision: 1197 $ 
    34     --  $LastChangedBy: gogo $ 
    35     ---------------------------------------------------------------------------> 
    36  
    3723  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    3824  <title>Example of Xinha</title> 
    3925  <link rel="stylesheet" href="files/full_example.css" /> 
    4026 
    41   <script type="text/javascript"> 
    42     // You must set _editor_url to the URL (including trailing slash) where 
    43     // where xinha is installed, it's highly recommended to use an absolute URL 
    44     //  eg: _editor_url = "/path/to/xinha/"; 
    45     // You may try a relative URL html if you wish 
    46     //  eg: _editor_url = "../"; 
    47     // in this example we do a little regular expression to find the absolute path. 
    48     _editor_url  = document.location.href.replace(/examples\/.*/, '') 
    49     _editor_lang = "en";      // And the language we need to use in the editor.     
    50     _editor_skin = 'blue-look'; 
     27  <script src="../XinhaEasy.js" type="text/javascript"> 
    5128     
    52   </script> 
     29    // The following options are, optional... 
     30    xinha_options =  
     31    { 
     32      // Specify language and skin 
     33      _editor_lang:   'en',         // Language to use 
     34      _editor_skin:   'silva',      // Name of the skin to use (see skins directory for available skins) 
     35       
     36      // Simply a CSS selector to pick the textarea(s) you want, eg 'textarea' converts all textarea, 
     37      // or textarea.my-xinha,textarea.your-xinha would convert only those textareas with the 
     38      // my-xinha or your-xinha classes on them 
     39      xinha_editors:  'textarea',    
    5340 
    54   <!-- Load up the actual editor core --> 
    55   <script type="text/javascript" src="../XinhaCore.js"></script> 
     41      // Plugins can be one of the simple pre-defined sets, common, minimal and loaded 
     42      //   xinha_plugins: 'minimal' 
     43      // 
     44      // or you can specify the plugins you want exactly 
     45      //   xinha_plugins: [ 'Linker', 'Stylist' ] 
     46      // 
     47      // or you can do both to add extras to the set 
     48      //   xinha_pass_to_php_backend: ['minimal', 'Linker' ] 
     49      xinha_plugins:  [ 'common', 'MootoolsFileManager', 'Linker' ], 
     50       
     51      // Toolbar can be one of the pre-defined toolbars, 'default', 'minimal', 'minimal+fonts' 
     52      //   xinha_toolbar: 'minimal+fonts' 
     53      // 
     54      // or you an specify a toolbar structure completely 
     55      //   xinha_toolbar: [ ["popupeditor"],["separator","bold","italic","underline","strikethrough","superscript"] ] 
     56      xinha_toolbar:  'minimal+fonts', 
     57       
     58      // This is where you set the default configuration which apply globally 
     59      xinha_config:            function(xinha_config)  
     60      { 
     61        xinha_config.CharacterMap.mode = 'panel'; 
     62        xinha_config.ContextMenu.customHooks = { 'a': [ ['Label', function() { alert('Action'); }, 'Tooltip', '/xinha/images/ed_copy.gif' ] ] } 
     63        
     64        /* 
     65          // We can load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL 
     66          //  otherwise it won't work! 
     67          xinha_config.stylistLoadStylesheet(document.location.href.replace(/[^\/]*\.html/, 'files/stylist.css')); 
    5668 
    57   <script type="text/javascript"> 
    58     xinha_editors = null; 
    59     xinha_init    = null; 
    60     xinha_config  = null; 
    61     xinha_plugins = null; 
     69          // Or we can load styles directly 
     70          xinha_config.stylistLoadStyles('p.red_text { color:red }'); 
    6271 
    63     // This contains the names of textareas we will make into Xinha editors 
    64     xinha_init = xinha_init ? xinha_init : function() 
    65     { 
    66       /** STEP 1 *************************************************************** 
    67        * First, what are the plugins you will be using in the editors on this 
    68        * page.  List all the plugins you will need, even if not all the editors 
    69        * will use all the plugins. 
    70        ************************************************************************/ 
     72          // If you want to provide "friendly" names you can do so like 
     73          // (you can do this for stylistLoadStylesheet as well) 
     74          xinha_config.stylistLoadStyles('p.pink_text { color:pink }', {'p.pink_text' : 'Pretty Pink'}); 
     75       */ 
    7176 
    72       xinha_plugins = xinha_plugins ? xinha_plugins : 
    73       [ 
    74         'MootoolsFileManager','Linker', 'TableOperations', 'ListOperations', 'ContextMenu', 'WebKitResize', 'FancySelects' 
    75       ]; 
    76              // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :) 
    77              if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return; 
    78  
    79       /** STEP 2 *************************************************************** 
    80        * Now, what are the names of the textareas you will be turning into 
    81        * editors? 
    82        ************************************************************************/ 
    83  
    84       xinha_editors = xinha_editors ? xinha_editors : 
    85       [ 
    86         'myTextArea' 
    87       ]; 
    88  
    89       /** STEP 3 *************************************************************** 
    90        * We create a default configuration to be used by all the editors. 
    91        * If you wish to configure some of the editors differently this will be 
    92        * done in step 4. 
    93        * 
    94        * If you want to modify the default config you might do something like this. 
    95        * 
    96        *   xinha_config = new Xinha.Config(); 
    97        *   xinha_config.width  = 640; 
    98        *   xinha_config.height = 420; 
    99        * 
    100        *************************************************************************/ 
    101  
    102        xinha_config = xinha_config ? xinha_config : new Xinha.Config(); 
    103       // xinha_config.fullPage = true; 
    104        with (xinha_config.MootoolsFileManager) 
     77        // Configure the File Manager 
     78        with (xinha_config.MootoolsFileManager) 
    10579        {  
    10680          <?php  
     
    12599          ?> 
    126100        } 
    127          
    128        with (xinha_config.Linker) 
     101       
     102        // Configure the Linker 
     103        with (xinha_config.Linker) 
    129104        {  
    130105          <?php  
     
    139114            ) 
    140115          ?> 
    141         }  
    142       /** STEP 3 *************************************************************** 
    143        * We first create editors for the textareas. 
    144        * 
    145        * You can do this in two ways, either 
    146        * 
    147        *   xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins); 
    148        * 
    149        * if you want all the editor objects to use the same set of plugins, OR; 
    150        * 
    151        *   xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config); 
    152        *   xinha_editors['myTextArea'].registerPlugins(['Stylist']); 
    153        *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']); 
    154        * 
    155        * if you want to use a different set of plugins for one or more of the 
    156        * editors. 
    157        ************************************************************************/ 
    158  
    159       xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins); 
    160  
    161       /** STEP 4 *************************************************************** 
    162        * If you want to change the configuration variables of any of the 
    163        * editors,  this is the place to do that, for example you might want to 
    164        * change the width and height of one of the editors, like this... 
    165        * 
    166        *   xinha_editors.myTextArea.config.width  = 640; 
    167        *   xinha_editors.myTextArea.config.height = 480; 
    168        * 
    169        ************************************************************************/ 
    170  
    171  
    172       /** STEP 5 *************************************************************** 
    173        * Finally we "start" the editors, this turns the textareas into 
    174        * Xinha editors. 
    175        ************************************************************************/ 
    176  
    177       Xinha.startEditors(xinha_editors); 
    178       window.onload = null; 
     116        } 
     117         
     118      } 
    179119    } 
    180120 
    181     window.onload   = xinha_init; 
    182121  </script> 
     122   
    183123</head> 
    184124 
    185125<body> 
    186   <h1> Demonstration of MootoolsFileManager with Xinha integration </h1> 
    187   <p>  Click into the WYSIWYG area and then click the insert image button in the tool bar. </p> 
    188   <p>  Highlight some text and click the insert file link button (folder with a link on it).</p> 
    189   <p>  This demo also includes the Linker plugin (for creating normal links). </p> 
    190126   
    191127  <form action="javascript:void(0);" id="editors_here" onsubmit="alert(this.myTextArea.value);"> 
Note: See TracChangeset for help on using the changeset viewer.