source: trunk/examples/CustomPlugins.html @ 1421

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

Add support for using external plugins with XinhaEasy.js and add Xinha.pluginManifest to describe location of built in plugins (and modules) without needing to "ping" them.

The pluginManifest can be generated by bash script contrib/generate-plugin-manifest.sh and should be done and updated before release.

For external/custom plugins when using XinhaEasy.js simply set the xinha_plugins option thusly...

xinha_plugins: [ 'BuiltInPlugin1', { from: '/path/to/custom/plugins', load: 'CustomPlugin1' } ]

It works even for the PHP plugins, MootoolsFileManager? and Linker when using Xinha from a CDN etc, as long of course as they have the contrib php-xinha.php available to them.

File size: 4.6 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>Custom Plugins Xinha Loading Example</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', { from: '/examples/custom_plugins', load: 'StatusBarMessage' } ],
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
53      },
54     
55      // Here is where you can customise configs for each editor area
56      xinha_config_specific:   function(xinha_config, textarea)
57      {
58
59      },
60     
61      // Here you can limit the plugins to certain editor areas
62      //   note that you only can use the plugins you specified
63      //   above in xinha_plugins, you just don't have to use all of
64      //   them but that controls what code gets loaded this contols
65      //   which editors get them
66      xinha_plugins_specific:  function(xinha_plugins, textarea)
67      {
68
69      }
70    }
71
72  </script>
73
74
75</head>
76
77<body>
78  <h1>Custom Plugins Newbie Guide Example</h1>
79  <p> This example shows how you can load custom plugins which are outside of the Xinha standard plugins location. </p>
80 
81  <p> You can do this even if you use Xinha from a CDN and have your custom plugins locally. </p>
82 
83  <p>Click into the editor and look in the status bar, on the right you will see the message printed by this (silly) custom plugin which has been loaded from /examples/custom_plugins.</p>
84
85 
86  <div>
87    <form onsubmit="alert(this.myTextArea.value); return false;" style="">
88   
89      <textarea id="firstOne" name="firstOne" style="width:100%;height:10em;">
90      &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
91      Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
92      velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
93      ante elementum turpis. Aliquam nisl. Nulla posuere neque non
94      tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
95      parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
96      Curabitur pharetra bibendum lectus.&lt;/p&gt;
97      </textarea>
98
99      <input type="submit" value="SUBMIT" />
100    </form>
101  </div>
102     
103   
104  <p>You can see in the source of this page how we do this, simply by specifying...</p>
105 
106  <pre>
107    xinha_plugins:  [ 'minimal', { from: '/examples/custom_plugins', load: 'StatusBarMessage' } ]
108  </pre>
109 
110  <p>... as an option to Xinha, which says, to load the standard 'minimal' plugins and also, from '/examples/custom_plugins' directory, load 'StatusBarMessage' plugin, you could of course <tt>load: ['StatusBarMessage', 'AnotherCustom' ]</tt> to load more than one thing from the same directory.</p>
111 
112</body>
113</html>
Note: See TracBrowser for help on using the repository browser.